react-native-input-for-otp

react-native-input-for-otp

A Light weight simple and flexible react native opt input

experimental needs to be improved.

Installation

# npm 
npm install react-native-input-for-otp

# yarn 

yarn add  install react-native-input-for-otp

Usage

import * as React from 'react';

import { StyleSheet, View } from 'react-native';
import OTPInput from 'react-native-input-for-otp';

export default function App() {
  const [code, setCode] = React.useState < string > '';
  const [isOTPReady, setOTPReady] = React.useState(false);

  React.useEffect(() => {
    if (isOTPReady) {
      console.log('OPT completely entered');
    }
  }, [isOTPReady]);

  return (
    <View style={styles.container}>
      <OTPInput
        code={code}
        maxInputLenght={4}
        onOtpReady={callback}
        onSetCode={setCode}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Props

Props	Type	Required	Description
maxInputLenght	number	true
onOtpReady	function	true	a Hexa-decimal color e.g (#0000)
code	string	true	otp code state
onSetCode	function	true	function to update opt code state
boxFocusedStyle	style object	false	custom box focused style
boxStyle	style object	false	box style
boxTextStyle	style object	false	box text style

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library