https://github.com/jazibjafri/inputs-react-native
Inputs for react native with easy built-in validations.
https://github.com/jazibjafri/inputs-react-native
hacktoberfest inputs react-native typescript validations
Last synced: 6 months ago
JSON representation
Inputs for react native with easy built-in validations.
- Host: GitHub
- URL: https://github.com/jazibjafri/inputs-react-native
- Owner: jazibjafri
- License: mit
- Created: 2020-07-03T14:45:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T10:33:46.000Z (about 3 years ago)
- Last Synced: 2025-03-10T15:42:46.033Z (12 months ago)
- Topics: hacktoberfest, inputs, react-native, typescript, validations
- Language: TypeScript
- Homepage:
- Size: 1.05 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Inputs React Native
Inputs for react native with easy built-in validations.
> **For a complete example, see below**
## Installation
```
npm install inputs-react-native
```
## Basic Usage
```js
import TextInput from 'inputs-react-native'
const Component = () => {
<>
>
}
```
And that's it! Your text input is now complete with email validation.
## All Accepted Props
In addition to all props accepted by `TextInput` from `react-native`, following props are accepted:
Property name | Type | Values | Default | Description
--- | --- | --- | --- | --- |
`onChangeText` | optional | `(val: string, error: boolean) => void` | `undefined` | returns input text and error status
`validators` | optional | `Array<'basic' \| 'email \| 'password' \| 'phone'>` | `[]` | validations to apply.
`validateOn` | optional | `start-editing`, `end-editing`, `never` | `end-editing` | when to run validation
`errorMessage` | optional | `any` | (separate defaults for each validation type) | custom error message to display when validation fails
`errorViewStyles` | optional | `ViewStyle` | (some basic styles) | styles for view component of error message
`errorTextStyles` | optional | `TextStyle` | (some basic styles) | styles for text component of error message
All other props are passed down to react-native's `TextInput`
## Example
```js
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import TextInput from 'inputs-react-native';
const Input = () => {
const [email, setEmail] = useState('');
const handleOnChange = (val, err) => {
if(err) {
// handle error
}
//handle change
setEmail(val);
}
return (
handleOnChange(val, err)}
value={email}
validateOn="start-editing"
errorMessage="Invalid email format"
errorViewStyles={styles.errorViewStyles}
errorTextStyles={styles.errorTextStyles}
/>
);
}
const styles = StyleSheet.create({
errorTextStyles: {
color: 'red',
},
errorViewStyles: {
borderColor: 'red',
borderWidth: 2,
},
});
```
## License
[MIT](https://github.com/JazibJafri/inputs-react-native/blob/master/LICENSE)