Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React , { Component } from 'react';
- import { View, TextInput, Alert, TouchableOpacity, Text, Keyboard} from 'react-native';
- import CustomTextInput from './CustomTextInput';
- class otpandcvv extends Component {
- state = { inputValue: [] };
- constructor(props) {
- super(props);
- this.maxCharLength = 6;
- this.inputDict = {};
- }
- changeFocusToNext(id) {
- if (id + 1 !== this.maxCharLength) {
- this.refs[id + 1].focus();
- }
- }
- changeFocusToPrevious(id) {
- if (id === 0) {
- this.refs[0].focus();
- } else {
- this.refs[id - 1].focus();
- }
- }
- onChange(text, j) {
- let newText = '';
- let numbers = '0123456789';
- for (let i = 0; i < text.length; i++) {
- if(numbers.indexOf(text[i]) > -1) {
- newText = newText + text[i];
- }
- }
- this.inputDict[j] = newText;
- if (text.trim().replace(/\s+/g, ''.length !== 0)) {
- this.changeFocusToNext(j);
- } else {
- this.changeFocusToPrevious(j);
- }
- }
- onButtonPress() {
- if (Object.keys(this.inputDict).length !== this.maxCharLength) {
- Alert.alert('Enter all field');
- return;
- }
- let enteredText = '';
- for (let i = 0; i < Object.keys(this.inputDict).length; i++) {
- if (this.inputDict[i] !== '') {
- enteredText = enteredText + this.inputDict[i];
- } else {
- Alert.alert('Enter All Field Correctly')
- return;
- }
- }
- Alert.alert('You have entered ' + enteredText);
- }
- onHiddenTextChange(text) {
- this.setState({
- inputValue: text
- })
- }
- render() {
- let customTextInput = [];
- for (let i = 0; i < this.maxCharLength; i++) {
- customTextInput.push(
- <TextInput
- ref={i}
- key={i}
- style={styles.textInputStyle}
- maxLength={1}
- underlineColorAndroid='transparent'
- keyboardType='numeric'
- returnKeyType='next'
- placeholder='.'
- value={this.state.inputValue[i]}
- onFocus={Keyboard.dismiss}
- onKeyPress={(keyPress) => console.log(keyPress)}
- onChangeText={text => this.onChange(text, i)}
- />
- );
- }
- return (
- <View style={{ flex: 1}}>
- <TextInput
- style={styles.hiddenTextInput}
- maxLength={this.maxCharLength}
- keyboardType='numeric'
- autoFocus={true}
- onChangeText={text => this.onHiddenTextChange(text)}
- />
- <View style={styles.containerStyles}>
- <View style={{flexDirection: 'row', paddingLeft: 15, paddingRight: 15}}>
- {customTextInput}
- </View>
- </View>
- <TouchableOpacity
- style={{width: 196, height: 48, marginTop: 10, alignSelf: 'center'}}
- onPress={this.onButtonPress.bind(this)}>
- <View style={{ alignSelf: 'center' }}>
- <Text>Click Here</Text>
- </View>
- </TouchableOpacity>
- </View>
- );
- }
- }
- const styles = {
- containerStyles: {
- width: 196,
- height: 48,
- marginTop: 2,
- borderRadius: 4,
- alignSelf: 'center',
- backgroundColor: '#eff1f4'
- },
- hiddenTextInput: {
- opacity: 0.1,
- height: 48,
- width: 80,
- marginTop: 100,
- alignSelf: 'center'
- },
- textInputStyle: {
- width: 28,
- height: 32,
- fontSize: 24,
- marginTop: 8,
- marginBottom: 8,
- paddingTop: 0,
- paddingBottom: 0,
- }
- }
- export default otpandcvv;
Add Comment
Please, Sign In to add comment