How to dynamically change the header title text in a react native app?

Question

I have been struggling with something that sounds simple. I have been trying to get button when onpressed is called. Have tried several combinators but nothing works. Any ideas?

export default class JobScreen extends React.Component {

    constructor(props) {
        super(props);
    }

    static navigationOptions = ({navigation}) => ({
        title: "Chat with"
    });

    onPressLearnMore(nav) {

        // how do I update the title header 

        console.log("On Pressed" + nav)
    }

    render() {
        const {navigate} = this.props.navigation;


        return (
            <View style={styles.container}>
                <Button
                    onPress={() => {this.onPressLearnMore(navigate)}}
                    title="Learn More"
                    color="#841584"
                />

            </View>
        );
    }
}

hyb175 · Accepted Answer · 2019-02-08 23:48:07Z

5

Since the navigationOptions has access to the navigation object, you can set some param on the current screen with this.props.navigation.setParam({ title: ‘some title’ }) and then access it in navigationOptions like this

static navigationOptions = ({ navigation }) => {
  const { state: { params = {} } } = navigation;
  return {
    title: params.title || ‘default title’,
  };
}

edited Feb 8, 2019 at 23:48

answered Aug 20, 2017 at 15:17

hyb175

1,2918 silver badges14 bronze badges

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

5 Comments

hyb175 Over a year ago

You gotta tell me more for me to help you instead of straight up down voting it lol. Anyway, if you want help, can you provide the error and how are you using the snippet?

Arthur Attout Over a year ago

I copy pasted the whole block, and it resulted in syntax errors. Was there something I was supposed to modify in it ?

hyb175 Over a year ago

This snippet only works in the context of the original question. So unless you provide how exactly you are using it, it’s hard for me to help you

Arthur Attout Over a year ago

Even when I take the original code with your snippet and paste it in PHPStorm, I have syntax errors. Right inbetween const and {

Arthur Attout Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

How to dynamically change the header title text in a react native app?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related