@pakenfit/react-native-pin-input
v1.4.0
Published
Phone Pin Input for React Native
Downloads
592
Readme
@pakenfit/react-native-pin-input
Phone Pin Input for React Native.
Installation
npm install @pakenfit/react-native-pin-input --save
yarn add @pakenfit/react-native-pin-input
Dependencies
This library needs these dependencies to be installed in your project before you can use it:
npm install expo-clipboard --save
yarn add expo-clipboard
Using Bare React Native ?
For expo-clipboard
to work you need to follow these additional steps to install expo modules.
Features
- Fully customizable
- OTP autofill support (both
Android
andiOS
, not tested onweb
should work as well) - Compatible with Expo
- Written in Typescript
Usage
import { Button, StyleSheet, View } from 'react-native';
import { PinInput, PinInputRef } from '@pakenfit/react-native-pin-input';
export default function App() {
const ref = React.useRef<PinInputRef>(null);
return (
<View style={styles.container}>
<PinInput onFillEnded={(otp) => console.log(otp)} autoFocus ref={ref} />
<Button title="Clear all" onPress={() => ref.current?.clear()} />
</View>
);
}
Props
length
The number of pin inputs to display. Default: 4
.
onFillEnded = (opt: string) => void
The callback function with the final OTP when finish filling the inputs.
inputProps
The props for each TextInput.
inputStyle
The style applied to each TextInput
.
containerProps
The props for the View
container.
containerStyle
The style applied to the View
container.
autoFocus
Should autoFocus the first input
element.
API
The PinInput component provides the following methods through the PinInputRef:
clear()
: clear all the pin inputs
Types
PinInputRef
The PinInputRef
type represents the reference to the PinInput component, allowing access to its methods. It has the only method: clear()
see above.
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