React Native Component that can used for OTPs and Pins as secure pin input.
import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import OTPTextInput from 'react-native-otp-textinput'
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 5,
},
title: {
fontSize: 22,
fontWeight: '500',
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
class App extends Component {
state = {
otp: '',
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>OTP Text Input</Text>
<OTPTextInput
inputCount={6}
textInputStyle={{width:40}}
handleTextChange={(text)=>this.setState({otp:text})}
keyboardType="default" //can be "phone-pad", "numeric" e.t.c
/>
</View>
//conolse.log(this.state.otp) which gives 'ddsfga'
);
}
}
Supports both Android and iOS.
The following props are applicable for the component along with props supported by react native text input 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. |
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. |
cellTextLength | 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. |
- Unit Testing