CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Paul Nyondo
Paul Nyondo

Reputation: 2284

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

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

Upvotes: 1

Views: 1061

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

Inside the component:

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

Upvotes: 1

Related Questions