https://github.com/pakenfit/react-native-pin-input
React Native Pin Input made easy🔥
https://github.com/pakenfit/react-native-pin-input
otp otp-verification pin-input react-native textinput
Last synced: 10 months ago
JSON representation
React Native Pin Input made easy🔥
- Host: GitHub
- URL: https://github.com/pakenfit/react-native-pin-input
- Owner: pakenfit
- License: mit
- Created: 2023-04-08T11:31:55.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-14T17:54:18.000Z (about 1 year ago)
- Last Synced: 2025-07-17T11:45:16.155Z (11 months ago)
- Topics: otp, otp-verification, pin-input, react-native, textinput
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@pakenfit/react-native-pin-input
- Size: 22 MB
- Stars: 4
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @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.](https://docs.expo.dev/bare/installing-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
### `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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)