Calling method from navigationOption header button

How to call a function from naviagtionOption react-native

While developing applications react-native it is important to design app with clean navigation, as we know React-native uses React-navigation to navigate between screens and navigation header is most common in the application so in this article we going to learn about calling class method in navigationOption header button, also how to update values in navigationOptions. to do this you need to install React-navigation library and implement react-navigation in your application, there are multiple ways to call the function from navigationOption.

• The simple way to store context outside the class globally like let _this = null; 

let _this = null;

export default class Appextends Component {
    static navigationOptions = ({ navigation }) => ({
        // ......
            onPress={() => _this.onClick() }>
        // ......
        )
    });
   componentDidMount() {
       _this = this;
   }
    onClick() {
        Alert.alert(
    'Techup.co.in',
    'My Cart click',
    [    
      {text: 'OK', onPress: () => console.log('OK Pressed')},
    ],
    {cancelable: false},
  );
}

But this will effects when you use multiple instances, so let’s talk about the second method

1. Create a new project

react-native init DempApp

2. Install packages

Install the following libraries in your project to use react-navigation

npm install react-navigation
npm install react-native-gesture-handler
npm install react-native-reanimated
npm install react-native-screens

3. Import the following components

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity,Alert} from 'react-native'

4. Implement react-navigation in class

Implement navigationOption like below

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'Techup.co.in',
         headerStyle: {
             backgroundColor: '#0570E9',
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         },
         
         headerRight:(
           <TouchableOpacity 
             style={{padding:5, marginHorizontal:10}} 
             onPress={()=>params.onPressMethod()}>   
             <Text style={{color:"#FFFFFF"}}>My Cart</Text>
           </TouchableOpacity>)      
       }
    };

As you see in the above code, you can get params using const { params } = navigation.state, and use these params in navigationOption using params.onPressedMethod() where onPressedMethod is a method which we are calling from header navigation. before this, you need to pass this onPressedMethod method from componentDidMount() like below.

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

5. See the full source code

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity,Alert} from 'react-native'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//Define a color for toolbar
global.backgroundColor = '#176abf';


export default class App extends Component {


  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'Techup.co.in',
         headerStyle: {
             backgroundColor: '#0570E9',
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         },
         
         headerRight:(
           <TouchableOpacity 
             style={{padding:5, marginHorizontal:10}} 
             onPress={()=>params.onPressMethod()}>   
             <Text style={{color:"#FFFFFF"}}>My Cart</Text>
           </TouchableOpacity>)      
       }
    };

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

 onClickMethod=()=>{
  Alert.alert(
    'Techup.co.in',
    'My Cart click',
    [    
      {text: 'OK', onPress: () => console.log('OK Pressed')},
    ],
    {cancelable: false},
  );
 }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to Home!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 35,
    textAlign: 'center',
    margin: 10,
    fontFamily: 'AbrilFatface-Regular',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    fontFamily: 'AbrilFatface-Regular',
    fontSize: 16,
  },
});

As we see in the above code, we are passing method through params in componantDidMount() method and calling it from React navigationOption.

6. Output:

Thank you 🙂