@quanle94/react-native-otp-inputs
TypeScript icon, indicating that this package has built-in type declarations

4.0.0-alpha.1.1 • Public • Published

react-native-otp-inputs

CircleCI

codecov

npm npm

Demo

Demo

Description

react-native-otp-inputs is fully customizable, pure JavaScript package, that provides solution for One-time password feature with user friendly events like moving to previous input with backspace or going to next when filled in. It supports pasting and otp code into inputs

Installation

React-Native version installation
>= 0.53.0 < 0.57.0 yarn add react-native-otp-inputs@1.1.0
<= 0.57.0 yarn add react-native-otp-inputs@3.2.2
<= 0.59.0 yarn add react-native-otp-inputs

Migration to v4

Basic usage

import React, { Component } from 'react';
import { View } from 'react-native';
import OtpInputs from 'react-native-otp-inputs';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <OtpInputs handleChange={code => console.log(code)} numberOfInputs={6} />
      </View>
    );
  }
}

API

Method Type Required Default Description
autoCapitalize string false 'none'
clearTextOnFocus boolean false false
handleChange function true console.log Returns otp code.
keyboardType string true 'phone-pad'
numberOfInputs number true (1..6) 4 Inputs count to render.
secureTextEntry boolean false false
selectTextOnFocus boolean false true iOS Only
testIDPrefix string false otpInput-${inputIndex} Prefix for testID.
isRTL boolean false false Preferably I18nManager.isRTL.
placeholder string false none Placeholder for the input boxes.
styles style (object) false default Applied to whole container.
focusStyles style (object) false default Applied to the input on focus.
inputStyles style(object) false default Applied to single input.
inputContainerStyles style (object) false default Applied to each input container.
...restTextInputProps TextInput

Methods

Those can be called on ref:

Method Description
reset Reset inputs and returns to handleChange method empty string

Example

import React, { Component } from 'react';
import { Button, View } from 'react-native';
import OtpInputs from 'react-native-otp-inputs';

export default class App extends Component {
  otpRef = React.createRef();

  resetOTP = () => {
    this.otpRef.current.reset();
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Reset" onPress={this.resetOTP} />
        <OtpInputs ref={this.otpRef} handleChange={code => console.log(code)} numberOfInputs={6} />
      </View>
    );
  }
}

Contributors

Great thanks to : @kantorm.

Package Sidebar

Install

npm i @quanle94/react-native-otp-inputs

Weekly Downloads

3

Version

4.0.0-alpha.1.1

License

MIT

Unpacked Size

50.3 kB

Total Files

20

Last publish

Collaborators

  • quanle94