Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anday013/react-native-otp-entry
Simple and fully modifiable OTP Input Component for React Native
https://github.com/anday013/react-native-otp-entry
android confirmation-code expo ios one-time-code otp otp-input react-native react-native-app react-native-component react-native-input react-native-otp react-native-otp-input react-native-otp-text-input react-native-otp-verify react-native-web sms-code verification-code
Last synced: about 3 hours ago
JSON representation
Simple and fully modifiable OTP Input Component for React Native
- Host: GitHub
- URL: https://github.com/anday013/react-native-otp-entry
- Owner: anday013
- License: mit
- Created: 2023-06-12T07:40:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-22T19:16:59.000Z (2 days ago)
- Last Synced: 2024-09-23T15:02:44.670Z (1 day ago)
- Topics: android, confirmation-code, expo, ios, one-time-code, otp, otp-input, react-native, react-native-app, react-native-component, react-native-input, react-native-otp, react-native-otp-input, react-native-otp-text-input, react-native-otp-verify, react-native-web, sms-code, verification-code
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-otp-entry
- Size: 643 KB
- Stars: 221
- Watchers: 1
- Forks: 32
- Open Issues: 6
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# react-native-otp-entry
[](https://badge.fury.io/js/react-native-otp-entry)
[]()
[](https://packagephobia.com/result?p=react-native-otp-entry)
[](https://github.com/anday013/react-native-otp-entry/actions)
[](https://github.com/your-username/react-native-otp-entry/blob/main/LICENSE)
`react-native-otp-entry` is a simple and highly customizable React Native component for entering OTP (One-Time Password) on iOS, Android, and Web. It provides an intuitive and user-friendly interface for inputting one-time passwords in your React Native applications.
## Features
- Simple and easy-to-use OTP input component.
- Highly customizable appearance and styling.
- Supports autofill
- Effortlessly integrates with **React Native**, **Expo**, and **React Native Web** platforms.
- Fully typed with TypeScript.
- Fully covered with unit tests.
- Paste functionality.
## Demo
Try out React Native OTP Entry in action on Snack Expo:
[](https://snack.expo.dev/@anday013/demo-react-native-otp-entry)
or https://snack.expo.dev/@anday013/demo-react-native-otp-entry
## Installation
Install `react-native-otp-entry` using npm or yarn:
```bash
npm install react-native-otp-entry
# or
yarn add react-native-otp-entry
```
## Usage
1. Import the `OtpInput` component from `react-native-otp-entry`:
```javascript
import { OtpInput } from "react-native-otp-entry";
```
2. Render the `OtpInput` component in your screen/component:
```jsx
console.log(text)} />
```
3. Customize the styling as per your requirements:
```javascript
console.log(text)}
onFilled={(text) => console.log(`OTP is ${text}`)}
textInputProps={{
accessibilityLabel: "One-Time Password",
}}
theme={{
containerStyle: styles.container,
pinCodeContainerStyle: styles.pinCodeContainer,
pinCodeTextStyle: styles.pinCodeText,
focusStickStyle: styles.focusStick,
focusedPinCodeContainerStyle: styles.activePinCodeContainer,
}}
/>
```
## Props
The `react-native-otp-entry` component accepts the following props:
| Prop | Type | Description |
| ---------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `numberOfDigits` | number | The number of digits to be displayed in the OTP entry. |
| `textInputProps` | TextInputProps | Extra props passed to underlying hidden TextInput (see: https://reactnative.dev/docs/textinput) |
| `autoFocus` | boolean | _Default: true_. Sets autofocus. |
| `focusColor` | ColorValue | The color of the input field border and stick when it is focused. |
| `onTextChange` | (text: string) => void | A callback function is invoked when the OTP text changes. It receives the updated text as an argument. |
| `onFilled` | (text: string) => void | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |
| `blurOnFilled` | boolean | _Default: false_. Blurs (unfocuses) the input when the OTP input is fully filled. |
| `hideStick` | boolean | _Default: false_. Hides cursor of the focused input. |
| `theme` | Theme | Custom styles for each element. |
| `focusStickBlinkingDuration` | number | The duration (in milliseconds) for the focus stick to blink. |
| `disabled` | boolean | _Default: false_. Disables the input |
| `type` | 'alpha' \| 'numeric' \| 'alphanumeric' | The type of input. 'alpha': letters only, 'numeric': numbers only, 'alphanumeric': letters or numbers. |
| `secureTextEntry` | boolean | _Default: false_. Obscures the text entered so that sensitive text like PIN stay secure. |
| Theme | Type | Description |
| ------------------------------- | --------- | ---------------------------------------------------------------------------------- |
| `containerStyle` | ViewStyle | Custom styles for the root `View`. |
| `pinCodeContainerStyle` | ViewStyle | Custom styles for the container that wraps each individual digit in the OTP entry. |
| `pinCodeTextStyle` | TextStyle | Custom styles for the text within each individual digit in the OTP entry. |
| `focusStickStyle` | ViewStyle | Custom styles for the focus stick, which indicates the focused input field. |
| `focusedPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is focused. |
| `filledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it has a value. |
| `disabledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is disabled. |
**Note:** The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.
**Tip:** If you have difficulties while applying `gap` or in any other style property to set a suitable space between the OTP input containers, please set the `width` in `containerStyle` to `'auto'` or `undefined`, as it is been set to `'100%'` by default.
## Ref
The `react-native-otp-entry` component exposes these functions with `ref`:
| Prop | Type | Description |
| ---------- | ------------------------ | ---------------------------------- |
| `clear` | () => void; | Clears the value of the OTP input. |
| `focus` | () => void; | Focus of the OTP input. |
| `setValue` | (value: string) => void; | Sets the value of the OTP input. |
## License
This project is licensed under the [MIT License](https://github.com/your-username/react-native-otp-entry/blob/main/LICENSE).
## Contributing
Contributions are welcome! Please feel free to open issues or submit pull requests.
If you find a bug or have any feature requests, please open an issue :)
## Support Me
If you find this project helpful and want to support my work, consider buying me a coffee! ☕
[](https://www.buymeacoffee.com/anday013)