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

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