anilchahal7

OTP and CVV Input Field

Jan 8th, 2018
69
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 } from 'react-native';
  3. import CustomTextInput from './CustomTextInput';
  4.  
  5. class otpandcvv extends Component {
  6.  
  7.     constructor(props) {
  8.         super(props);
  9.         this.maxLength = 6;
  10.     }
  11.  
  12.     changeFocusToNext(id) {
  13.         if (id + 1 !== this.maxLength) {
  14.             this.refs[id + 1].focus();
  15.         }
  16.     }
  17.  
  18.     changeFocusToPrevious(id) {
  19.         if (id === 0) {
  20.             this.refs[0].focus();
  21.         } else {
  22.             this.refs[id - 1].focus();
  23.         }
  24.     }
  25.  
  26.     render() {
  27.         let customTextInput = [];
  28.         for (let i = 0; i < this.maxLength; i++) {
  29.             customTextInput.push(
  30.                 <TextInput
  31.                     ref={i}
  32.                     style={styles.textInputStyle}
  33.                     maxLength={1}
  34.                     underlineColorAndroid='transparent'
  35.                     keyboardType='numeric'
  36.                     returnKeyType='next'
  37.                     placeholder='.'
  38.                     onChangeText={text => {
  39.                         if (text.trim().replace(/\s+/g, ''.length !== 0)) {
  40.                             this.changeFocusToNext(i);
  41.                         } else {
  42.                             this.changeFocusToPrevious(i);
  43.                         }
  44.                     }}
  45.                 />
  46.             );
  47.         }  
  48.  
  49.         return (
  50.             <View style={styles.containerStyles}>
  51.                 <View style={{flexDirection: 'row', paddingLeft: 15, paddingRight: 15}}>
  52.                     {customTextInput}
  53.                 </View>
  54.             </View>
  55.         );
  56.     }
  57. }
  58.  
  59. const styles = {
  60.     containerStyles: {
  61.         width: 196,
  62.         height: 48,
  63.         marginTop: 100,
  64.         borderRadius: 4,
  65.         alignSelf: 'center',
  66.         backgroundColor: '#eff1f4'
  67.     },
  68.     textInputStyle: {
  69.         width: 28,
  70.         height: 32,
  71.         fontSize: 24,
  72.         marginTop: 8,
  73.         marginBottom: 8,
  74.         paddingTop: 0,
  75.         paddingBottom: 0,
  76.     }
  77. }
  78.  
  79. export default otpandcvv;
Add Comment
Please, Sign In to add comment