1.3.0 • Published 5 years ago
@geniusdevs/react-native-code-input v1.3.0
React-Native-Code-Input
React-Native-Code-Input is an easy to use React Native Component for Confirmation Code Input.
Features
- Fully Capable of customizing styles
- Change keyboard Type
- Change Keyboard return key type
- Change number of inputs based on your confirmation code length
- handling different events
Installation
use npm to install the package
npm install --save @geniusdevs/react-native-code-inputUsage
import {CodeInput} from '@geniusdevs/react-native-code-input';
const App = () => {
return (
<CodeInput/>
);
};Props
Attributes
| Attribute | Description | Default Value |
|---|---|---|
| enabled | enables or disables the component | true |
| length | Number of Inputs | 6 |
| keyboardType | Keyboard type to show. Possible values are: - default- number-pad- decimal-pad- numeric- email-address- phone-pad | numeric |
| returnKeyType | Determines how the return key should look.Possible values are: - done- go- next- search- send | done |
| inputContainerStyle | Style of the each input View container | {} |
| containerStyle | Style of the View container | {} |
| inputStyle | Style of each TextInput | {} |
| focusedInputStyle | Style of the container of focused TextInput | {borderBottomColor: 'green'} |
Events
| Event | Description |
|---|---|
| onValueChange | An event to get the value of inputs as a string |
| onClick | This event is called whenever one of the inputs is touched |
| onKeyPress | This event is called whenever a keyboard button is pressed |
| onFinish | This event is called whenever the whole code is entered.This event is useful when you want to verify the code as soon as the last digit in entered. |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.