React Navigation + react-navigation-material-bottom-tabs - react-native

Question

I am trying to create an app that has a bottom navigation tab with the four screen tab menu. I want to have another page for Admin but the menu option should not appear on the bottom tab. ( I have a to go to that page) I am using react-navigation-material-bottom-tabs to create the bottom tab bar.
I need a way to go to that page.
export default createMaterialBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
title: "Home",
tabBarLabel: <Text style={{ color: "white" }}>Home</Text>,
barStyle: { backgroundColor: "#281b39" },
tabBarIcon: <Icon size={24} name="home" style={{ color: "white" }} />
}
},
Announcement: {
screen: AnnouncementScreen,
navigationOptions: {
title: "Announcement",
tabBarLabel: <Text style={{ color: "white" }}>Announcements</Text>,
barStyle: { backgroundColor: "#0e141d" },
tabBarIcon: (
<Icon size={24} name="bullhorn" style={{ color: "white" }} />
)
}
},
Material: {
screen: MaterialScreen,
navigationOptions: {
title: "Materials",
tabBarLabel: <Text style={{ color: "white" }}>Materials</Text>,
barStyle: { backgroundColor: "#E64A19" },
tabBarIcon: (
<Icon size={24} name="calendar" style={{ color: "white" }} />
)
}
},
Contact: {
screen: ContactScreen,
navigationOptions: {
title: "Contact",
tabBarLabel: <Text style={{ color: "white" }}>Contact</Text>,
barStyle: { backgroundColor: "#524365" },
tabBarIcon: (
<Icon size={24} name="comments" style={{ color: "white" }} />
)
}
}, },
{
shifting: true,
labeled: true } );
Here is an updated version
import React, { Component } from "react";
import { AppRegistry, Text, View, StatusBar } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import Home from "./app/components/home.js";
import Announcements from "./app/components/announcements.js";
import Contact from "./app/components/contact.js";
import BackgroundImage from "./app/components/BackgroundImage.js";
class HomeScreen extends Component {
render() {
return (
<BackgroundImage>
<StatusBar hidden={true} />
<Home />
</BackgroundImage>
);
}
}
class AnnouncementScreen extends Component {
render() {
return (
<Announcements>
<StatusBar hidden={true} />
</Announcements>
);
}
}
class MaterialScreen extends Component {
render() {
return (
<View>
<Text style={{ textAlign: "center", top: 200 }}>
This is going to be the Materials Screen
</Text>
</View>
);
}
}
class ContactScreen extends Component {
render() {
return <Contact />;
}
}
class AdminPage extends Component {
render() {
return <Text>Hi</Text>;
}
}
const Admins = {
Admin: {
screen: AdminPage
}
};
const ContactStack = createStackNavigator({
Contact: {
screen: ContactScreen
},
...Admins
});
const AppNavigator = createMaterialBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
title: "Home",
tabBarLabel: <Text style={{ color: "white" }}>Home</Text>,
barStyle: { backgroundColor: "#281b39" },
tabBarIcon: <Icon size={24} name="home" style={{ color: "white" }} />
}
},
Announcement: {
screen: AnnouncementScreen,
navigationOptions: {
title: "Announcement",
tabBarLabel: <Text style={{ color: "white" }}>Announcements</Text>,
barStyle: { backgroundColor: "#0e141d" },
tabBarIcon: (
<Icon size={24} name="bullhorn" style={{ color: "white" }} />
)
}
},
Material: {
screen: MaterialScreen,
navigationOptions: {
title: "Materials",
tabBarLabel: <Text style={{ color: "white" }}>Materials</Text>,
barStyle: { backgroundColor: "#E64A19" },
tabBarIcon: (
<Icon size={24} name="calendar" style={{ color: "white" }} />
)
}
},
Contact: {
screen: ContactStack,
navigationOptions: {
title: "Contact",
tabBarLabel: <Text style={{ color: "white" }}>Contact</Text>,
barStyle: { backgroundColor: "#524365" },
tabBarIcon: (
<Icon size={24} name="comments" style={{ color: "white" }} />
)
}
}
},
{
shifting: true,
labeled: true
}
);
const App = createAppContainer(AppNavigator);
export default App;

Answer 1

You can make use of a StackNavigator to go to a new screen.
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
class Home extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.container}>
<Text onPress={() => navigation.navigate("Admin")}>Home</Text>
</View>
);
}
}
class Announcement extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.container}>
<Text onPress={() => navigation.navigate("Admin")}>Announcement</Text>
</View>
);
}
}
class Material extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Material</Text>
</View>
);
}
}
class Contact extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Contact</Text>
</View>
);
}
}
class Admin extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Admin</Text>
</View>
);
}
}
const commonScreens = {
Admin: {
screen: Admin
}
};
const HomeStack = createStackNavigator({
Home: {
screen: Home
},
...commonScreens
});
const AnnouncementStack = createStackNavigator({
Announcement: {
screen: Announcement
},
...commonScreens
});
const AppNavigator = createMaterialBottomTabNavigator(
{
Home: { screen: HomeStack },
Announcement: { screen: AnnouncementStack },
Material: { screen: Material },
Contact: { screen: Contact }
},
{
initialRouteName: "Home",
activeColor: "#f0edf6",
barStyle: { backgroundColor: "#694fad" },
labeled: true
}
);
export default createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
There are options for removing the header as well.
For more information please have a look at the docs https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig