Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React , { Component } from 'react';
- import { View, TextInput, Alert } from 'react-native';
- import CustomTextInput from './CustomTextInput';
- class otpandcvv extends Component {
- constructor(props) {
- super(props);
- this.maxLength = 6;
- }
- changeFocusToNext(id) {
- if (id + 1 !== this.maxLength) {
- this.refs[id + 1].focus();
- }
- }
- changeFocusToPrevious(id) {
- if (id === 0) {
- this.refs[0].focus();
- } else {
- this.refs[id - 1].focus();
- }
- }
- render() {
- let customTextInput = [];
- for (let i = 0; i < this.maxLength; i++) {
- customTextInput.push(
- <TextInput
- ref={i}
- style={styles.textInputStyle}
- maxLength={1}
- underlineColorAndroid='transparent'
- keyboardType='numeric'
- returnKeyType='next'
- placeholder='.'
- onChangeText={text => {
- if (text.trim().replace(/\s+/g, ''.length !== 0)) {
- this.changeFocusToNext(i);
- } else {
- this.changeFocusToPrevious(i);
- }
- }}
- />
- );
- }
- return (
- <View style={styles.containerStyles}>
- <View style={{flexDirection: 'row', paddingLeft: 15, paddingRight: 15}}>
- {customTextInput}
- </View>
- </View>
- );
- }
- }
- const styles = {
- containerStyles: {
- width: 196,
- height: 48,
- marginTop: 100,
- borderRadius: 4,
- alignSelf: 'center',
- backgroundColor: '#eff1f4'
- },
- 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