anilchahal7

With Hidden TextInput

Jan 9th, 2018
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React , { Component } from 'react';
  2. import { View, TextInput, Alert, TouchableOpacity, Text, Keyboard} from 'react-native';
  3. import CustomTextInput from './CustomTextInput';
  4.  
  5. class otpandcvv extends Component {
  6.  
  7.     state = { inputValue: [] };
  8.  
  9.     constructor(props) {
  10.         super(props);
  11.         this.maxCharLength = 6;
  12.         this.inputDict = {};
  13.     }
  14.  
  15.     changeFocusToNext(id) {
  16.         if (id + 1 !== this.maxCharLength) {
  17.             this.refs[id + 1].focus();
  18.         }
  19.     }
  20.  
  21.     changeFocusToPrevious(id) {
  22.         if (id === 0) {
  23.             this.refs[0].focus();
  24.         } else {
  25.             this.refs[id - 1].focus();
  26.         }
  27.     }
  28.  
  29.     onChange(text, j) {
  30.         let newText = '';
  31.         let numbers = '0123456789';
  32.         for (let i = 0; i < text.length; i++) {
  33.             if(numbers.indexOf(text[i]) > -1) {
  34.                 newText = newText + text[i];
  35.             }
  36.         }
  37.         this.inputDict[j] = newText;
  38.         if (text.trim().replace(/\s+/g, ''.length !== 0)) {
  39.             this.changeFocusToNext(j);                        
  40.         } else {
  41.             this.changeFocusToPrevious(j);
  42.         }
  43.     }
  44.  
  45.     onButtonPress() {
  46.         if (Object.keys(this.inputDict).length !== this.maxCharLength) {
  47.             Alert.alert('Enter all field');
  48.             return;
  49.         }
  50.         let enteredText = '';
  51.         for (let i = 0; i < Object.keys(this.inputDict).length; i++) {
  52.             if (this.inputDict[i] !== '') {
  53.                 enteredText = enteredText + this.inputDict[i];
  54.             } else {
  55.                 Alert.alert('Enter All Field Correctly')
  56.                 return;
  57.             }
  58.         }
  59.        Alert.alert('You have entered ' + enteredText);
  60.     }
  61.  
  62.     onHiddenTextChange(text) {
  63.         this.setState({
  64.             inputValue: text
  65.         })
  66.     }
  67.  
  68.     render() {
  69.         let customTextInput = [];
  70.         for (let i = 0; i < this.maxCharLength; i++) {
  71.             customTextInput.push(
  72.                 <TextInput
  73.                     ref={i}
  74.                     key={i}
  75.                     style={styles.textInputStyle}
  76.                     maxLength={1}
  77.                     underlineColorAndroid='transparent'
  78.                     keyboardType='numeric'
  79.                     returnKeyType='next'
  80.                     placeholder='.'
  81.                     value={this.state.inputValue[i]}
  82.                     onFocus={Keyboard.dismiss}
  83.                     onKeyPress={(keyPress) => console.log(keyPress)}
  84.                     onChangeText={text => this.onChange(text, i)}
  85.                 />
  86.             );
  87.         }  
  88.  
  89.         return (
  90.             <View style={{ flex: 1}}>
  91.                 <TextInput
  92.                     style={styles.hiddenTextInput}
  93.                     maxLength={this.maxCharLength}
  94.                     keyboardType='numeric'
  95.                     autoFocus={true}
  96.                     onChangeText={text => this.onHiddenTextChange(text)}
  97.                 />
  98.                 <View style={styles.containerStyles}>
  99.                     <View style={{flexDirection: 'row', paddingLeft: 15, paddingRight: 15}}>
  100.                         {customTextInput}
  101.                     </View>
  102.                 </View>
  103.                 <TouchableOpacity
  104.                     style={{width: 196, height: 48, marginTop: 10, alignSelf: 'center'}}
  105.                     onPress={this.onButtonPress.bind(this)}>
  106.                     <View style={{ alignSelf: 'center' }}>
  107.                         <Text>Click Here</Text>
  108.                     </View>
  109.                 </TouchableOpacity>
  110.             </View>
  111.         );
  112.     }
  113. }
  114.  
  115. const styles = {
  116.     containerStyles: {
  117.         width: 196,
  118.         height: 48,
  119.         marginTop: 2,
  120.         borderRadius: 4,
  121.         alignSelf: 'center',
  122.         backgroundColor: '#eff1f4'
  123.     },
  124.     hiddenTextInput: {
  125.         opacity: 0.1,
  126.         height: 48,
  127.         width: 80,
  128.         marginTop: 100,
  129.         alignSelf: 'center'
  130.     },
  131.     textInputStyle: {
  132.         width: 28,
  133.         height: 32,
  134.         fontSize: 24,
  135.         marginTop: 8,
  136.         marginBottom: 8,
  137.         paddingTop: 0,
  138.         paddingBottom: 0,
  139.     }
  140. }
  141.  
  142. export default otpandcvv;
Add Comment
Please, Sign In to add comment