custom-react-native-otp-input

A simple and light reusable react native component to accept otp input. It is fully customizable, and written purely in Typescript.

Installation

Supported React Native version: >=0.59.0

npm install custom-react-native-otp-input

Or

yarn add custom-react-native-otp-input

After installation, navigate to the ios folder and run

pod install

Basice Usage

import React,{useState} from 'react';
import { SafeAreaView, StyleSheet, Text } from 'react-native'
import OtpInput from 'custom-react-native-otp-input'

const App = () => {
  const [otp, setOtp] = useState<string>('')
  
  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <Text>
        Other Components.....
      </Text>
      <OtpInput
        value={(val) => setOtp(val)}
        numberOfDigits={4}
        inputShape={'box'}
        secureEntry
      />
    </SafeAreaView>
  );
}

export default App;

const styles = StyleSheet.create({
  safeAreaContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
    width: '100%',
  }
})

API Reference

Property	Type	Required	Description	Default
value	callback	yes	returns the value as the user types	void
numberOfDigits	number	no	The number of input fields (currently takes between 4 and 8)	6
inputShape	string	no	A string to describe desired shape of the input field	circle
secureEntry	boolean	no	Decide whether to show input or hide	false
includeAlphabets	boolean	no	Decide wether to accept letters as input	false
style	object	no	Add custom style to the component rapper	{}
itemStyle	object	no	Add cutom style the input rapper	{}