Here in this tutorial we will see how to reload the bottom tab in React Native. There could be many different ways of doing it. Look at my page
This is the app, and I want to loaded the home page data, once tap back on the bottom navigation tab the first item.
One possible solution is the below code
React.useEffect(() => {const unsubscribe = props.navigation.addListener('focus', () => {
// call your api here
});
return unsubscribe;
}, [navigation]);
But for some reasons, the above code, did not work with me. Even though I was able to call the api, but it did not trigger, rerender of the ui. So I ended up having the old data in the screen.
Another possible solution is using
unmountOnBlur:true
The above property could be set anywhere in the Tab.Screen tab.
Here I put unmountOnBlur:true did the trick and my home screen tab reloaded. But it also comes with a problems. Every time, you click on the first tab, it reloads the data again. This could put a lot of pressure on serverside, since you get fresh data on each click. This is redundant and not very elegant soltution.
To optimize this problem, one can set condition like boolean and check that set unmountOnBlur to true or false based on that.
