CODEWITHSUNDEEP
react-nativereact-navigationtabnavigator
Ahmed Samy
Ahmed Samy

Reputation: 1046

How to execute a function upon navigating to the initial route of the tab navigator?

I have a tab navigator with 3 routes ... the initial route which is in the middle has a function that gets executed upon mounting ... the purpose of this function is to be executed every time the user heads to that initial route whether by swiping, tapping on the navbar or tapping the back button on Android. So is there a life cycle method that gets executed in which I can put my function in such case ? or is there a way to manipulate the navigation options to do so ?

Thanks.

Upvotes: 2

Views: 296

Answers (1)

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

Basically you want to track which screen is active at the moment and execute your function. Its doable using the onNavigationStateChange

export default () => (
  <AppNavigator
    onNavigationStateChange={(prevState, currentState) => {
      const currentScreen = getCurrentRouteName(currentState);
      const prevScreen = getCurrentRouteName(prevState);

      if (currentScreen == initialScreen) {
        // Execute the function here
      }
    }}
  />
);

Have a read on the documentation: onNavigationStateChange

Upvotes: 1

Related Questions