How to create enter passcode authentication in react native? - authentication

Question

I am new to React Native development. I want to create an enter passcode authentication page. I have no idea, how to create this page.
Please give me some sample
thankyou in advance.
I want one like this: Passcode authentication

Answer 1

here is my way for passCode:
just use you images and paths according to your project
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image
} from 'react-native';
import H1 from '../../Common/Inheritance/h1';
import { config } from '../../../theme/config';
import { Actions } from 'react-native-router-flux';
class EnterPassCode extends Component {
constructor(props) {
super(props);
this.state = {
passCode: ''
};
this.onBack = this.onBack.bind(this);
}
onBack() {
Actions.EnterTouchId();
}
onChangePassCode() {}
render() {
return (
<View style={styles.pad}>
<TouchableOpacity style={styles.backButton} onPress={this.onBack}>
<Image source={require('../../../assets/img/back_arrow_black.png')} />
</TouchableOpacity>
<View style={styles.title}>
<H1>Create a passcode</H1>
</View>
<View style={styles.codeWrapper}>
<View style={styles.passcodeEnter}>
<TextInput
secureTextEntry={true}
style={styles.textBox}
keyboardType='numeric'
maxLength={4}
autoFocus={true}
onChange={this.onChangePassCode.bind(this)}
onChangeText={passCode => this.setState({ passCode })}
/>
</View>
<View style={styles.circleBlock}>
<View
style={[
styles.circle,
this.state.passCode.length >= 1 && styles.circleFill
]}
></View>
<View
style={[
styles.circle,
this.state.passCode.length >= 2 && styles.circleFill
]}
></View>
<View
style={[
styles.circle,
this.state.passCode.length >= 3 && styles.circleFill
]}
></View>
<View
style={[
styles.circle,
this.state.passCode.length >= 4 && styles.circleFill
]}
></View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
pad: {
paddingTop: 75,
margin: 5
},
backButton: {
display: 'flex',
left: 10,
top: 30,
position: 'absolute',
zIndex: 9999,
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center'
},
title: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 90,
paddingTop: 40
},
codeWrapper: {
position: 'relative'
},
passcodeEnter: {
height: '100%',
opacity: 0,
position: 'absolute',
width: '100%',
zIndex: 9
},
textBox: {
fontSize: 30,
letterSpacing: 15,
textAlign: 'center'
},
circleBlock: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center'
},
circle: {
borderRadius: 30,
borderWidth: 3,
borderColor: config.primaryColor,
height: 25,
marginLeft: 23,
marginRight: 23,
width: 25
},
circleFill: {
backgroundColor: config.primaryColor,
borderRadius: 30,
borderWidth: 3,
borderColor: config.primaryColor,
height: 25,
marginLeft: 23,
marginRight: 23,
width: 25
}
});
export default EnterPassCode;