Element type is invalid: expected a string but got undefined, check the render method of AnimatedComponent - ReactNavigation

Question

I'm stucking a couple of days with ReactNavigation v6+, also there are several similar questions/answers about the invalid element type, but none of them is working with this simple example:

The issue was started after adding the material-top-tap navigation from @react-navigation module.

To avoid complexity, I use the minimal needed code lines to reproduce this error:

import React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

const TopBarOne = () => (
  <View>
    <Text>TOP BAR ONE</Text>
  </View>
);
const TopBarTwo = () => (
  <View>
    <Text>TOP BAR TWO</Text>
  </View>
);

const TopTabBar = createMaterialTopTabNavigator();

const TopBarStack = () => {
  return (
    <TopTabBar.Navigator>
      <TopTabBar.Screen name={'one'} component={TopBarOne} />
      <TopTabBar.Screen name={'two'} component={TopBarTwo} />
    </TopTabBar.Navigator>
  );
};

const NavigationProvider = () => {
  return (
    <NavigationContainer>
      <TopBarStack />
    </NavigationContainer>
  );
};

export default NavigationProvider;

The complete error log:

ERROR  Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
 or you might have mixed up default and named imports.

Check the render method of `AnimatedComponent`.

This error is located at:
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at PagerViewAdapter.tsx:123)
    in PagerViewAdapter (at TabView.tsx:79)
    in RCTView (at View.js:32)
    in View (at TabView.tsx:78)
    in TabView (at MaterialTopTabView.tsx:47)
    in MaterialTopTabView (at createMaterialTopTabNavigator.tsx:136)
    in Unknown (at createMaterialTopTabNavigator.tsx:135)
    in MaterialTopTabNavigator (at testProvider.tsx:23)
    in TopBarStack (at testProvider.tsx:33)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at testProvider.tsx:32)
    in NavigationProvider (at App.tsx:17)
    in App (at hatman/index.tsx:22)
    in Root (at CodePush.js:585)
    in CodePushComponent (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)

package versions:

"react": "17.0.2",
"react-native": "0.67.2",

"@react-navigation/material-top-tabs": "^6.2.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.1",
"react-native-gesture-handler": "^2.4.0",
"react-native-pager-view": "^6.0.0-rc.1",
"react-native-paper": "^4.12.0",
"react-native-tab-view": "^3.1.1",

targeted device:

Android

Answer 1

Thanks for the snack.expo.dev's notifications which lead to solving my issue.

The snack will notice me that some third-library packages version are not compatible with the navigation, so I've changed some packages version and it's working well.

Old modules version (which cause the problem):

"react-native-screens": "^3.13.1",
"react-native-pager-view": "^6.0.0-rc.1",
"react-native-safe-area-context": "^4.1.4",

New modules version:

"react-native-screens": "^3.8.0",
"react-native-pager-view": "^5.4.6",
"react-native-safe-area-context": "^3.3.2",

No need to downgrade or change any navigation sub-modules version.