@skara-live/react-native-otp NPM

react-native-otp

A React Native Otp input component.

Installation

npm install react-native-otp

Usage

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import OTPInput from 'react-native-otp';

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

  return (
    <View style={styles.container}>
      <OTPInput length={6} value={code} onChange={(value) => setCode(value)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

Props

Name	Required	Type	Description
length	true	`number`	The number of input fields
value	true	`string[]`	The value from the inputs
onChange	true	`(value:string[]) => void`	Call function to run on input change
disabled	optional	`boolean`	Toggle between editable state of the input
inputStyle	optional	`ViewStyle`	The style object for the inputs
containerStyle	optional	`ViewStyle`	The style object for the container

Contributing

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

License

MIT

react-native ios android

@everything-registry/sub-chunk-840

0.1.1

9 months ago

0.1.0

9 months ago