React Native Bottom NavigationBar - react-native

Question

I am trying to build a bottom navigation bar, everything works but the navigation bar does not show up. I am kinda new to react native too. I feel like the problem is the export default as it was not taking the object as the App registry.
The other files work too, like there is no error but the navigation bar does not show up
import React, { Component } from "react";
import { AppRegistry, Text, View, StyleSheet } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import { NavigationComponent } from "react-native-material-bottom-
navigation";
import { TabNavigator } from "react-navigation";
import Home from "./app/components/home.js";
import BackgroundImage from "./app/components/BackgroundImage.js";
import FadeAnimation from
"./app/components/animations/fadeAnimation.js";
class HomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: "Home",
tabBarIcon: () => <Icon size={24} color="white" name="home" />
};
render() {
return (
<BackgroundImage>
<Home />
</BackgroundImage>
);
}
}
class Announcements extends React.Component {
static navigationOptions = {
tabBarLabel: "Announcements",
tabBarIcon: () => <Icon size={24} color="white" name="bullhorn" />
};
render() {
return (
<View>
<Text>This is announcement page</Text>
</View>
);
}
}
class Calendar extends React.Component {
static navigationOptions = {
tabBarLabel: "Calendar",
tabBarIcon: () => <Icon size={24} color="white" name="calendar" />
};
render() {
return (
<View>
<Text>This is announcement page</Text>
</View>
);
}
}
class Contact extends React.Component {
static navigationOptions = {
tabBarLabel: "Contact",
tabBarIcon: () => <Icon size={24} color="white" name="comments" />
};
render() {
return (
<View>
<Text>This is announcement page</Text>
</View>
);
}
}
const MyApp = TabNavigator(
{
HomeScreen: { screen: HomeScreen },
Announcements: { screen: Announcements },
Calendar: { screen: Calendar },
Contact: { screen: Contact }
},
{
tabBarComponent: NavigationComponent,
tabBarPosition: "bottom",
tabBarOptions: {
bottomNavigationOptions: {
labelColor: "white",
rippleColor: "white",
tabs: {
HomeScreen: {
barBackgroundColor: "#3C2538"
},
Announcements: {
barBackgroundColor: "#388E3C"
},
Calendar: {
barBackgroundColor: "#E64A19",
labelColor: "#434343",
activeLabelColor: "#212121",
activeIcon: <Icon size={24} color="#212121" name="calendar" />
},
Contact: {
barBackgroundColor: "#a0c4ff"
}
}
}
}
}
);
export default MyApp;
AppRegistry.registerComponent("MyApp", () => MyApp);

Answer 1

Maybe my case may help you, so in App.js create the bottom tab navigator, just import the createBottomTabNavigator, then import some screen that you want to put on my bottom tab navigation, this is the example of my code :
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Users from './Users';
import Vehicles from './Vehicles';
import Home from './Home';
import MyAccount from './MyAccount';
export default class Dashboard extends Component {
static navigationOptions = {
header: null,
};
render() {
return (
<AppContainer/>
);
}
}
const TabScreens = createBottomTabNavigator({
Home:{
screen: Home
},
Users:{
screen: Users,
},
Vehicles:{
screen: Vehicles
},
MyAccount:{
screen: MyAccount
},
},{
tabBarOptions:{
labelStyle: {
fontSize: 12,
marginBottom:10,
},
style:{
elevation:5
}
}
})
const AppContainer = createAppContainer(TabScreens);
Hope it will help you