1.1.0 • Published 7 years ago
@amiralis1365/react-native-code-input v1.1.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 React-Native-Code-InputUsage
import {CodeInput} from '@amiralis1365/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 | {} |
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.