React-Native-Input-Style

Styled Input With Animation, Label and Error text For React Native

Installation

Use the package manager yarn / npm to install React-Native-Input-Style.

npm install react-native-input-style --save

or

yarn add react-native-input-style

Example

Outlined example:

Regular example:

Usage

import Input from 'react-native-input-style';

<Input
  onlyEnglish
  id="name"
  label="Full Name"
  keyboardType="default"
  required
  contain=" "
  autoCapitalize="sentences"
  errorText="Your name is invalid"
  onInputChange={YOUR_InputChangeHandler}
  initialValue=""
  outlined
  borderColor="blue"
  />

<Input
  id="password"
  label="password"
  keyboardType="default"
  secureTextEntry
  required
  submit={!isSignup && authHandler}
  minLength={6}
  maxLength={20}
  autoCapitalize="none"
  errorText="Your password is invalid"
  onInputChange={YOUR_InputChangeHandler}
  initialValue=""
  outlined
  borderColor="blue"
  />

Props

All the options of React-Native-textinput

More options:

| Property | Type | Default | Description | | ----------------------- | -------- | ------- | -------------------------------------------- | | id | string | ------- | Id of input value | | label | string | ------- | Label of input type. | | required | boolean | false | The input value is necessary | | submit | function | ------- | On submit editing | | minLength | number | ------- | Minimum digits for value | | maxLength | number | ------- | Maximum digits for value | | min | number | ------- | Minimum value of input value | | max | number | ------- | Maximum value of input value | | email | boolean | false | Input supposed to be email | | maxLength | boolean | ------- | Maximum digits for value | | maxLength | boolean | ------- | Maximum digits for value | | maxLength | boolean | ------- | Maximum digits for value | | contain | string | ------- | Input has to contain value | | errorText | string | ------- | Error text under the value | | onInputChange | function | ------- | Input change function | | initialValue | string | ------- | Initial value of input | | initiallyValid | boolean | false | Initial value is valid | | outlined | boolean | false | Type of the input style | | borderColor | string | gray | Color of border | | fontSize (for outlined) | number | 18 | Start font size of label in input | | right | boolean | false | If label and error text should be right side | | formControlStyle | object | ------- | Specific style of form control | | errorContainerStyle | object | ------- | Specific style of error container | | errorText | object | ------- | Specific style of error text | | labelStyle | object | ------- | Specific style of label | | inputStyle | object | ------- | Specific style of input |

Author

Rom Ovadia

CD-ROM

License

MIT