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:

1npm install react-native-otp-ui-kit
2# or
3yarn add react-native-otp-ui-kit
4
5
6Usage
7
8import { Button, StyleSheet, View } from 'react-native'
9import React, { useRef, useState } from 'react'
10import OTPInput from './OTPInput'
11import { router } from 'expo-router';
12
13const OTPField = () => {
14    const [isOtpIncorrect, setIsOtpIncorrect] = useState<boolean>(false);
15    const [code, setCode] = useState<string>('');
16    const otpRef = useRef<{ clear: () => void }>(null);
17
18    const onChangeOTP = (e: string) => {
19        setCode(e);
20    }
21
22    const verifyChallenge = (value: string) => {
23        const correctOtp = "123456";
24        if(value === correctOtp){
25            setIsOtpIncorrect(false);
26            // YOUR logic code goes here
27            router.navigate('/onboarding')
28        } else {
29            setIsOtpIncorrect(true);
30            otpRef.current?.clear(); // Clear OTP input if incorrect
31        }
32    }
33
34    const handleAutomaticVerification = (otp: string) => {
35            verifyChallenge(otp);
36     }
37
38    const handleManualVerification = () => {
39        verifyChallenge(code);
40      };
41
42  return (
43    <View>
44      <OTPInput
45        ref={otpRef}
46        length={6}
47        initialPlaceHolder={''}
48        onCodeChanged={onChangeOTP}
49        onOTPFilled={handleAutomaticVerification}
50        containerStyle={styles.container}
51        placeholderTextColor="blue"
52        pinCodeContainerStyle={styles.otpContainer}
53        pinCodeTextStyle={styles.pinCodeText}
54        focusedPinCodeContainerStyle={styles.focusContainer}
55        filledPinCodeContainerStyle={styles.filledContainer}
56        incorrectPinCodeContainerStyle={styles.incorrectPinCodeContainerStyle}
57        keyboardType="numeric"
58        isOtpIncorrect={isOtpIncorrect}
59        highlighterColor="orange"
60        hideCursor={true}
61        autoFocus={true}
62        secureTextEntry={false}
63        disabled={false}
64      />
65
66        <Button title="Verify OTP" onPress={handleManualVerification} />
67
68    </View>
69  )
70}
71
72export default OTPField
73
74const styles = StyleSheet.create({
75    container: {
76        marginTop: 20,
77        gap: 2,
78        flexDirection: "row",
79        justifyContent: 'center'
80    },
81    otpContainer: {
82        width: 50,
83        height: 50,
84        margin: 5,
85        justifyContent: 'center',
86        alignItems: 'center',
87        borderWidth: 2,
88        borderColor: "#434343",
89        borderRadius: 15
90    },
91    pinCodeText: {
92        textAlign: 'center',
93        fontSize: 15,
94        fontWeight: "400",
95        color: "#D2D2D2",
96    },
97    focusContainer: {
98        borderColor: "blue",
99    },
100    filledContainer: {backgroundColor: "#474747"},
101    incorrectPinCodeContainerStyle: {
102        borderColor: 'red',
103        borderWidth: 1,
104      },
105})

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!