React Native: After Navigate Push, First Focus TextInput Flashing Out Keyboard

Question

On my real Android device, focusing a TextInput after pushing a screen into a Stack Navigation makes the keyboard flashing once (appears then disappears immediately). This doesn't occur on refocusing, but reoccurs if I navigate back and re-push the navigation with any screens that has TextInputs in it.

This doesn't occur:

• in Android Emulator
• if I use navigation.navigate('...')

These codes below are exactly the same that run on my deivce, it's just simple codes no fancy things.

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import CategoryScreen from './screens/Category';

const MyStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <MyStack.Navigator>
        <MyStack.Screen name="Category" component={CategoryScreen} />
      </MyStack.Navigator>
    </NavigationContainer>
  );
}

Category.js

import React from 'react';
import { View, TextInput, Button } from 'react-native';

export default function Category({ navigation }) {
  function goToAnotherCategory() {
    navigation.push('Category');
  }

  return (
    <View>
      <Button onPress={goToAnotherCategory} title="Go to Another Category" />
      <TextInput style={{ margin: 10, borderWidth: 1, backgroundColor: 'white' }} />
    </View>
  )
}

I'm using these versions:

"dependencies": {
  ...
  "@react-navigation/native": "^5.5.1",
  "@react-navigation/stack": "^5.5.1",
  "react": "16.11.0",
  "react-native": "0.62.2"
  ...
}

Answer 1

Solution 1:

It's happening to us as well on the latest version of react-navigation.

As a workaround, we disabled the keyboard handling for the whole stack setting the keyboardHandlingEnabled prop to false. More info here: https://reactnavigation.org/docs/stack-navigator/#keyboardhandlingenabled

So now it works just fine. :)

Solution 2:

run these commands on terminal

watchman watch-del-all
rm -rf node_modules && yarn

Solution 3:

it is also due to version compatibility. install these two packages by expo CLI if you are using expo

expo install @react-navigation/native
expo install @react-navigation/stack