Getting Navigation Props in Custom React Navigation Title

Question

I have a custom title in my (simple) React Navigation StackNavigator, looks like this:

const RootStack = StackNavigator({
  Home: {
    screen: HomeScreen
  }
}, {
  navigationOptions: {
    headerTitle: <GradientHeader title={this.state.navigation.title} />
  }
});

But this returns undefined is not an object (evaluating 'this.state.navigation')

How can I pass the views' unique titles to the custom header?

Answer 1

per the docs, you need to give navigationOptions as function to access navigation:

navigationOptions: ({ navigation }) => ({
       headerTitle: <GradientHeader title={navigation.state.params.title} />,
    }),