React navigation
v2
is a library for handling navigation in React Native
. When you are using Tab / Screen, maybe you only want to render it when it is been displayed. Otherwise, something like re-rendering multiple lists in multiple tabs. That’s a disaster… Let’s see how to do that.
If you come from the web. Just like in react-router
, in react navigation, the navigation
prop will be changed to cause re-render. And when you are like me, use one same list component for multiple tabs, you will have problems when trying to figure out how to not-render and re-render at the proper time. But that is something we will solve today.
1. How to know that a tab is been entered or exited
React navigation provides a this.props.navigation.addListener
method where you can subscribe the events.
you can use it like this
1 | componentDidMount() { |
And unsubscribe like this:
1 | componentWillUnmount() { |
- You can add the listeners to an array when
componentDidMount
- unsubscribe them when
componentWillUnmount
- Then you can use
this.state.isDisplayed
to check the status
One crucial thing to remember, when you subscribe using that arrow function
addListener('didFocus', () => {})
, the context inside that lambda is not your current component, so you need to refer to an outside variable like I useself.blahBlah
rather than refer tothis.blahBlah
directly, because that is not the same. Thethis
you will get in that lambda is the global object.
2. You can use 4 events
According to the official doc:
willBlur
- the screen will be unfocusedwillFocus
- the screen will focusdidFocus
- the screen focused (if there was a transition, the transition completed)didBlur
- the screen unfocused (if there was a transition, the transition completed)
3. Let’s implement shouldComponentUpdate
Two cases here:
- The screen is about to displayed (from
false
totrue
) - The screen is been displayed (
true
) butprops
has been changed (which means its content is updating, the component should re-render)
1 | shouldComponentUpdate( |
You might think why not just
nextState.isDisplayed === true
. Well, not only it will not cause re-rendering when the screen has been displayed but props has been changed. But also it will cause the tab that is been exited to re-render. Which means, when exittab2
totab1
, bothtab1
andtab2
will be re-rendered which is not what we want.
4. End
Anyway, you get it. Hope it helps.