React navigation custom header

Question

Im trying to use react-navigation custom header like this

static navigationOptions = {
    header: <EventHeader
        subscribestatus={this.props.navigation.getParam('status')}
        confirmation={this.props.navigation.getParam('confirmation')}
        deleteSubscribe={this.deleteSubscribe}
        joinEvent={this.joinEvent}
        onPress={()=>this.props.navigation.goBack()}
        eventname={this.props.navigation.getParam('title')}
    />
};

This header getting params previous screen as you see but im getting undefined is not an object (evaluating 'this.props.navigation')

What i am doing wrong and how can i solve this ?

David · Accepted Answer · 2018-12-31 12:10:26Z

1

I hope you found the solution, but for other people which could come here :

navigationOptions can be a function which will pass navigator as first argument and can return an object. So you could write it like so :

static navigationOptions = (navigator) => { return { header: ( <EventHeader subscribestatus={navigator.navigation.getParam('status')} confirmation={navigator.navigation.getParam('confirmation')} //deleteSubscribe={this.deleteSubscribe} //joinEvent={this.joinEvent} onPress={()=>navigator.navigation.goBack()} eventname={navigator.navigation.getParam('title')} /> ) } } Unfortunately, you will not have access to this.deleteSubscribe or this.joinEvent

edited Dec 31, 2018 at 12:10

answered Dec 31, 2018 at 11:59

David

2662 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

React navigation custom header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related