react-native textInput onChangeText issue

Question

import React, {useRef, useState} from 'react';
import {KeyboardAvoidingView, Platform, ScrollView, TextInput} from 'react-native';
import {SafeAreaView} from "react-native-safe-area-context";

export const ProfileScreen: React.FC = () => {
    const [userInfo, setUserInfo] = useState({
        name: '',
        lastName: '',
    });
    const scrollViewRef = useRef<ScrollView>(null);
    const inputNameRef = useRef<TextInput>(null);
    const inputLastNameRef = useRef<TextInput>(null);
    
    ...
    return (
        <SafeAreaView style={{flex: 1}}>
            <KeyboardAvoidingView
                behavior={(Platform.OS === 'iOS') ? 'padding' : 'height'}
                style={{flex: 1}}>
                <ScrollView
                    keyboardShouldPersistTaps={'handled'}
                    ref={scrollViewRef}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}>
                    <TextInput
                        ref={inputNameRef}
                        placeholder={'Your Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, name: text}));
                        }}
                        value={userInfo.name}
                        onSubmitEditing={inputLastNameRef.current?.focus()}
                    />
                    <TextInput
                        ref={inputLastNameRef}
                        placeholder={'Your Last Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, lastName: text}));
                        }}
                        value={userInfo.lastName}
                    />
                </ScrollView>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
};    

When I tap on the TextInput, the keyboard opens. However, when I press a key (triggering a state update), it closes. What am I missing?

When I tap on the TextInput, the keyboard opens. However, when I press a key (triggering a state update), it closes. What am I missing?

Answer 1

The issue arises because the onSubmitEditing callback for your TextInput is being executed incorrectly. Specifically, you are calling the focus method directly in the onSubmitEditing prop. This results in the method being called immediately during the rendering phase, instead of being assigned as a callback to the onSubmitEditing event. Consequently, it disrupts the input handling behavior and causes the keyboard to close.

To fix this, you need to wrap the focus method call in an arrow function so that it is executed only when the onSubmitEditing event occurs. Here's the corrected code:

import React, {useRef, useState} from 'react';
import {KeyboardAvoidingView, Platform, ScrollView, TextInput} from 'react-native';
import {SafeAreaView} from "react-native-safe-area-context";

export const ProfileScreen: React.FC = () => {
    const [userInfo, setUserInfo] = useState({
        name: '',
        lastName: '',
    });
    const scrollViewRef = useRef<ScrollView>(null);
    const inputNameRef = useRef<TextInput>(null);
    const inputLastNameRef = useRef<TextInput>(null);
    
    return (
        <SafeAreaView style={{flex: 1}}>
            <KeyboardAvoidingView
                behavior={(Platform.OS === 'iOS') ? 'padding' : 'height'}
                style={{flex: 1}}>
                <ScrollView
                    keyboardShouldPersistTaps={'handled'}
                    ref={scrollViewRef}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}>
                    <TextInput
                        ref={inputNameRef}
                        placeholder={'Your Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, name: text}));
                        }}
                        value={userInfo.name}
                        onSubmitEditing={() => inputLastNameRef.current?.focus()} // Use arrow function here
                    />
                    <TextInput
                        ref={inputLastNameRef}
                        placeholder={'Your Last Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, lastName: text}));
                        }}
                        value={userInfo.lastName}
                    />
                </ScrollView>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
};