How to make stack navigator header title dynamic while having nested tab navigators

Question

I wish to make the stack navigator header title dynamic while having nested tab navigators. Here is the code

// ProjectDetailNavigator is a screen in a stack navigator
const ProjectDetailNavigator = TabNavigator(
{
    Overview: { screen: ProjectOverview },
    Detail: { screen: ProjectDetail },
},
{
tabBarOptions: {
    style: {
        backgroundColor: 'white',
    },
    labelStyle: {
        color: 'black'
    },
}
});


    ProjectDetailNavigator.navigationOptions = {    
       title: 'Dynamic Project Title',
        header: {
           style: {
              elevation: 0,
              shadowOpacity: 0,
             }
         }
      };

      export default ProjectDetailNavigator;

Possible solution i have tried but to no avail is as follows

    ProjectDetailNavigator.navigationOptions = function ({navigation}) {
    return {    
    title: `${navigation.state.params.title}` ,
header: {
    style: {
        elevation: 0,
        shadowOpacity: 0,
           }
        }
    };
};

What do you mean by nested tabs, from what i see you have an app containing a tabBar, do you want to have a title on navBar for each tab ? is this what your asking for ? — TheFuquan
– TheFuquan, Commented May 12, 2017 at 16:46
The tabBar is nested is nested under a stacknavigator whose title I want to make dynamic. Hence ProjectDetailNavigator is a screen in stack navigator — Paul Nyondo
– Paul Nyondo, Commented May 12, 2017 at 17:38

Samuli Hakoniemi · Accepted Answer · 2017-05-15 12:10:41Z

1

Inside the component:

static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.title}`
});

answered May 15, 2017 at 12:10

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Nyondo Over a year ago

inside which component ? ProjectDetailNavigator

Samuli Hakoniemi Over a year ago

Inside ProjectOverview or ProjectDetail... where you want to display it. Or do you want to display it in the tabBarLabel?

Paul Nyondo Over a year ago

the header i wish to make dynamic is that of ProjectDetailNavigator not the one for ProjectOverview or ProjectDetail or tabBarLabels

Collectives™ on Stack Overflow

How to make stack navigator header title dynamic while having nested tab navigators

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related