CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Juko
Juko

Reputation: 303

React Navigation check if previous screen exists

I am looking desperately for a possibility to check if a previous screen exists in ReactNavigation.

Using this.props.navigation.goBack() returns false if no previous route exists, but I can not use it because if a previous route exists I get redirected.

Is there a possibility to check if I opened the app instead of navigated from another screen to the Home screen?

Thank you. I am not using Redux. It would make such stuff easier but I would like to avoid using it at the moment.

Upvotes: 13

Views: 34092

Answers (5)

copperfox
copperfox

Reputation: 101

As of React Navigation 5 you can use useNavigationState hook inside functional component this way:

const routesLength = useNavigationState(state => state.routes.length);
console.log('routesLength', routesLength);

If routesLength > 1 then it is not the first screen in stack

Or you can use navigation.canGoBack()

Upvotes: 10

kuldip bhalodiya
kuldip bhalodiya

Reputation: 1071

It's completely working for me.... If you want to find out previous route/screen name from navigation stack in react native app so you can use this function.

export const previousRouteName = (navigation) =>{
  let navRoutes = navigation.dangerouslyGetParent().state.routes;
  if (navRoutes.length >= 2){
    return navRoutes[navRoutes.length - 2].routeName
  }
  return navigation.state.routeName
}

How to use?

previousRouteName(props.navigation);

Hope you like and helpful to you K00L ;)

Upvotes: 0

Esha Singh
Esha Singh

Reputation: 29

const navigateAction = NavigationActions.navigate({
  routeName: 'NEXT_SCREEN',
  action: NavigationActions.navigate({ routeName: 'NEXT_SCREEN', params: { previous_screen: 'CURRENT_SCREEN' } }),
});
this.props.navigation.dispatch(navigateAction);

Upvotes: 0

nwales
nwales

Reputation: 3561

There is an easier way:

if(this.props.navigation.isFirstRouteInParent()) {
    //a previous screen does not exist
} else {
    //a previous screen does exist
}

Upvotes: 8

Théo dvn
Théo dvn

Reputation: 940

What could be a solution (not sure that it's the best one) would be to spend in the param object the previous screen. With that, if the params exists would mean that a previous screen exists.

For example:

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: { previous_screen: 'CURRENT_SCREEN' },

  action: NavigationActions.navigate({ routeName: 'NEXT_SCREEN' }),
});

this.props.navigation.dispatch(navigateAction);

And then in the next screen:

const { navigation } = this.props;
if (navigation.state.params && navigation.state.params.previous_screen) {
  // A previous screen exists
} else {
  // No previous screen
}

Upvotes: 17

Related Questions