Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Keyboard keeps dismissed every-time its open in react native android

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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",

>Solution :

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"

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading