React Native run a function on BottomTab Navigator screen on load?

0
votes

I have a Navigation Bar built using createBottomTabNavigator, this is it's own component that is added to app.js.

When A user presses one of the buttons and are taken to a new screen, I would like for a function to load which reloads data from AsyncStorage. I am struggling to get this working, I have it loading once using useEffect, however that does not run again if I leave the page and come back.

What is the best option for this?

Thanks

1
reactjsreact-native
Can you please add some code? – Ashwin Mothilal

1 Answers

0
votes

As it's said in the documents you have to set a listener to check if the component is focused.

import * as React from 'react';
import { View } from 'react-native';

function ProfileScreen({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // The screen is focused
      // Call any action
    });

    // Return the function to unsubscribe from the event so it gets removed on unmount
    return unsubscribe;
  }, [navigation]);

  return <View />;
}