How to change dynamically the header title in a functional component?

Share on facebook
Share on google
Share on twitter
Share on linkedin


I have a basic stack navigator:

const screens = { Home: { screen: Home, navigationOptions: { title: "Home" } }, Profile: { screen: Profile, navigationOptions: { title: "Profile" } } }; export default createAppContainer(createStackNavigator(screens)); 

How to change the title "Profile" on the screen "Profile" depending on props? In React.js, I'd simply create a Link in the parent component with a dynamic path such as <Link to=profile/${username}>`, and then retrieve it thanks to props.match.params .

In React Native, the only way to pass props between pages seems to be through navigation.navigate("Profile", props) . So if the profile belongs to a user named "Joe", how can I dynamically update navigationOptions.title in my stack navigator?

I've read the official react-navigation' doc, but they only explain how to do it with class components. Static can't work with a functional component such as mine:

export default function Profile({ navigation }) { const { name, details } = navigation.state.params; return ( // do stuff ); } 


submitted by /u/MonsieurLeland
[link] [comments]

Sign up for our Newsletter

Agree to our privacy policy.