Skip to content
OTP inputs for React-Native
TypeScript Objective-C Java JavaScript Ruby Python
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot
.github/workflows
.vscode
Example
docs
jest
src
.eslintignore
.eslintrc.js
.gitignore
.grenrc.js
.npmignore
.npmrc
.release-it.js
CHANGELOG.md
LICENCE
README.md
babel.config.js
index.d.ts
package.json
tsconfig.json
yarn.lock

README.md

react-native-otp-inputs

codecov

npm npm

Demo

Demo

Description

react-native-otp-inputs is fully customizable, React-Native 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.

You can’t perform that action at this time.