Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Focusing the next input after reaching the max length React Native

$
0
0

I want to be able to move the focus from one input onto the next after the user has entered 2 numbers in the input box. Instead of the user manually clicking the next field I'd like the focus to switch there automatically.

Below is how I've currently implemented my two input fields.

I've tried the things mentioned here using refs but doesn't seem to work at all https://www.codegrepper.com/code-examples/csharp/react+native+textinput+focus

<Controller                control={form.control}                defaultValue={initialMonthValue}                name={monthName}                render={({ onChange, onBlur, value }) =><Input                        containerStyle={{ width:80 }}                        editable={!isSubmitting}                        autoCapitalize="none"                        numberOfLines={1}                        multiline={false}                        keyboardType='number-pad'                        placeholder="MM"                        maxLength={2}                         placeholderTextColor={Colors.Grey}                        onChangeText={onChange}                        onBlur={onBlur}                        secureTextEntry={false}                        invalid={!!monthError}                        value={value} />}            /><Slash text="/" /><Controller                control={form.control}                defaultValue={initialYearValue}                name={yearName}                render={({ onChange, onBlur, value }) =><Input                        containerStyle={{ width:80 }}                        editable={!isSubmitting}                        autoCapitalize="none"                        numberOfLines={1}                        multiline={false}                        keyboardType='number-pad'                        placeholder="YY"                        placeholderTextColor={Colors.Grey}                        onChangeText={onChange}                        onBlur={onBlur}                        secureTextEntry={false}                        invalid={!!yearError}                        value={value} />}            />

Viewing all articles
Browse latest Browse all 6287

Trending Articles