react-native-validation-input

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

Screenshots

Installation

To deploy this project run

  npm i react-native-validation-input

or

  yarn react-native-validation-input

Features

• TextInput
• TextInput Validation
• All type TextInput Validation

Examples

  import CustomInput from 'react-native-validation-input'

  <CustomInput
        style={{ backgroundColor: "yellow", padding: 5 }}
        value={value.email}
        setText={(text => setValue({ ...value, email: text }))}
        placeholder='Enter Email'
        errorMessage="please valid Email id "
        setRequireStatus={setRequireStatus}
        type="email"
        multiline={true}
        numberOfLines={1}
        disabled={true}
        maxLength={100}
        autoFocus={true}
        keyboardType='email-address'
        underlineColorAndroid="transparent"
      />

     <CustomInput
        style={{ backgroundColor: "yellow", padding: 5 }}
        value={value.password}
        setText={(text => setValue({ ...value, password: text }))}
        placeholder='Enter password'
        errorMessage="Enter required password "
        setRequireStatus={setRequireStatus}
        type="text"
        secureTextEntry={true}
        keyboardType="numeric"
      />

Full Example

import {
  StyleSheet,
  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(JSON.stringify(value))
      setValue('');
    } else {
      ToastAndroid.showWithGravityAndOffset(
        'Input Field Require',
        ToastAndroid.LONG,
        ToastAndroid.BOTTOM,
        25,
        50,
      );
    }
  }
  return (
    <>
      <CustomInput
        style={{ backgroundColor: "yellow", padding: 5 }}
        value={value.email}
        setText={(text => setValue({ ...value, email: text }))}
        placeholder='Enter Email'
        errorMessage="please valid Email id "
        setRequireStatus={setRequireStatus}
        type="email"
        multiline={true}
        numberOfLines={1}
        disabled={true}
        maxLength={100}
        autoFocus={true}
        keyboardType='email-address'
        underlineColorAndroid="transparent"
      />
      <CustomInput
        style={{ backgroundColor: "yellow", padding: 5 }}
        value={value.password}
        setText={(text => setValue({ ...value, password: text }))}
        placeholder='Enter password'
        errorMessage="Enter required password "
        setRequireStatus={setRequireStatus}
        type="text"
        secureTextEntry={true}
        keyboardType="numeric"
      />
      <Button title='submit' onPress={() => handelSubmit()} />
    </>
  );
}

API Reference

Get all items

  https://reactnative.dev/docs/textinput#value

| Props | Type | Description | | :-------- | :------- | :------------------------- | | value | string | Required. The value to show for the text input. | | onChangeText | function | Required. Callback that is called when the text input's text changes | | placeholder | string | Required. The string that will be rendered before text input has been entered. | | placeholderTextColor | color | The text color of the placeholder string. | | keyboardType | enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') | Determines which keyboard to open, e.g.numeric. | | style | Text | Note that not all Text styles are supported, | | cursorColor | color | When provided it will set the color of the cursor (or "caret") in the component. | | disabled | bool | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. | | autoFocus | bool | If true, focuses the input on componentDidMount or useEffect. The default value is false. | | maxLength | color | The text color of the placeholder string. | | secureTextEntry | bool | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. Does not work with multiline={true}. | | multiline | bool | If true, the text input can be multiple lines. The default value is false. | | numberOfLines | numbers | Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. | | textAlign | enum('left', 'center', 'right') | Align the input text to the left, center, or right sides of the input field. |