React native render error : cannot read property prorotype of undefined

Question

I have a mobile app using only react native and no expo, when I click from landing screen to go to any other screen, I see the error in the image [1]: https://i.stack.imgur.com/Czbq4.jpg

Stack trace

This error is located at:

in Pager (created by TabView)
in RCTView (created by View)
in View
in GestureHandlerRootView (created by TabView)
in TabView (created by MaterialTopTabView)
in MaterialTopTabView (created by MaterialTopTabNavigator)
in MaterialTopTabNavigator (created by MyScheduleTopTabs)
in MyScheduleTopTabs (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View
in Unknown (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View
in Unknown (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen
in Unknown (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in CardStack
in KeyboardManager (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in GestureHandlerRootView
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in StackNavigator (created by MyScheduleStackScreen)
in MyScheduleStackScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by SceneContent)
in SceneContent (created by BottomTabView)
in RNSScreen
in Unknown (created by Screen)
in Screen (created by ResourceSavingScene)
in ResourceSavingScene (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by BottomTabView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in BottomTabNavigator (created by AppStack)
in AppStack (created by AppNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainer (created by AppNavigator)
in AppNavigator (created by App)
in ThemeProvider (created by App)
in I18nextProvider (created by App)
in ApolloProvider (created by App)
in NetworkConnectivity (created by ReduxNetworkProvider)
in ReduxNetworkProvider (created by Connect(ReduxNetworkProvider))
in Connect(ReduxNetworkProvider) (created by App)
in NetworkConnectivity (created by NetworkProvider)
in NetworkProvider (created by App)
in PersistGate (created by App)
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in (RootComponent), js engine: hermes

I just upgraded my old project dependencies in package.json to newest versions of all libraries and moved from old react versions to latest 0.72.3.

I cannot figure out what exactly must be the problem in rendering a screen.

Here are the navigation packages I use

"react-navigation": "^4.4.3",
"@react-navigation/bottom-tabs": "^5.2.5",
"@react-navigation/material-top-tabs": "^5.1.7",
"@react-navigation/native": "^5.1.4",
"@react-navigation/stack": "^5.2.9",

Answer 1

Remove the react-navigation v4 dependency. That library is not compatible with react-navigation v5. Refer to the v5 docs. V5 installation has a @react-navigation alias for all dependencies being installed for navigation.

Also when upgrading make sure to reference the react-native-upgrade-helper. You may be missing something there.

After upgrading if I run into issues (which usually happens) I have a separate boilerplate project bootstrapped with npx react-native init that I make sure is working. Make sure you bootstrap with the correct version if you upgrade to something lower than latest react-native.

If the bootstrapped project is working, then thats a sign your original project may need to upgrade dependencies and/or update the yarn.lock or package-lock.json.

Noting that updating react-native is probably one of the only times it is good to completely refresh your lockfiles.

Troubleshooting:

1. Go through each dependency and confirm in it's docs that it works with your version of react native. Look at the github issues.
2. Verify you are using libraries that are compatible with each other.