react-native-otp-inputs

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

Supported version: react-native >= 0.59.0

Expo is currently not supported as Clipboard is not included in Expo SDK

$ yarn add react-native-otp-inputs @react-native-clipboard/clipboard

After installation run:

$ npx pod-install

Clipboard module has been extracted from react-native core, so it needs to be installed separately. Package uses it for autofill feature

$ react-native link @react-native-clipboard/clipboard

cd ios && pod install && cd ..

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.

Changelog

v7.0.0 (31/03/2021)

@react-native-community/clipboard has been changed to @react-native-clipboard/clipboard.

Now installation process should be:

$ yarn add react-native-otp-inputs @react-native-clipboard/clipboard

BREAKING CHANGE

v6.0.0 (04/07/2020)

BREAKING CHANGE

• Clipboard has been extracted from react-native core as part of Lean Core. Now this module uses Clipboard. Additional steps needed are:

$ yarn add @react-native-community/clipboard
$ npx pod-install

For android, the package will be linked automatically on build.

$ react-native link @react-native-community/clipboard

cd ios && pod install && cd ..