ios - React Native: How to select the next TextInput after pressing the "next" keyboard button? - Stack Overflow
Mon Sep 12 2022 16:46:36 GMT+0000 (Coordinated Universal Time)
Saved by @man_ssorr
import React, { useState, useEffect, useRef, } from 'react'; const OTP = (props) => { const OTP = []; const ref_input = []; ref_input[0] = useRef(); ref_input[1] = useRef(); ref_input[2] = useRef(); ref_input[3] = useRef(); const focusNext = (text, index) => { if (index < ref_input.length - 1 && text) { ref_input[index + 1].current.focus(); } if (index == ref_input.length - 1) { ref_input[index].current.blur(); } OTP[index] = text; } const focusPrev = (key, index) => { if (key === "Backspace" && index !== 0) { ref_input[index - 1].current.focus(); } } return ( <SafeAreaView> <View> <ScrollView contentInsetAdjustmentBehavior="automatic" showsVerticalScrollIndicator={false}> <View style={loginScreenStyle.titleWrap}> <Title style={loginScreenStyle.titleHeading}>Verify OTP</Title> <Subheading style={loginScreenStyle.subTitle}>Enter the 4 digit code sent to your mobile number</Subheading> </View> <View style={loginScreenStyle.inputContainer}> <TextInput mode="flat" selectionColor={Colors.primaryColor} underlineColorAndroid="transparent" textAlign='center' maxLength={1} keyboardType='numeric' style={formScreenStyle.otpInputStyle} autoFocus={true} returnKeyType="next" ref={ref_input[0]} onChangeText={text => focusNext(text, 0)} onKeyPress={e => focusPrev(e.nativeEvent.key, 0)} /> <TextInput mode="flat" selectionColor={Colors.primaryColor} underlineColorAndroid="transparent" textAlign='center' maxLength={1} keyboardType='numeric' style={formScreenStyle.otpInputStyle} ref={ref_input[1]} onChangeText={text => focusNext(text, 1)} onKeyPress={e => focusPrev(e.nativeEvent.key, 1)} /> <TextInput mode="flat" selectionColor={Colors.primaryColor} underlineColorAndroid="transparent" textAlign='center' maxLength={1} keyboardType='numeric' style={formScreenStyle.otpInputStyle} ref={ref_input[2]} onChangeText={text => focusNext(text, 2)} onKeyPress={e => focusPrev(e.nativeEvent.key, 2)} /> <TextInput mode="flat" selectionColor={Colors.primaryColor} underlineColorAndroid="transparent" textAlign='center' maxLength={1} keyboardType='numeric' style={formScreenStyle.otpInputStyle} ref={ref_input[3]} onChangeText={text => focusNext(text, 3)} onKeyPress={e => focusPrev(e.nativeEvent.key, 3)} /> </View> </ScrollView> </View> </SafeAreaView > ) } export default OTP;
Comments