react-native-otp-inputs

Demo

Description

react-native-otp-inputs is fully customizable, pure JavaScript package, that provides solution for One-time password feature with user friendly events like moving to previous input with backspace or going to next when filled in. It supports pasting and otp code into inputs

Installation

| React-Native version | installation | | -------------------- | -------------------------------------- | | >= 0.53.0 < 0.57.0 | yarn add [email protected] | | <= 0.57.0 | yarn add [email protected] | | <= 0.59.0 | yarn add react-native-otp-inputs |

Migration to v4

Basic usage

import React, { Component } from 'react';
import { View } from 'react-native';
import OtpInputs from 'react-native-otp-inputs';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <OtpInputs handleChange={code => console.log(code)} numberOfInputs={6} />
      </View>
    );
  }
}

API

| Method | Type | Required | Default | Description | | --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------- | | autoCapitalize | string | false | 'none' | | | clearTextOnFocus | boolean | false | false | | | handleChange | function | true | console.log | Returns otp code. | | keyboardType | string | true | 'phone-pad' | | | numberOfInputs | number | true (1..6) | 4 | Inputs count to render. | | secureTextEntry | boolean | false | false | | | selectTextOnFocus | boolean | false | true iOS Only | | | testIDPrefix | string | false | otpInput-${inputIndex} | Prefix for testID. | | isRTL | boolean | false | false | Preferably I18nManager.isRTL. | | placeholder | string | false | none | Placeholder for the input boxes. | | styles | style (object) | false | default | Applied to whole container. | | focusStyles | style (object) | false | default | Applied to the input on focus. | | inputStyles | style(object) | false | default | Applied to single input. | | inputContainerStyles | style (object) | false | default | Applied to each input container. | | ...restTextInputProps | | | | TextInput |

Methods

Those can be called on ref:

| Method | Description | | ------ | -------------------------------------------------------------- | | reset | Reset inputs and returns to handleChange method empty string |

Example

import React, { Component } from 'react';
import { Button, View } from 'react-native';
import OtpInputs from 'react-native-otp-inputs';

export default class App extends Component {
  otpRef = React.createRef();

  resetOTP = () => {
    this.otpRef.current.reset();
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Reset" onPress={this.resetOTP} />
        <OtpInputs ref={this.otpRef} handleChange={code => console.log(code)} numberOfInputs={6} />
      </View>
    );
  }
}

Contributors

Great thanks to : @kantorm.