React-Navigation display dynamic headers on tabNavigation

Question

I have this code:

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from './modules/Home/HomeScreen';
import DetailScreen from './modules/Home/DetailScreen';
import React from 'react';

const tabNav = createBottomTabNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: { screen: DetailScreen },
    },
);
//
tabNav.navigationOptions = ({ navigation }) => {
    let { routeName } = navigation.state.routes[navigation.state.index];
    console.log('navigation: ', navigation.state);
    let title;
    if (routeName === 'Home') {
        title = 'Home';
    } else if (routeName === 'Details') {
        title = 'Detail';
    }
    return {
        title,
        headerMode: 'none',
    };
};
//

const RootNavigator = createStackNavigator(
    {
        Main: tabNav,
    },
    {
        navigationOptions: {
            headerMode: 'none',
            headerTransparent: true,
        },
    },
);

export default RootNavigator;

This is code is working well.

My question is, I want to change this section become dynamic. I've tried to put stackNavigator inside the tab but keep returning me error.

if (routeName === 'Home') {
    title = 'Home';
} else if (routeName === 'Details') {
    title = 'Detail';
}

Any suggestion?

Update:

I've tried to put stackNavigator inside my screen:

const tabNav = createBottomTabNavigator(
    {
        Home: createStackNavigator({
            screen: HomeScreen,
            navigationOptions: {
                title: 'Home 2',
            },
        }),

        Details: { screen: DetailScreen },
    },
);

It keeps return me The component for route 'navigationOptions' must be a React component.

Doesn't that answer your question? I'm happy to help but you need to think a bit more deeply about what that error means. must be a React component. Is the value that you're setting on navigationOptions a React component? — Michael Curry
– Michael Curry, Commented Aug 24, 2018 at 11:43

Iso · Accepted Answer · 2018-09-19 09:13:42Z

the StackNavigator is misconfigured, try this :

const tabNav = createBottomTabNavigator({
    Home: {
        screen: createStackNavigator({
            homeSreen: {
                screen: HomeScreen,
                navigationOptions: {
                    title: 'Home 2',
                },
            },{
                initialRouteName: 'homeScreen',
        })
    },
    Details: { screen: DetailScreen },
});

or

const HomeStack = createStackNavigator({
    home: {
      screen: HomeScreen,
      navigationOptions: {
        title: 'Home 2',
      },
    },
  },{
      initialRouteName: 'home',
  });

 const tabNav = createBottomTabNavigator({
    Home: { screen: HomeStack },
    Details: { screen: DetailScreen },
 });

and

https://reactnavigation.org/docs/en/stack-navigator.html

and you can set title per screen:

const tabNav = createBottomTabNavigator(
    {
        Home: {
            screen: HomeScreen,
            navigationOptions: {
                title: 'Home',
            },
        },
        Details: {
            screen: DetailScreen,
            navigationOptions: {
                title: 'Details',
            },
        },
    },
);

https://reactnavigation.org/docs/en/tab-navigator.html#navigationoptions-for-screens-inside-of-the-navigator

Collectives™ on Stack Overflow

React-Navigation display dynamic headers on tabNavigation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related