@daoduythanh/react-native-otpinput NPM

React Native Otp Input

A cross-platform and simple Otp Input component for React Native.

Handle Input suggestion on IOS (requires React Native 0.58+ and iOS 12 or above)
Auto fill when copy code on Android.
Fully-typed with Typescript

Installation

$ npm install -S react-native-otpinput

$ yarn add react-native-otpinput

Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import { OtpInput } from 'react-native-otpinput';

const App: React.FC<{}> = () => {
  const [code, setCode] = useState('');

  return (
    <View>
      <OtpInput code={code} onCodeChanged={setCode} pinCount={4} />
    </View>
  );
};

Props

Name	Type	Default	Description
autoFocusOnLoad	boolean	false	auto focus the 1st input and show keyboard on load
code	string	REQUIRED	the value of the input
digitInputHighlightStyle	object	null	the style of focused input
digitInputStyle	object	null	the style of all inputs
onCodeChanged	function	REQUIRED	called when the code is changed
onCodeFilled	function	null	called when the last digit is filled
pinCount	number	REQUIRED	the number of digit in OTP code
secureTextEntry	boolean	false	if true, the text input obscures the text entered so that sensitive text like passwords stay secure
style	object	null	custom container style

Acknowledgement

This library is created based on @twotalltotems/react-native-otp-input

react react-native native otp

@use-it/interval

@everything-registry/sub-chunk-217 @infinitebrahmanuniverse/nolb-_dao @zalastax/nolb-_dao

1.0.0

4 years ago