Package Health Score

78 / 100

security
No known security issues
popularity
Small
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
1.7.3	\|	10/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.7.2	\|	09/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.6.1	\|	04/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.5.0	\|	03/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.4.1	\|	01/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (3,733)

GitHub Stars: 248
Forks: 33
Contributors: 20

Direct Usage Popularity

The npm package react-native-otp-entry receives a total of 3,733 downloads a week. As such, we scored react-native-otp-entry popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package react-native-otp-entry, we found that it has been starred 248 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the react-native-otp-entry repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-native-otp-entry is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 3
Open PR: 2
Last Release: 16 days ago
Last Commit: 16 days ago

Further analysis of the maintenance status of react-native-otp-entry based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that react-native-otp-entry demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 1 year
Dependencies: 0 Direct
Versions: 27
Install Size: 25.6 kB
Dist-tags: 1
# of Files: 17
Maintainers: 1
TS Typings: No

react-native-otp-entry has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

react-native-otp-entry

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.

Demo

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:

or https://snack.expo.dev/@anday013/demo-react-native-otp-entry

Installation

Install react-native-otp-entry using npm or yarn:

npm install react-native-otp-entry

# or

yarn add react-native-otp-entry

Usage

Import the OtpInput component from react-native-otp-entry:

import { OtpInput } from "react-native-otp-entry";

Render the OtpInput component in your screen/component:
```
 console.log(text)} /&gt;
```

Customize the styling as per your requirements:

 console.log(text)}
  onFilled={(text) =&gt; 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,
  }}
/&gt;

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.
`onFocus`	() => void	A callback function is invoked when the OTP input is focused.
`onBlur`	() => void	A callback function is invoked when the OTP input is blurred.

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.

Theme

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.

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! ☕

react-native-otp-entry development dependencies

@testing-library/jest-native @testing-library/react-native @types/jest @types/react jest prettier ts-jest ts-node typescript

FAQs

What is react-native-otp-entry?

A fully modifiable OTP Input Component for React Native. Visit Snyk Advisor to see a full health score report for react-native-otp-entry, including popularity, security, maintenance & community analysis.

Is react-native-otp-entry popular?

The npm package react-native-otp-entry receives a total of 3,733 weekly downloads. As such, react-native-otp-entry popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-native-otp-entry well maintained?

We found that react-native-otp-entry demonstrated a healthy version release cadence and project activity. It has a community of 20 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is react-native-otp-entry safe to use?

The npm package react-native-otp-entry was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 12 November-2024, at 02:55 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (3,733)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

react-native-otp-entry

Features

Demo

Installation

Usage

Props

Ref

License

Contributing

Support Me

react-native-otp-entry development dependencies

FAQs

What is react-native-otp-entry?

Is react-native-otp-entry popular?

Is react-native-otp-entry well maintained?

Is react-native-otp-entry safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues