thuansb / react-native-otp

OTP Input component for React Native

react-native-otp

OTP Input component for React Native

Features

• The behavior is the same with the native input component, the only difference is the OTP UI
• Can use as Controlled component (support clear OTP, autofill OTP) and Uncontrolled component
• Easy to customize style
• No additional dependencies

Preview

Install

NPM

npm install react-native-otp

Yarn

yarn add react-native-otp

Usage

1. Controlled component

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import OTPInput from './otp';

export default class App extends React.Component {

  state = {
    otp: ''
  }

  handleOTPChange = (otp) => {
    this.setState({ otp })
  }

  clearOTP = () => {
    this.setState({ otp: undefined })
  }

  autoFill = () => {
    this.setState({ otp: '221198' })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Enter OTP password</Text>

        <OTPInput
          value={this.state.otp}
          onChange={this.handleOTPChange}
          tintColor="#FB6C6A"
          offTintColor="#BBBCBE"
          otpLength={6}
        />

        <Button onPress={this.clearOTP} title="Clear" />
        <Button onPress={this.autoFill} title="Auto fill" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    marginBottom: 15
  }
});

1. Uncontrolled component

     <OTPInput
          tintColor="#FB6C6A"
          offTintColor="#BBBCBE"
          otpLength={6}
        />

Available props

Name	Type	Default	Description
value	string	undefined	This value will be applied to the TextInput. Use this prop if you want a Controlled Component.
onChange	function	() => null	On otp input change
otpLength	number	6	length of otp numbers
tintColor	string	'#FB6C6A'	active cell underline color
offTintColor	string	'#BBBCBE'	cell under line color
containerStyle	object	{}	overide container style
cellStyle	object	{}	overide cell style
all other Text Input properties			Use this if you want to apply any other property to Text Input

License

MIT