CODEWITHSUNDEEP
reactjsreact-nativereact-native-ios
TRINA CHAUDHURI
TRINA CHAUDHURI

Reputation: 665

how do I rerender the Screen A when I go back to screen A from Screen B?

Behavior expected :

But Screen A is not rerendering until I reload or make any change manually

Screen A useffect() code:

const [nutrition_assessment_age, setnutritionassessmentage] = useState(null);
useEffect(() => {
    console.log('nutri assess age', nutrition_assessment_age);
    getNutritionAssessmentage();
    getHomeTabMainAPI();
    if (isValidObject(User) && isValidObject(mSChildId)) {
      if (loadApi == true) {
        getHomeTabMainAPI();
        setLoadApi(false);
        setSelectedChild(getChildFromUserChildrenList());
      }
    } else {
      if (!isValidObject(User) || !isValidObject(mSChildId)) {
        getUserData();
      }
    }
  }, [User, mSChildId, loadApi, nutrition_assessment_age]);

Screen C Backhandler Code:

useEffect(() => {
    retreiveData();
    BackHandler.addEventListener('hardwareBackPress', handleBackButtonOnnclick);
    return () => {
      BackHandler.removeEventListener(
        'hardwareBackPress',
        handleBackButtonOnnclick,
      );
    };
  }, []);
function handleBackButtonOnnclick() {
    storeData();
    navigation.navigate('Home', {
      screen: 'Home',
      params: {
        assessment_age: assessment_age,
      },
    });
    return true;
  }

const storeData = async () => {
    try {
      await AsyncStorage.setItem(
        'assessment_age',
        assessment_age.toString(),
      ).then(
        console.log('assessment age stored -->', assessment_age.toString()),
      );
    } catch (e) {
      console.log('assessment age store error--->', e);
    }
  };

Hopefully I have clarified my problem which is with every change in nutrition_assessment_age in Screen A I want to rerender the Screen

Please let me know how would I be able to do it. Kinda stuck since long. Any leads would be great.

As per suggested if I cange my useEffect to

React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      console.log('nutri ass age', nutrition_assessment_age);
      getNutritionAssessmentage();
      
      if (isValidObject(User) && isValidObject(mSChildId)) {
        if (loadApi == true) {
          getHomeTabMainAPI();
          setLoadApi(false);
          setSelectedChild(getChildFromUserChildrenList());
        }
      } else {
        if (!isValidObject(User) || !isValidObject(mSChildId)) {
          getUserData();
        }
      }
    });

    return unsubscribe;
  }, [User, mSChildId, loadApi, nutrition_assessment_age,navigation]);

It is showing up blank, no data is being fetched

Upvotes: 0

Views: 904

Answers (1)

Antonio Erdeljac
Antonio Erdeljac

Reputation: 3244

I would make use of react-navigation lifecycle methods, check them out here.

I've experienced the same kind of trouble as you when using react-navigation, since react lifecycles do not fire on navigation changes, thus I would resort to applying this:

Example:

Try applying this to Screen A:

import { useFocusEffect } from '@react-navigation/native';

function ScreenA() {
  useFocusEffect(
    React.useCallback(() => {
      // Screen A is focused, initialize the state, or do whatever checking you need.

      return () => {
        // Screen A is unfocused, clear the state, clear async storage, or whatever you need
      };
    }, [])
  );

  return <div>Screen A!</div>;
}

You can also apply this to react's hooks like this:

function ScreenA({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });

    return unsubscribe;
  }, [navigation]);

  return <div>Screen A!</div>;
}

Upvotes: 1

Related Questions