React Native how to change the focus automatically to the next TextInput? - react-native

Question

I would love to make a bank card number input function .
Here's the idea , when the user complete an input box ,it will focus on the next input box automatically.
Like the picture before :
The TextInput component(AutoTextInput):
import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native'
import colors from '../config/colors';
import AppText from './AppText/AppText';
function AutoTextInput(
{input_width="100%",
input_limit,
input_maxLength =16,
input_keyboardType ='numeric',
title,
...ortherProps}) {
return (
<View style={styles.container,{width:input_width}}>
<AppText style={styles.title}>{title}</AppText>
<TextInput
style={styles.input_text}
maxLength = {input_maxLength}
keyboardType ={input_keyboardType}
{...ortherProps}
/>
</View>
);
}
const styles = StyleSheet.create({
container : {
flexDirection : 'column',
} ,
input_text: {
fontSize: 18,
color : colors.medium,
borderColor : colors.primary,
borderWidth :0.5,
padding :10,
borderRadius :5,
textAlign :'center',
},
title : {
fontWeight : 'bold',
},
})
export default AutoTextInput;
The Screen I use this component :
import React,{useState} from 'react';
import {StyleSheet, View} from 'react-native'
import AppText from './AppText/AppText';
import AutoTextInput from './AutoTextInput';
function Visa({title}) {
const [value,setValue] = useState("");
return (
<View style={styles.container}>
<AppText>Card Number</AppText>
<View style={styles.card_num_container}>
<AutoTextInput
input_maxLength ={4}
input_width="23%"
onChangeText={(text)=>setValue(text)}
placeholder ="0000"
/>
<AutoTextInput
input_maxLength ={4}
input_width="23%"
onChangeText={(text)=>setValue(text)}
placeholder ="0000"
/>
<AutoTextInput
input_maxLength ={4}
input_width="23%"
onChangeText={(text)=>setValue(text)}
placeholder ="0000"
/>
<AutoTextInput
input_maxLength ={4}
input_width="23%"
onChangeText={(text)=>setValue(text)}
placeholder ="0000"
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container : {
width :"100%",
height :"100%",
marginTop : 25,
flexDirection : 'column',
} ,
card_num_container :{
flexDirection : 'row',
width : "100%",
justifyContent : 'space-around',
},
})
export default Visa;
I have no idea how to make it automatically focus on the next input box ..Anyone can help ?
Thanks sooo much !

Answer 1

You can create an array of ref like this
const refs = React.useRef([])
Then pass those refs to the custom text input component then when the user submits 4 number on the input box focus the next input like this
<AutoTextInput
input_maxLength ={4}
input_width="23%"
onChangeText={(text)=>setValue(text)}
placeholder ="0000"
forwardedRef={refs[0]}
onSubmitEditing={() => refs[0 + 1].current.focus()}
forwardRef={refs[index]}/>
Inside AutoTextInput
<TextInput
style={styles.input_text}
ref={this.props.forwardedRef}
maxLength = {input_maxLength}
keyboardType ={input_keyboardType}
onSubmitEditing={this.props.onSubmitEditing}/>