react-native-validation-input v1.0.7

react-native-validation-input

Presents a React Native component as Validation input view of text elements.

Installation

npm i react-native-validation-input or yarn react-native-validation-input

npm install react-native-safe-area-context

API Reference

Props *

| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `InputComponent` | `React Component` | component that will be rendered in place of the React Native TextInput |
| `label`          | `ReactNode`       | add a label on top of the input |
| `labelStyle    ` | `Text Style`      | styling for the label; You can only use this if label is a string |
| `placeholder`    | `string`          | The text color of the placeholder string. |
| `type`           | `string`          | **type**. passed the input type {eg. "Email" ,"text","Phone"} |
| `value`          | `string`          | The value to show for the text input. |
| `onChangeText`   | `function`        | Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler. |
| `errorMessage`   | `string`          | Error message to be displayed under the input field |
| `errorStyle`     | `Text Style`      | add styling to **error message** |
| `secureTextEntry`| `boolean`         | **secureTextEntry**. the input component |
| `disabled`       | `boolean`         | **disabled**. the input component |
| `leftIcon`       | `IconNode`        | **leftIcon**. displays an icon on the left |
| `rightIcon`      | `IconNode`        | **rightIcon**. displays an icon on the right |
|`setRequireStatus`| `boolean`         | **boolean**. This is Required for submit button control submit button  |

#### input Component

Used By

Example1

 <CustomInput
        value={value.email}
        setText={(text => setValue({ ...value, email: text }))}
        placeholder='Enter Email'
        errorMessage='Email Required'
        setRequireStatus={setRequireStatus}
        type="email"
      />

Example2

<CustomInput
        value={value.password}
        setText={(text => setValue({ ...value, password: text }))}
        placeholder='Enter Password'
        errorMessage='Passeord Required'
        secureTextEntry={tougle === true && true}
        type="phone"
        setRequireStatus={setRequireStatus}
        rightIcon={
          tougle ?
            <TouchableOpacity
              onPress={() => {
                setTougle(false);
              }}
            >
              <Text>View</Text>
            </TouchableOpacity>
            :
            <TouchableOpacity
              onPress={() => {
                setTougle(true);
              }}
            >
              <Text>Less</Text>
            </TouchableOpacity>
        }
      />

Full example

import {
  StyleSheet, Text, TouchableOpacity,
  Button,
  ToastAndroid,
} from 'react-native';
import React, { useState } from 'react';
import CustomInput from 'react-native-validation-input';
export default function App() {
  const initialState = {
    email: '',
    password: '',
  };
  const [value, setValue] = useState(initialState);
  const [tougle, setTougle] = useState(false);
  const [requireStatus, setRequireStatus] = useState(false);
  const handelSubmit = () => {
    if (requireStatus === true) {
      alert(value)
    } else {
      ToastAndroid.showWithGravityAndOffset(
        'Input Field Require',
        ToastAndroid.LONG,
        ToastAndroid.BOTTOM,
        25,
        50,
      );
    }
  }
  return (
    <>
      <CustomInput
        value={value.email}
        setText={(text => setValue({ ...value, email: text }))}
        placeholder='Enter Email'
        errorMessage='Email Required'
        setRequireStatus={setRequireStatus}
        type="email"
      />

      <CustomInput
        value={value.password}
        setText={(text => setValue({ ...value, password: text }))}
        placeholder='Enter Password'
        errorMessage='Passeord Required'
        secureTextEntry={tougle === true && true}
        type="phone"
        setRequireStatus={setRequireStatus}
        rightIcon={
          tougle ?
            <TouchableOpacity
              onPress={() => {
                setTougle(false);
              }}
            >
              <Text>View</Text>
            </TouchableOpacity>
            :
            <TouchableOpacity
              onPress={() => {
                setTougle(true);
              }}
            >
              <Text>Less</Text>
            </TouchableOpacity>
        }
      />
      <Button title='submit' onPress={() => handelSubmit()} />
    </>
  );
}