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.

Calling method from navigationOption header button
Calling method from navigationOption header button
  • The simple way to store context outside the class globally like let _this = null; 

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

 

1. Create a new project


2. Install packages

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


3. Import the following components


4. Implement react-navigation in class

Implement navigationOption like below

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.


5. See the full source code

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


6. Output:

Calling method from navigationOption header button
Calling method from navigationOption header button

Thank you 🙂

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *