@pakenfit/react-native-pin-input

Phone Pin Input for React Native.

Installation

``sh
npm install @pakenfit/react-native-pin-input --save
`

Or

`sh
yarn add @pakenfit/react-native-pin-input
`

#### Dependencies
This library needs these dependencies to be installed in your project before you can use it:

`sh
npm install expo-clipboard --save
`


Or

`sh
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 and iOS, not tested on web should work as well)
- Compatible with Expo
- Written in Typescript

---

Usage

`js
import { Button, StyleSheet, View } from 'react-native';
import { PinInput, PinInputRef } from '@pakenfit/react-native-pin-input';

export default function App() {
const ref = React.useRef(null);

return (

console.log(otp)} autoFocus ref={ref} />
ref.current?.clear()} />

);
}
`
---

Props

$3

The number of pin inputs to display. Default: 4.

---

$3

The callback function with the final OTP when finish filling the inputs.

$3

The props for each TextInput.

---

$3

The style applied to each TextInput.

---

$3

The props for the View container.

---

$3

The style applied to the View container.

---

$3

Should autoFocus the first input element.

API

The PinInput component provides the following methods through the PinInputRef:

- clear(): clear all the pin inputs

Types

$3


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