79253600

Date: 2024-12-05 06:35:30
Score: 1
Natty:
Report link

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]

Output:

Reasons:
  • Blacklisted phrase (1): youtube.com
  • Long answer (-1):
  • Has code block (-0.5):
  • Contains question mark (0.5):
  • Low reputation (1):
Posted by: Cayenne Ezra Gagno