react-native-verify-otp-inputs

react-native-verify-otp is a tiny Javascript library which provides an elegant UI for the end user to input OTP

Installation

1yarn add react-native-verify-otp-inputs

Usage

1import { OTPInput } from 'react-native-verify-otp-inputs';
2
3// ...
4
5import * as React from 'react';
6
7import { StyleSheet, View, Alert } from 'react-native';
8import { OTPInput } from 'react-native-verify-otp-inputs';
9
10export default function App() {
11  return (
12    <View style={styles.container}>
13      <OTPInput
14        onSubmit={(otp: string) => {
15          Alert.alert('Done!', otp);
16        }}
17        pinCount={6}
18        boxSelectedStyle={styles.boxSelectedStyle}
19        boxStyle={styles.boxStyle}
20        digitStyle={styles.digitStyle}
21        variant="underlined"
22      />
23    </View>
24  );
25}
26
27const styles = StyleSheet.create({
28  container: {
29    flex: 1,
30    alignItems: 'center',
31    justifyContent: 'center',
32  },
33  boxSelectedStyle: {
34    backgroundColor: 'red',
35  },
36  boxStyle: {
37    borderRadius: 8,
38  },
39  digitStyle: {
40    color: 'gray',
41  },
42});
43

Parameters

Parameter	required	Description
onSubmit	YES	Callback when input digits are done
pinCount	NO	Number of digits in the component (default is 6)
boxSelectedStyle	NO	The style of the input field which is focused
boxStyle	NO	The style of the input field which is NOT focused
digitStyle	NO	The style of the digit
boxContainerStyle	NO	The style of container

License

MIT

---