CODEWITHSUNDEEP
react-nativereact-navigation
Kumar
Kumar

Reputation: 536

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

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

Upvotes: 1

Views: 2544

Answers (2)

Hassan Kandil
Hassan Kandil

Reputation: 1866

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

Upvotes: 1

Engr.Aftab Ufaq
Engr.Aftab Ufaq

Reputation: 6272

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/

Upvotes: 5

Related Questions