CODEWITHSUNDEEP
react-native
techarch
techarch

Reputation: 1141

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

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

Upvotes: 3

Views: 5512

Answers (1)

hyb175
hyb175

Reputation: 1291

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

Upvotes: 5

Related Questions