npmpackage.info

Gathering detailed insights and metrics for react-native-otp-ui-kit

Other packages similar to react-native-otp-ui-kit

react-native-design-kit

1.1.10

All in one react native material design

react-native-otp-ui-kit

1.0.4

TypeScript

208.00 B

1,143

Installations

npm install react-native-otp-ui-kit

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

20.13.1

NPM Version

10.5.2 Score

36.1

Supply Chain

50.5

Quality

76.9

Maintenance

100

Vulnerability

93.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

Kotlin

JavaScript

TypeScript (61.63%)

Kotlin (26.07%)

JavaScript (12.31%)

Developer

Sumeeth-24

Download Statistics

Total Downloads

1,143

Last Day

Last Week

178

Last Month

740

Last Year

1,143

GitHub Statistics

16 Commits

1 Watching

1 Branches

1 Contributors

Bundle Size

282.00 B

Minified

208.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.0.4

Package Id

react-native-otp-ui-kit@1.0.4

Unpacked Size

14.92 kB

Size

4.93 kB

File Count

NPM Version

10.5.2

Node Version

20.13.1

Publised On

03 Jan 2025

Total Downloads

Cumulative downloads

Total Downloads

1,143

Last day

160%

Compared to previous day

Last week

23.6%

178

Compared to previous week

Last month

813.6%

740

Compared to previous month

Last year

1,143

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-native

Versions

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:

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!

No vulnerabilities found.

No security vulnerabilities found.