React Navigation - goBack() is automatically invoked for stack navigator screen

2
votes

I have 3 stack navigator screens (Home, Item List, Item Detail -> same order) inside drawer navigator and all three screens are hooked up to redux store with connect() helper.

When I do navigate('ItemDetail') from ItemList, it navigates to the screen and immediately comes back to ItemList screen. I am not sure why.

Following is my navigation structure - 

const AppStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    ItemList: {
      screen: ItemListScreen
    },
    ItemDetail: {
      screen: ItemDetailScreen
    }
  },
  {
    initialRouteName: 'Home'
  }
);

const DrawerNav = createDrawerNavigator(
  {
    DrawerApp: AppStack
  },
  {
    drawerPosition: 'right'
  }
);

const SwitchStack = createSwitchNavigator(
  {
    Loading: Loading,
    Auth: AuthStack,
    App: DrawerNav
  },
  {
    initialRouteName: 'Loading'
  }
);

This is how my each navigation screen component looks - 

export class ProviderListScreen extends Component {
  render() {
    const { navigation } = this.props;
    // ItemList is hooked up to Redux via connect() helper
    return <ItemList navigation={navigation} />; 
  }

On my ItemDetail component, I get the Item data through route params from ItemList screen and I also dispatch an action (To reset some part of the store state) in component did mount. As soon as I do that, previous screen (ItemList) is automatically rendered.

Inside item detail, I make API call to create booking for that item and the booking object is managed by redux. Once I land on the ItemDetail, I reset the booking object for new booking data.

Here is the snippet of ItemDetail's componentDidMount - 

componentDidMount() {
    this.props.resetItembooking();
  }

I am not sure what is causing this behaviour. If I remove the ItemList screen and jump directly to ItemDetail screen from HomeScreen, this issue does not occur.

Any help is appreciated.

2
react-nativereact-reduxreact-navigation
Can you post your ItemDetail code, especially componentDidMount? - dols3m
@dols3m Updated the question - Awadhoot
I'm afraid this still doesn't give out the source of the issue. First, is there any place in your code (across all components) where you make use of the back/goBack functions? Second, do you let react-navigation manage its own state, or is it also hooked up to Redux? - dols3m
Ok, so I am not using goBack() anywhere in my code (was using default behaviour) and navigation has its own state, not hooked up with redux. - Awadhoot
Ok, so I found one workaround for this problem. Previously, I was passing the data needed for ItemList via route param from Home screen. Same thing was done from ItemList to ItemDetail - like navigate(nextScreen, params) and accessing like - navigation.getParam(paramName) in next screen. I removed the entire "passing by params" chain and used redux to keep the state and pass it via mapStateToProps. This got it working. Is there any limitation on passing route params to next (n) stack nav screens? - Awadhoot

2 Answers

0
votes

I had the exact same problem however I tried the answer given in the original post comments sections given by Awadhoot but this did not work for me.

For anyone still trying to solve this issue, ensure you do not have any recurring intervals setup. Therefore you should always clear intervals before navigating away:

clearInterval(this.intervalId);
0
votes

In react-navigation 5 you can use the useIsFocused hook for that:

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

// ...

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

From the docs: https://reactnavigation.org/docs/use-is-focused/