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:

``

bash

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(false);

    const [code, setCode] = useState('');

    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 (

    

              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}

      />

react-native-otp-ui-kit

Features

Demo

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

Installation

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

``

bash

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(false);

    const [code, setCode] = useState('');

    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 (

    

              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}

      />

react-native-otp-ui-kit

react-native-otp-ui-kit

Features

Demo

Installation

or

Props

Methods (Ref)

Contributing

Support Me

react-native-otp-ui-kit

react-native-otp-ui-kit

Features

Demo

Installation

or

Props

Methods (Ref)

Contributing

Support Me