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

Demo

Installation

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

Usage

1import { OTPInput } from 'react-native-verify-otp-inputs';
2
3// ...
4
5export default function App() {
6  const [otp, setOtp] = React.useState('');
7  return (
8    <View style={styles.container}>
9      <OTPInput
10        onSubmit={(otp: string) => {
11          setOtp(otp);
12        }}
13        pinCount={6}
14        boxSelectedStyle={styles.boxSelectedStyle}
15        boxStyle={styles.boxStyle}
16        digitStyle={styles.digitStyle}
17        autoSubmit={false}
18      />
19
20      <TouchableOpacity
21        style={styles.btn}
22        disabled={otp.length < 6}
23        onPress={() => {
24          Alert.alert('Done!', otp);
25        }}
26      >
27        <Text style={{ color: 'white' }}>Submit</Text>
28      </TouchableOpacity>
29    </View>
30  );
31}
32
33const styles = StyleSheet.create({
34  container: {
35    flex: 1,
36    alignItems: 'center',
37    justifyContent: 'center',
38  },
39  boxSelectedStyle: {
40    backgroundColor: 'red',
41  },
42  boxStyle: {
43    borderRadius: 8,
44  },
45  digitStyle: {
46    color: 'gray',
47  },
48});
49

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
autoSubmit	NO	Enable auto submit when entering full otp. Default is false

License

MIT

---