2 headers in screen in Dashboard navigator - react-native

Question

I am new in ReactNative. I am learning things by just seeing examples.I get stuck in one issue. In my project i have implemented drawer navigation and tab navigator every thing is working fine but my screen shows 2 headers. I tried a lot to remove that header but still not get any success. In all child screen has its own header. I tried to remove child header(its happen) and modified parent header but not getting any success.
Here is my code :
import React, { Component } from 'react';
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation';
import { View, StyleSheet, Keyboard, TouchableOpacity, Text } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import COLOR from '../Css/COLOR';
import { font_medium, font_regular, hidenavigation, getScreenWidth, getScreenHeight, printLogs } from '../Global/Utility';
import { AddDiamonds } from './AddDiamond';
import { DimondList } from './DiamondList';
import { DrawerNavigator } from 'react-navigation';
import { StackNavigator } from 'react-navigation';
import CustomSideMenu from './CustomSideMenu';
import { Dashboard } from './Dashboard';
const style = StyleSheet.create({
activeText: {
color: COLOR.action_bar,
fontFamily: font_medium
},
deactiveText: {
color: COLOR.tab_deselected_text_color,
fontFamily: font_regular
}
})
export class Home extends React.Component {
static navigationOptions = hidenavigation;
constructor(props) {
super(props);
}
apply_header = (val) => {
this.props.navigation.setParams({ Title: val });
}
goToNextTab = (tabName) => {
this.setState({ activeTab: tabName });
}
openDrawer() {
this.props.navigation.openDrawer();
}
tabs = [{
key: 'Dashboard',
icon: 'speedometer',
label: 'Dashboard',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'Add Diamond',
icon: 'plus-circle-outline',
label: 'Add Diamond',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'Diamond',
icon: 'diamond-stone',
label: 'Diamond',
pressColor: 'rgba(255, 255, 255, 0.16)'
}]
state = {
activeTab: 'Dashboard',
showFooter: true
};
renderIcon = icon => ({ isActive }) => (
<Icon size={24} color={isActive ? COLOR.action_bar : COLOR.tab_deselected_text_color} name={icon} />
)
renderTab = ({ tab, isActive }) => (
<FullTab isActive={isActive} key={tab.key} label={tab.label} labelStyle={isActive ? style.activeText : style.deactiveText} renderIcon={this.renderIcon(tab.icon)} />
)
render() {
const propsForChild = {
goToNextTab: (tabName) => this.goToNextTab(tabName),
openDrawer: () => this.openDrawer()
};
const propsForNav = {
nav: this.props,
openDrawer: () => this.openDrawer()
};
const addDimPropsForChild = {
openDrawer: () => this.openDrawer()
}
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{
this.state.activeTab === 'Add Diamond' ? <Add_Dimond_Stack screenProps={addDimPropsForChild} /> : this.state.activeTab === 'Diamond' ? <Dimond_List_stack screenProps={propsForNav} /> : <Dashboard_Stack screenProps={propsForChild} />
}
</View>
{
this.state.showFooter ?
<BottomNavigation activeTab={this.state.activeTab} renderTab={this.renderTab} tabs={this.tabs} onTabPress={newTab => { this.setState({ activeTab: newTab.key }); }} />
: null
}
</View>
);
}
componentWillMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow() {
//alert('Keyboard Shown');
this.setState({ showFooter: false })
}
_keyboardDidHide() {
//alert('Keyboard Hidden');
this.setState({ showFooter: true })
}
}
export default MyDrawerNavigator = DrawerNavigator({
Page1: {
screen: props => <Home {...props} />,
}
},
{
contentComponent: props => (<CustomSideMenu {...props} />),
drawerWidth: (getScreenWidth() * 2.5) / 3,
}
);
const Dashboard_Stack = StackNavigator({
Dashboard_Stack: {
screen: Dashboard,
},
});
const Add_Dimond_Stack = StackNavigator({
Add_Dimond_Stack: {
screen: AddDiamonds,
},
});
const Dimond_List_stack = StackNavigator({
Dimond_List_stack: {
screen: DimondList,
},
});
Dashboard.js
export class Dashboard extends React.Component {
static navigationOptions = ({ navigation }) => {
const { state } = navigation;
return {
title: 'Dashboard',
headerStyle: styleApp.actionBarHeaderBgStyle,
headerTitleStyle: styleApp.actionBarTextStyle,
headerLeft:
<HeaderMenuIcon nav={state.params} />
}
}

Answer 1

Error is here
const Dashboard_Stack = StackNavigator({
Dashboard_Stack: {
screen: Dashboard,
},
});
Replace with
const Dashboard_Stack = StackNavigator({
Dashboard_Stack: {
screen: Dashboard,
navigationOptions:
{
header: null
},
},
});
If you are using different types of version than here are the answer for that
UPDATE as of version 5
As of version 5 it is the option headerShown in screenOptions
Example of usage:
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
UPDATE
As of version 2.0.0-alpha.36 (2019-11-07),
there is a new navigationOption: headershown
navigationOptions: {
headerShown: false,
}
Old answer
I use this to hide the stack bar (notice this is the value of the second param):
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}

Answer 2

I solved this issue by just added following line in my root App.js file
home: { screen: home,
navigationOptions:{
header:null
} }

Answer 3

I had a scenario where I am using v6 of react native navigation
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
const BottomTabs = createBottomTabNavigator()
const TrackStack = createStackNavigator()
And I was getting 2 headers, the solution was deciding which header I wanted to show, the one from bottom tabs or from the stack navigator. Each one accepts an screen options props
<BottomTabs.Navigator screenOptions={{ headerShown: false }}>
or
<TrackStack.Navigator screenOptions={{ headerShown: false }}>
One of these needed to be false and the other true