npmpackage.info

Gathering detailed insights and metrics for react-native-otp-textinput

Other packages similar to react-native-otp-textinput

react-native-otp-entry

1.7.3

A fully modifiable OTP Input Component for React Native

deprecated-react-native-prop-types

5.0.0

Deprecated prop-types from React Native.

@twotalltotems/react-native-otp-input

1.3.11

is a tiny JS library for one time passcode (OTP). Supports smart input suggestion on iOS and code autofill on Android (it will be filled when you press the copy button on the SMS notification bar)

react-native-picker-select

9.3.1

A Picker component for React Native which emulates the native <select> interfaces for each platform

Gathering detailed insights and metrics for react-native-otp-textinput

react-native-otp-textinput

Text View usable for OTP / Pin implementation

1.1.6

152

MIT

TypeScript

880,411 2

Installations

npm install react-native-otp-textinput

Pull Requests

Open

10

Total

28

Closed

8

Merged

10

Issues

Open

15

Total

38

Closed

23

Releases

Peer version fix

v1.1.6

Published on 04 Jun 2024

Remove console.log

v1.1.5

Published on 14 Jan 2024

Prettier fix, Cursor Color

v1.1.4

Published on 13 Jan 2024

React Dependency fix

v1.1.3

Published on 11 Sept 2023

React, React Native Dependency Version Update

v1.1.2

Published on 11 Sept 2023

Add handleCellTextChange callback, Copy paste example

v1.1.1

Published on 30 Jul 2023

View all 11 releases

Developer

naveenvignesh5

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.11.0

NPM Version

10.3.0 Statistics

152 Stars

68 Commits

60 Forks

2 Watching

10 Branches

7 Contributors

Updated on 27 Oct 2024

Languages

TypeScript (58.55%)

Java (22.54%)

Ruby (7.36%)

Objective-C (7.25%)

Objective-C++ (2.36%)

JavaScript (1.93%)

Total Downloads

Cumulative downloads

Total Downloads

880,411

Last day

-1%

2,407

Compared to previous day

Last week

15.8%

14,610

Compared to previous week

Last month

-2%

55,187

Compared to previous month

Last year

110.6%

501,610

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-native

Dev Dependencies

react react-native @types/react typescript

Versions

REACT NATIVE OTP TEXT INPUT

React Native Component that can used for OTPs and Pins as secure pin input.

npm downloads

Installation

npm i -S react-native-otp-textinput

Demo

How to Use

Check the Example react native app for usage.

Platform Support

Supports both Android and iOS.

Props

The following props are applicable for the component along with props supported by react native TextInput component

Prop	Type	Optional	Default	Description
defaultValue	string	Yes	''	Default Value that can be set based on OTP / Pin received from parent container.
handleTextChange	func	No	n/a	callback with concated string of all cells as argument.
handleCellTextChange	func	Yes	n/a	callback for text change in individual cell with cell text and cell index as arguments
inputCount	number	Yes	4	Number of Text Input Cells to be present.
tintColor	string	Yes	#3CB371	Color for Cell Border on being focused.
offTintColor	string	Yes	#DCDCDC	Color for Cell Border Border not focused.
inputCellLength	number	Yes	1	Number of character that can be entered inside a single cell.
containerStyle	object	Yes	{}	style for overall container.
textInputStyle	object	Yes	{}	style for text input.
testIDPrefix	string	Yes	'otpinput'	testID prefix, the result will be `otp_input_0` until inputCount
autoFocus	bool	Yes	false	Input should automatically get focus when the components loads

Helper Functions

Clearing and Setting values to component

1// using traditional ref
2clearText = () => {
3    this.otpInput.clear();
4}
5
6setText = () => {
7    this.otpInput.setValue("1234");
8}
9
10render() {
11    return (
12        <View>
13            <OTPTextInput ref={e => (this.otpInput = e)} >
14            <Button title="clear" onClick={this.clearText}>
15        </View>
16    );
17}

1// hooks
2import React, { useRef } from 'react';
3
4const ParentComponent = () => {
5    let otpInput = useRef(null);
6
7    const clearText = () => {
8        otpInput.current.clear();
9    }
10
11    const setText = () => {
12        otpInput.current.setValue("1234");
13    }
14
15    return (
16        <View>
17            <OTPTextInput ref={e => (otpInput = e)} >
18            <Button title="clear" onClick={clearText}>
19        </View>
20    );
21}

If you like the project

If you think I have helped you, feel free to get me coffee. 😊

No vulnerabilities found.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More