react-native-otp-inputs

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	version
0.53.0 - 0.56.1	yarn add react-native-otp-inputs@1.1.0
0.57.0 - 0.58.6	yarn add react-native-otp-inputs@3.2.2
+0.59.0	yarn add react-native-otp-inputs

Android additional steps

Android setup requires react-native-keyevent package to work properly.

1. If you are using react-native < 0.60.0 then follow these steps
2. If you are using react-native >= 0.60.0 then add this to your dependencies in react-native.config.js

// react-native.config.js
module.exports = {
    dependencies: {
        "react-native-keyevent": {
            platforms: {
                ios: null,
            },
        },
    },
};

1. Add react-native-keyevent to your dependencies with

yarn add react-native-keyevent

1. Then follow configuration for Android here (If you have problems, check Example App configuration)

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

Contributors

Great thanks to : @kantorm.