React Nativigation navigating back on Android Keyboard Bug

Question

I currently have a react native app with one main screen that navigates to a second screen that has 3 text inputs. The problem I am having only occurs on Android. On the second screen, whenever a text input is in focus and I try to navigate back via react navigations’ back button, the keyboard hides, then reappears, then hides, and then transitions back to the first screen. It seems when I initially press the back button the inputs focus is blurred, then when I let go it refocuses on the input and then blurs it again and then navigates back. Not sure why this is happening on Android. It works as expected on iOS. Any solutions?

Thanks!

Answer 1

Did you have been manipulating keyboardHandlingEnabled prop? It can be related to this. Or you can just hook back press event using This Guide and blur your text input first like following.

function ScreenWithCustomBackBehavior() {
  // ...

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        if (isSelectionModeEnabled()) {
          disableSelectionMode();
          return true;
        } else {
          return false;
        }
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, [isSelectionModeEnabled, disableSelectionMode])
  );

  // ...
}