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.

score 52 · Accepted Answer · answered Aug 09 '17 at 17:07

52

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 **

answered Aug 09 '17 at 17:07

HpDev

2,789
1
15
20

@ashutosh_pandey Just one question. Can I use this.state in _saveDetails() function? – Heril Muratovic Apr 10 '18 at 17:23
@HerilMuratovic yes you can use it . Sorry for late response. – HpDev May 08 '18 at 10:20
2

To use this.setState, bind like this: `this.props.navigation.setParams({ handleSave: this._saveDetails.bind(this) });` – a_rahmanshah May 04 '19 at 11:54
i am doing the same but my button is not showing up in the header .. Why is this so ? – Ali Yar Khan Aug 28 '19 at 06:55

score 3 · Answer 2 · answered Jul 19 '18 at 17:27

May be same as above ...

   class LoginScreen extends React.Component {
      static navigationOptions = {
        header: ({ state }) => ({
          right: <Button title={"Save"} onPress={state.params.showAlert} />
        })
      };

      showAlert() {
        Alert.alert('No Internet',
          'Check internet connection',
          [
            { text: 'OK', onPress: () => console.log('OK Pressed') },
          ],
          { cancelable: false }
        )
      }

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

      render() {
        return (
          <View />
        );
      }
    }

score 3 · Answer 3 · answered Mar 23 '21 at 10:02

react-navigation v5 version would be:

export const ClassDetail = ({ navigation }) => {
  const handleOnTouchMoreButton = () => {
    // ...
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity onPress={handleOnTouchMoreButton}>
          <Icon name="more" />
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  return (
    // ...
  )
}

score 1 · Answer 4 · answered Aug 17 '20 at 04:24

This is for navigation v4. You need to modify navigationoptions outside of the functional component. Your button event needs to pass a param via navigation.

pageName['navigationOptions'] = props => ({
    headerRight:  ()=>
         <TouchableOpacity onPress={() => props.navigation.navigate("pageRoute", 
{"openAddPopover": true})  } ><Text>+</Text></TouchableOpacity>    })

and then in your functional component, you can use that param to do something like this:

useLayoutEffect(() => {
   doSomethingWithYourNewParamter(navigation.getParam("openAddPopover"))
}, [navigation])

React Native React Navigation Header Button Event

4 Answers4