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

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!