@meksiabdou/react-native-usevalidation NPM

react-native-usevalidation

React-Native form validation easy and simple to use

downloads npm license

Installation

npm install @meksiabdou/react-native-usevalidation

yarn add @meksiabdou/react-native-usevalidation

Usage

import * as React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInputProps,
  TextInput,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import useValidation, {
  ValidationInputType,
} from '@meksiabdou/react-native-usevalidation';

const InputView = ({
  name,
  label,
  error,
  value,
  type,
  handelOnChange,
  ...rest
}: TextInputProps & {
  handelOnChange: (e: any) => void;
  error?: string;
  name: string;
  type?: any;
  label: string;
}) => {
  return (
    <View style={[styles.inputView]}>
      <Text style={[styles.inputLabel]}>{label}</Text>
      <View style={[styles.inputGroupView]}>
        <TextInput
          {...rest}
          value={value}
          onChangeText={(text) => handelOnChange({ value: text, type, name })}
          style={styles.input}
        />
      </View>
      {error ? <Text style={[styles.inputError]}>{error}</Text> : null}
    </View>
  );
};

export default function App() {
  const inputs: Array<
    ValidationInputType & { props: TextInputProps & { label: string } }
  > = [
    {
      name: 'fullname',
      required: true,
      messages: {
        required: 'the fullname is required',
      },
      props: {
        label: 'Full name',
        placeholder: 'Meksi Abdennour',
        autoCorrect: false,
      },
    },
    {
      name: 'phone',
      required: true,
      regexp: /^[0]{1}[1-9]{1}[0-9]{8}$/g,
      messages: {
        required: 'the phone is required',
        regexp: 'the phone is invalid',
      },
      props: {
        label: 'Phone number',
        placeholder: '0550565822',
        keyboardType: 'phone-pad',
      },
    },
    {
      name: 'email',
      required: true,
      messages: {
        required: 'the email is required',
        regexp: 'the email is invalid',
      },
      props: {
        label: 'Email',
        placeholder: 'contact@example.com',
        autoCapitalize: 'none',
        keyboardType: 'email-address',
      },
    },
    {
      name: 'age',
      required: true,
      min: 20,
      max: 60,
      messages: {},
      props: {
        label: 'Age',
        placeholder: '20',
        autoCapitalize: 'none',
        keyboardType: 'number-pad',
      },
    },
    {
      name: 'password',
      required: true,
      maxLength: 12,
      minLength: 8,
      messages: {
        required: 'the password is required',
      },
      props: {
        label: 'Password',
        placeholder: '***********',
        secureTextEntry: true,
        autoCapitalize: 'none',
      },
    },
    {
      name: 'confirm-password',
      required: true,
      match: 'password',
      messages: {
        required: 'the confirm password is required',
        match: 'Be sure to match the password',
      },
      props: {
        label: 'Confirm password',
        placeholder: '***********',
        secureTextEntry: true,
        autoCapitalize: 'none',
      },
    },
  ];

  const { data, errors, handelOnChange, handelOnSubmit } =
    useValidation(inputs);

  const onSubmit = (status: boolean) => {
    if (status) {
      console.log(data);
    } else {
      console.log(errors);
    }
  };

  return (
    <ScrollView>
      <View style={styles.container}>
        <Text>Form Example</Text>
        <View style={{ marginTop: 20 }}>
          {inputs.map((item) => {
            return (
              <InputView
                key={item.name}
                name={item.name}
                {...item.props}
                type={item?.type}
                error={errors[item.name]}
                value={data[item.name]}
                handelOnChange={handelOnChange}
              />
            );
          })}
        </View>
        <View>
          <TouchableOpacity
            style={styles.btnSubmit}
            activeOpacity={0.8}
            onPress={() => handelOnSubmit(onSubmit)}
          >
            <Text style={{ color: '#fff', fontSize: 16 }}>Submit</Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60,
    paddingHorizontal: 20,
    backgroundColor: '#f9f9f9',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
  inputView: {
    marginBottom: 10,
  },
  inputGroupView: {
    display: 'flex',
    alignContent: 'space-between',
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#333',
    paddingHorizontal: 5,
  },
  input: {
    minHeight: 45,
  },
  inputError: {
    marginTop: 10,
    color: '#ff0000',
  },
  inputLabel: {
    marginBottom: 10,
    textTransform: 'capitalize',
  },
  btnSubmit: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
    paddingVertical: 15,
    borderRadius: 3,
  },
});