How to use tab navigation createBottomTabNavigator in react native - react-native

Question

I am trying to get a simple example of tab navigation to work in react native. It seems like examples online all assume that a tab navigation screen is the one and only screen in your app, which is not the case for me. In my app I will have a login page, and upon successful login there will be a tab navigation screen I call DashboardTabScreen. The app will have other (non tab) screens available (like Settings or Contact us, or whatever) and each of the tab screens will be the root of a stack of other "detail" screens.
So here is my App.js:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from "./src/screens/LoginScreen";
import DashboardTabScreen from "./src/screens/DashboardTabScreen";
const navigator = createStackNavigator(
{
Login: LoginScreen,
DashboardTab: DashboardTabScreen
},
{
initialRouteName: "Login",
defaultNavigationOptions: {
title: "App"
}
}
);
export default createAppContainer(navigator);
And here is my DashboardTabScreen.js
import React, {Component} from "react";
import { Text, StyleSheet, View } from "react-native";
import { createBottomTabNavigator } from 'react-navigation-tabs';
const FirstScreen = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>First!</Text>
</View>
);
}
const SecondScreen = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Second!</Text>
</View>
);
}
const DashboardTabScreen = createBottomTabNavigator(
{
First: {
screen: FirstScreen,
},
Second: {
screen: SecondScreen,
}
}
);
export default DashboardTabScreen;
When I run the app, it goes to the Login screen as expected. Upon successful login, it should go to this dashboard tab screen. Instead it throws an error:
Invariant violation: 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 is defined in, or you might have mixed up default and named
imports.
And here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.4.1",
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "^5.2.6",
"#react-navigation/stack": "5.2.3",
"expo": "~36.0.0",
"n": "^6.5.1",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-screens": "^2.7.0",
"react-navigation": "^4.3.9",
"react-navigation-stack": "^2.0.16",
"react-navigation-tabs": "^1.2.0",
"stable": "^0.1.8"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0"
},
"private": true
}
So what is wrong with my code?

Answer 1

I had tried your code it's working perfectly, there is no error in your code:
I think the problem is with react-navigation-tabs version:
change :
"react-navigation-tabs": "^1.2.0",
to
"react-navigation-tabs": "^2.8.7"
Hope this helps!

Answer 2

The problem is with the react-navigation-tabs try to upgrade and then check it.