2 headers in screen in Dashboard navigator

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} />
        }
    }

score 2 · Answer 1 · answered Mar 17 '20 at 06:44

2

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,
    }
}

answered Mar 17 '20 at 06:44

Asad

563
3
16

it will hide my child component's(Dashboard) header but problem is that i ca't modify parent header, nothing is happen when i use navigationOptions with title,header style so that i need to remove parent header. child header working perfect – Divyata Chauhan Mar 17 '20 at 06:49
your parent can be modified as you require, header style is not applicable here. you have to use function "static navgationOptions" in your dashborad.js file and your styling as – Asad Mar 17 '20 at 07:10
static navigationOptions = ({navigation}) => { return{ headerLeft:({navigation.navigate('Home')}} color="#fff" tintColor="#fff"/>), headerStyle: { backgroundColor: 'rgb(0, 145, 234)', }, headerTintColor: 'white', headerTitleStyle: { fontWeight: 'bold', color:'white' , paddingTop:"2%", fontSize:10, height:29 }, } } – Asad Mar 17 '20 at 07:12
onPress, you add your code (like onPress={() => this.props.navigation.openDrawer()). HeaderbackButon, you may use Icon for "menu" this.props.navigation.openDrawer()/ > – Asad Mar 17 '20 at 07:16
if you don't understand let me know, then I'll change in your code – Asad Mar 17 '20 at 07:18

score 0 · Answer 2 · answered Mar 17 '20 at 08:43

0

I solved this issue by just added following line in my root App.js file

 home: { screen: home,
    navigationOptions:{
      header:null
    } }

answered Mar 17 '20 at 08:43

Divyata Chauhan

279
4
21

score 0 · Answer 3 · answered Feb 23 '22 at 14:19

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

2 headers in screen in Dashboard navigator

3 Answers3