Home > Software design >  Keyboard keeps dismissed every-time its open in react native android
Keyboard keeps dismissed every-time its open in react native android

Time:08-11

In my application i have implemented several TextInput and everything was working fine in iOS, However, in android whenever i click on text input keyboard display then close directly before even typing anything.

I tried in several screens in the app and in every screen same issue happened, I even i tried to just import TextInput in full screen without warping it with any other component but same issue. I am not sure the issue caused by what or how even to debug it.

I hope someone can lead me to a solution.

UPDATE
After debugging looks like the issue is caused by @react-navigation library. When importing TextInput outside the NavigationContainer it works fine.

Example to produce:

  • Screen where i import TextInput

     const TestScreen = () => {
        return (
          <TextInput
            label="Phone number"
            mode="outlined"
            theme={{colors: {primary: COLORS.primary}}}
            keyboardType="number-pad"
            left={<TextInput.Icon name="phone" />}
          />
        );
      };
    
  • Tabs Navigator

const Tabs = () => {
  return (
      <Tab.Navigator
          initialRouteName="Home"
         tabBarOptions={{
            activeTintColor: COLORS.primary,
           inactiveTintColor: COLORS.darkgray,
            showLabel: false,
          }}>
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Test" component={TestScreen} />
          <Tab.Screen name="User" component={Profile} />
        </Tab.Navigator>
  );
};
  • Navigation Container
     <NavigationContainer theme={theme} onReady={() => RNBootSplash.hide()}>
              <Stack.Navigator
                screenOptions={{   
                  headerShown: false,
                }}
                initialRouteName={'Home'}>
                <Stack.Screen name="Home" component={Tabs} />
              </Stack.Navigator>
          </NavigationContainer>

Versions:

"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"react-native-screens": "^3.15.0",

CodePudding user response:

Change the line in AndroidManifest.xml android:windowSoftInputMode="adjustResize" to android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

OR Downgrading the react native screens version to "react-native-screens": "3.4.0"

  • Related