Upgrading to RN 0.65.1 causes tabs to fail with _reactNative.Keyboard.removeListener is not a function

0
open
mrozanski
mrozanski
Posted 3 months ago

Upgrading to RN 0.65.1 causes tabs to fail with _reactNative.Keyboard.removeListener is not a function #3801

Version

Tell us which versions you are using:

  • react-native-router-flux v4.2.0
  • react v17.0.2
  • react-native v0.65.1
  • react-navigation/tabs v2.11.1

Expected behaviour

Using Tabs works

Actual behaviour

Using tabs generates a runtime fatal error when certain scenes are opened

Steps to reproduce

  1. Setup a rect-native project using the indicated versions
  2. Use Tabs
  3. Attempting to open certain scenes causes a fatal with the following error mesage:
ERROR  TypeError: _reactNative.Keyboard.removeListener is not a function. (In '_reactNative.Keyboard.removeListener('keyboardDidShow', this._handleKeyboardShow)', '_reactNative.Keyboard.removeListener' is undefined)

This error is located at:
    in NavigationContainer (at Router.js:97)
    in App (at Router.js:122)
    ...

I can't pinpoint what specifically makes some scenes to trigger this error while others don't but the reason is pretty obvious:

From RN v0.65.0 changelog: https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0650

Keyboard no longer inherits from NativeEventEmitter, so it no longer implements removeAllListeners, and removeSubscription. (1049835b50 by @yungsters)

https://github.com/react-navigation/tabs is using Keyboard.removeListener in at least 10 different places.

I know it is a problem with the tabs package but the fact that the current stable version of react-native-router-flux depends on it makes this a problem for users of react-native-router-flux I don't see any solution other than patching react-navigation/tabs, but their repo has been archived, so I'm hesitant about going that route just for a temporary fix that will never make it to their mainline.

If anyone has run into this and has any suggested workaround or working patch, I'd really appreciate knowing what you did.

Another issue from a different project with similar observed behavior: https://github.com/facebook/react-native/issues/32217