react-native-verify-otp-inputs

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

yarn add react-native-verify-otp-inputs

Usage

import { OTPInput } from 'react-native-verify-otp-inputs';

// ...

export default function App() {
  const [otp, setOtp] = React.useState('');
  return (
    <View style={styles.container}>
      <OTPInput
        onSubmit={(otp: string) => {
          setOtp(otp);
        }}
        pinCount={6}
        boxSelectedStyle={styles.boxSelectedStyle}
        boxStyle={styles.boxStyle}
        digitStyle={styles.digitStyle}
        autoSubmit={false}
      />

      <TouchableOpacity
        style={styles.btn}
        disabled={otp.length < 6}
        onPress={() => {
          Alert.alert('Done!', otp);
        }}
      >
        <Text style={{ color: 'white' }}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  boxSelectedStyle: {
    backgroundColor: 'red',
  },
  boxStyle: {
    borderRadius: 8,
  },
  digitStyle: {
    color: 'gray',
  },
});

Parameters

License

MIT