React Native navigation.navigate not working on headerRight button

Question

I face an issue when I click on header right button on navigation bar. I need to move next screen from headerRight button but I am getting 'undefined is not an object (evaluating _this4.props. navigation)' .

Here is my code please check me and help me.

static navigationOptions = ({navigation}) => ({
        headerRight: (
            <TouchableOpacity onPress={() => this.props.navigation.navigate('Setting')}
                style={{right: Platform.OS === 'ios' ? 
                       Dimensions.get("window").height < 667 ?  '10%' : '30%' : '25%', 
                       backgroundColor: 'transparent', 
                       paddingLeft: 15}}>
                <Image style={{width: 20, height: 20}} 
                       source={require('../assets/icons/setting/setting.png')}/>
            </TouchableOpacity>
        ),
});

Answer 1

You are passing navigation as a prop in navigationOptions , so that will be available inside as navigation directly not with this.props.navigation .

static navigationOptions = ({navigation}) => ({
        headerRight: (
            <TouchableOpacity onPress={() => navigation.navigate('Setting')}
                style={{right: Platform.OS === 'ios' ? 
                       Dimensions.get("window").height < 667 ?  '10%' : '30%' : '25%', 
                       backgroundColor: 'transparent', 
                       paddingLeft: 15}}>
                <Image style={{width: 20, height: 20}} 
                       source={require('../assets/icons/setting/setting.png')}/>
            </TouchableOpacity>
        ),
});