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-Input

Usage

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.

License

MIT