React Native React Navigation Header Button Event

Question

Hello I 'm trying to bind a function in my Navigator Right Button,

But It gives error.

This is my code:

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import Modal from 'react-native-modalbox';
import { StackNavigator } from 'react-navigation';
import {
   Text,
   View,
   Alert,
   StyleSheet,
   TextInput,
   Button,
   TouchableHighlight
} from 'react-native';

import NewsTab from './tabs/news-tab';
import CustomTabBar from './tabs/custom-tab-bar';

export default class MainPage extends Component {
    constructor(props) {
        super(props);  
    }

    alertMe(){
        Alert.alert("sss");
    }

    static navigationOptions = {
        title: 'Anasayfa',
        headerRight: 
            (<TouchableHighlight onPress={this.alertMe.bind(this)} >
                <Text>asd</Text>
             </TouchableHighlight>)        
    };

    render() {
        return(
            <View>

            </View>
        );
    }
}

And Get error like this:

undefined is not an object (evaluating 'this.alertMe.bind')

When I use this method in render function it is working great but in NavigatonOption I cant get handled it. what can I do for this problem.

Answer 1

You should use this in you navigator function

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
        title: '[ Admin ]',
        headerTitleStyle :{color:'#fff'},
        headerStyle: {backgroundColor:'#3c3c3c'},
        headerRight: <Icon style={{ marginLeft:15,color:'#fff' }} name={'bars'} size={25} onPress={() => params.handleSave()} />
    };
};

use the componentwillmount so that it can represent where you are calling function .

componentDidMount() {
this.props.navigation.setParams({ handleSave: this._saveDetails });
}

and then you can write your logic in the function

_saveDetails() {
**write you logic here for **
}

**no need to bind function if you are using this **