Understanding the Lifecycle of React Navigation to Add Custom Events to Your React Native App
If you’ve ever built or looking to build a React Native application, chances are that you will use React Navigation, a popular Javascript library, to handle navigation around your app.
You can quickly use React Navigation to create Switch Navigators, Stack Navigators and much more. It’s an extremely helpful library that makes navigation a breeze.
However, do you really understand the lifecycle of React Navigation and how can use that understanding to add custom events related to navigation? That’s what I will be covering within this post.
The Basic Lifecycle
To begin with, it’s important to understand that React Navigation works with the fundamental React lifecycle methods.
For example, think of two screens in an event planning app: Home Screen and Event Details Screen. These two screens are configured within a Stack Navigator. When the app is loaded, React Navigation will push the Home Screen onto the stack. Since the Home Screen was just pushed to the stack, it will follow the usual React lifecycle.
If you’re not familiar with the React lifecycle, you can refer to this post. Essentially the Home Screen will run the constructor function, render the screen, then componentDidMount() and onwards through the cycle.
But what do you think happens to the Home Screen when we press on an event and navigate to the Event Details Screen. First of all, the Event Details Screen will be pushed onto the stack and run its constructor function, render the screen and onwards. But what happens to the Home Screen?
In React Navigation, the Home Screen would not get unmounted since the screen is still within the stack. The componentWillUnmount() function will not be ran for the Home Screen. So all the states and data is saved for the Home Screen.
However, what if we navigate from the Event Details Screen back to the Home Screen? Well, since we are going to be popping the Event Details Screen off the stack, the Event Details Screen will run its respective componentWillUnmount() function.
The Home Screen will not run its componentWillMount() function since the Home Screen was on the stack this whole time.
That’s a high level understanding of the lifecycle of React Navigation and how it builds on top of React’s lifecycle. Given this information, we can now talk about the custom events that React Navigation has in order for you as a developer to insert custom events within React Navigation’s lifecycle.
Custom Events in React Navigation
React Navigation can emit various events that happen. For example, if a screen is being pushed to or removed from the stack, it can emit an event.
There are three core events that React Navigation emits: focus, blur and state.
The focus event is emitted whenever a screen comes into the focus, hence the name focus. The blur event is emitted whenever a screen goes out of focus, hence the name blur. The state event is emitted whenever the navigator’s state changes.
In addition to these three core events, each navigator type have their own events they can emit. For example, a Stack Navigator can emit the transitionStart and transitionEnd event. A Tab Navigator can emit the tabPress event. There are many other events for each navigator type. You can view these events by going to the documentation for each navigator type.
The Callback Function
In order to listen to these events emitted by React Navigation, you have to use a callback function. The callback function will receive an event object as its argument. The event object contains the following properties: data, target and preventDefault.
The data property is any additional data that is passed by the navigator. If there is no data passed by the navigator, the data will be undefined.
The target property is the route key for any screen that should receive the event. If there is no specific screen that should receive the event, this property will be undefined.
The preventDefault property is a method that can be passed by some events. For example, on tabPress, you can prevent the user from switching tabs.
Listening to Events
There are two distinct ways you can define your callbacks to listen to events. The first method is to add listeners to your navigation prop using the .addListener() method. The second method is to pass in a listeners prop to the screen.
Adding Listeners to Navigation Prop
The .addListener() method takes two arguments. First is the type of event. This could be tabPress, focus, blur, etc. The second is a callback function that should be called when the event happens.
The .addListener method will return a function that you can return to unsubscribe from the event. You can use this as a cleanup function within a useEffect() hook.
Below is an example of how you would use .addListener():
Pass in Listeners Prop to Screen
The second method is to pass in the listener function through the props of a screen. Below is an example of how you can accomplish this:
Conclusion
In this post, we went over the lifecycle of React Navigation and how it works with React’s in-built lifecycle. Using this knowledge of the lifecycle of React Navigation, we went over how to add listeners to these specific events so you can execute some function within the lifecycle of React Navigation.
If you have any questions or just want to talk about React and React Native, feel free to reach out to me. My username is @SunnyChopper on pretty much every social media platform out there, even Xbox Live.
Hopefully this helps you understand React Navigation better.
