I just wanted to share the latest tutorial I watched on the ExpoGo channel on YouTube had a very simple solution that worked perfectly for me. You need to install first this: 'npm i react-native-keyboard-controller" Then import this on your root layout :
import { KeyboardProvider } from "react-native-keyboard-controller";
my layout:
import { Stack } from "expo-router/stack";
import { KeyboardProvider } from "react-native-keyboard-controller";
export default function _layout() {
return (
<KeyboardProvider>
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="index" />
</Stack>
</KeyboardProvider>
)
}
screen:
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const App = () => {
return (
<GestureHandlerRootView>
<View style={{ flex: 1, backgroundColor: color.white }}>
<KeyboardAwareScrollView bottomOffset={30} style={{ flex: 1 }}>
<View style={{ alignItems: "center", paddingTop: hp("4%") }}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextField
name={"First Name"}
value={firstName.value}
placeholder="Enter your First Name"
showError={isSubmitted}
onChange={firstName.onChangeText}
errorMessage={firstName.error}
/>
<TextField
name={"Middle Name"}
value={middleName.value}
placeholder="Enter your Middle Name"
onChange={middleName.onChangeText}
/>
<TextField
name={"Last Name"}
value={lastName.value}
placeholder="Enter your Last Name"
onChange={lastName.onChangeText}
showError={isSubmitted}
errorMessage={lastName.error}
/>
</TouchableWithoutFeedback >
</View>
</KeyboardAwareScrollView>
</View>
</GestureHandlerRootView>
)
}
export default App;
Incase your having trouble understanding, this is the link: [https://www.youtube.com/watch?v=Y51mDfAhd4E&ab_channel=Expo]