react-native-otp-column

Sample Screenshot

Guide :

Install package using

npm i react-native-otp-column

Use as given in below example

Example :

import React, { useState} from 'react';
import {View} from 'react-native';
import OtpColumn from 'react-native-otp-column';

const OtpComponent = props => {
  const [otp, setOpt] = useState('');

  return (
    <View style={{flex: 1}}>
      <OtpColumn 
          numberOfCell={6} 
          value={otp} 
          setOtpValue={setOpt} 
          //editable={false}
          style={{borderColor: 'black', borderWidth: 4, borderRadius: 20}}
      />
    </View>
  );
};

export default OtpComponent;

Props:

| Props | type | Default | | ------------- | ------------ | --------- | | numberOfCell | Number | required as props | | value | Number | required state value | | setOtpValue | function | required state setter function | | style | style Object | Object | | editable | Boolean | true |