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~~ react native:

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

expo:

$ yarn add react-native-otp-inputs expo-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 <= 0.59

run the following command to link the package:

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

For iOS, make sure you install the pod file.

cd ios && pod install && cd ..

or you could follow the instructions to manually link the project

| React-Native version | version | | -------------------- | -------------------------------------- | | 0.53.0 - 0.56.1 | yarn add [email protected] | | 0.57.0 - 0.58.6 | yarn add [email protected] | | +0.59.0 | yarn add react-native-otp-inputs |

Basic usage

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

// expo
import {* as ExpoClipboard} from 'expo-clipboard';
const Clipboard = {
  setString: ExpoClipboard.setStringAsync,
  getString: ExpoClipboard.getStringAsync
}

// react-native
import Clipboard from '@react-native-clipboard/clipboard'


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

API

Contributors

Great thanks to : @kantorm.