React Native OTP

@mustapha-ghlissi/react-native-otp: One Time Password Input Component for React Native.

Screenshots

Demo

Installation

Use npm or yarn to install the package.

Using npm

npm i @mustapha-ghlissi/react-native-otp

Using yarn

yarn add @mustapha-ghlissi/react-native-otp

Usage

    import Otp from '@mustapha-ghlissi/react-native-otp';

    <Otp onConfirm={code => console.log(code)}/>

Props

Parameter	Type	Description
length	number: optional	Number of OTP digits (default = 4)
filledOtpColor	string: optional	Border color when the OTP is fully filled and it's used as the shadow color if enabledFillShadow is set to true
enabledFillShadow	boolean: optional	Show success shadow when the OTP is fully filled
cursorColor	string: optional	InputText cursor color
selectionColor	string: optional	InputText content selection color
filledColor	string: optional	InputText border color when it's filled
outlineColor	string: optional	InputText border color when it's focused
inputStyle	TextStyle, ViewStyle Props: optional	InputText custom style
onConfirm	callback: required	When the OTP is filled, then you can do whatever you need with the entered code.

Donate

Please contribute or donate so we can spend more time on this library.

Donate with Wise by clicking this link or by scanning the QRCode

Authors

• @mustapha-ghlissi

Other libraries

• react-native-accordion: Reanimated collapsible sections for React Native.
• react-native-select-picker: Reanimated dropdown select for React Native.