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 | {} |