bottomTabNavigator within CreateStackNavigator throws 'must be a React Component

[AngeloMateus]

Error:
Unhandled JS Exception: Requiring module "index.js", which threw an exception: Error: The component for route 'TabNavigation' must be a React component. For example:

import MyScreen from './MyScreen';
...
TabNavigation: MyScreen,
}

You can also use a navigator:

import MyNavigator from './MyNavigator';
...
TabNavigation: MyNavigator,
}

I have a createBottomTabNavigator:

const TabNavigation = createBottomTabNavigator({
'Customer': CustomerScreen,
'Kiosk': AppScreen,
},
export default TabNavigation

//And in AppContainer.js

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import AuthNavigation from './AuthNavigation';
import TabNavigation from './TabNavigation'

const AppNavigation = createStackNavigator({
AuthNavigation: AuthNavigation,
TabNavigation: TabNavigation,
}
);

const AppContainer = createAppContainer(AppNavigation)

export default AppContainer;

The second screen 'TabNavigation' throws the error,
If I copy paste the entire TabNavigation to the createStackNavigator "TabNavigation: ...." then the second screen inside my createBottomTabNavigator throws the error.

I can't get any second screen to work.

[kam89]

Hi, not understand what are you trying to achieve.

If you want to create a tab Navigation, you can refer to this docs.
Refer to https://reactnavigation.org/docs/en/3.x/tab-based-navigation.html

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});
export default createAppContainer(TabNavigator);

If you want to perform a authloading then only route to show the TabNavigator,
you can refer to this https://reactnavigation.org/docs/en/3.x/auth-flow.html