react-native-verify-otp-inputs/README.md

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

# 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
![](https://raw.githubusercontent.com/dev-richardnguyen/react-native-verify-otp-inputs/main/variant-default.gif)
![](https://raw.githubusercontent.com/dev-richardnguyen/react-native-verify-otp-inputs/main/variant-security.gif)
![](https://raw.githubusercontent.com/dev-richardnguyen/react-native-verify-otp-inputs/main/variant-underlined.gif)


## Installation

```sh
yarn add react-native-verify-otp-inputs
```

## Usage

```js
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

---