Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-otp-ui-kit

Sumeeth-24860MIT1.0.4

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 ap

react-native, react native, react-native-app, react-native-component, react-native-input, react-native-otp, react-native-otp-ui-kit, rn, sumeeth, sumeeth24, otp, react, otp, input, rn, otp, otp-ui-kit

readme

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!