react-native-otp-ui-kit

react-native-otp-ui-kit is a simple and highly customizable React Native component for entering OTP (One-Time Password) on iOS, Android, and Web. It provides an intuitive and user-friendly interface for inputting one-time passwords in your React Native applications.

Features

Easy to Use: Simple and efficient OTP input component.
Highly Customizable: Customize styling and behavior to match your app.
Cross-Platform Support: Works seamlessly with React Native, Expo, and React Native Web.
TypeScript Support: Fully typed for type safety and ease of development.

Demo

ScreenRecording2024-11-10120724-ezgif com-video-to-gif-converter

Installation

Install react-native-otp-ui-kit using npm or yarn:

npm install react-native-otp-ui-kit
# or
yarn add react-native-otp-ui-kit


Usage

import { Button, StyleSheet, View } from 'react-native'
import React, { useRef, useState } from 'react'
import OTPInput from './OTPInput'
import { router } from 'expo-router';

const OTPField = () => {
    const [isOtpIncorrect, setIsOtpIncorrect] = useState<boolean>(false);
    const [code, setCode] = useState<string>('');
    const otpRef = useRef<{ clear: () => void }>(null);

    const onChangeOTP = (e: string) => {
        setCode(e);
    }

    const verifyChallenge = (value: string) => {
        const correctOtp = "123456";
        if(value === correctOtp){
            setIsOtpIncorrect(false);
            // YOUR logic code goes here
            router.navigate('/onboarding')
        } else {
            setIsOtpIncorrect(true);
            otpRef.current?.clear(); // Clear OTP input if incorrect
        }
    }

    const handleAutomaticVerification = (otp: string) => {
            verifyChallenge(otp);
     }

    const handleManualVerification = () => {
        verifyChallenge(code);
      };

  return (
    <View>
      <OTPInput
        ref={otpRef}
        length={6}
        initialPlaceHolder={''}
        onCodeChanged={onChangeOTP}
        onOTPFilled={handleAutomaticVerification}
        containerStyle={styles.container}
        placeholderTextColor="blue"
        pinCodeContainerStyle={styles.otpContainer}
        pinCodeTextStyle={styles.pinCodeText}
        focusedPinCodeContainerStyle={styles.focusContainer}
        filledPinCodeContainerStyle={styles.filledContainer}
        incorrectPinCodeContainerStyle={styles.incorrectPinCodeContainerStyle}
        keyboardType="numeric"
        isOtpIncorrect={isOtpIncorrect}
        highlighterColor="orange"
        hideCursor={true}
        autoFocus={true}
        secureTextEntry={false}
        disabled={false}
      />

        <Button title="Verify OTP" onPress={handleManualVerification} />

    </View>
  )
}

export default OTPField

const styles = StyleSheet.create({
    container: {
        marginTop: 20,
        gap: 2,
        flexDirection: "row",
        justifyContent: 'center'
    },
    otpContainer: {
        width: 50,
        height: 50,
        margin: 5,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 2,
        borderColor: "#434343",
        borderRadius: 15
    },
    pinCodeText: {
        textAlign: 'center',
        fontSize: 15,
        fontWeight: "400",
        color: "#D2D2D2",
    },
    focusContainer: {
        borderColor: "blue",
    },
    filledContainer: {backgroundColor: "#474747"},
    incorrectPinCodeContainerStyle: {
        borderColor: 'red',
        borderWidth: 1,
      },
})

Props

Prop	Type	Description
`length`	`number`	The number of OTP digits.
`initialPlaceHolder`	`'number' or 'string'`	The intial placeholder value.
`keyboardType`	`'numeric' or 'default'`	The keyboard type for input.
`isOtpIncorrect`	`boolean`	Flag to indicate incorrect OTP styling.
`onCodeChanged`	`(otp: string) => void`	Callback when OTP is changed.
`onOTPFilled`	`(otp: string) => void`	Callback when OTP is filled.
`containerStyle`	`ViewStyle`	Style for the OTP container.
`pinCodeContainerStyle`	`ViewStyle`	Style for each OTP input box.
`pinCodeTextStyle`	`TextStyle`	Style for the OTP text.
`placeholderTextColor`	`'ColorValue' or 'string'`	Placeholder color.
`focusedPinCodeContainerStyle`	`ViewStyle`	Style when an OTP box is focused.
`filledPinCodeContainerStyle`	`ViewStyle`	Style when an OTP box has a value.
`incorrectPinCodeContainerStyle`	`ViewStyle`	Style when an OTP is incorrect.
`autoFocus`	`boolean` (default: true)	Automatically focus the input on mount.
`highlighterColor`	`ColorValue`	Color for the input field highlighter.
`secureTextEntry`	`boolean` (default: false	Obscures text for security.
`disabled`	`boolean` (default: false)	Disables the input.
...	Other TextInput props	Pass any other `TextInput` props as needed.

Methods (Ref)

Method	Type	Description
`clear`	`() => void`	Clears the OTP input.
`focus`	`() => void`	Focuses the OTP input.
`setValue`	`(value: string) => void`	Sets the OTP input value.

Contributing

Contributions are welcome! Please feel free to open issues or submit pull requests.

If you find a bug or have any feature requests, please open an issue :)

Support Me

If you find this project useful, consider giving it a star ⭐ and helping it grow! Contribute to making this the ultimate one-stop OTP solution. Your contributions and feedback are highly appreciated!

Package detail