How do I update react-native component, when click on tab on bottom Tab Navigator

Question

I am using bottom tab navigator in React-native for Navigation. When I switches tab, component are not updating. Pls let me know how can I update/refresh whole component when I tap on tab at bottom Tab Navigator

Answer 1

Here is a simple solution.

import { useFocusEffect } from '@react-navigation/native';
useFocusEffect(
   React.useCallback(() => {
       console.log("Function Call on TAb change")
   }, [])
);

Here is the link you can read more. https://reactnavigation.org/docs/function-after-focusing-screen/

Answer 2

You can use Navigation listener check Navigation Events, when screen gets focused it will trigger a function like this:

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    //Your refresh code gets here
  });
  return () => {
    unsubscribe();
  };
}, [navigation]);

And class component like this:

  componentDidMount() {
    this._unsubscribe = navigation.addListener('focus', () => {
      //Your refresh code gets here
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

If you want to force update check this question