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 could be causing this issue?
Tapping on the TextInput results in the keyboard opening as expected. However, pressing a key to trigger a state update unexpectedly closes the keyboard. How can this issue be resolved?