CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
SoldierCorp
SoldierCorp

Reputation: 7700

React Navigation: Component is not being unmounted on pop or back button #5775

I am having an issue when I navigate from Home component that contains a list of companies and I press in a button to load the Company view, the data is being loaded but when I press back in Android is returning to Home and when I press in a different company button to load its details, is rendering the same view with the same previous data, that means, the component is not being updated/unmounted.

These are my routes

const drawerConfig = {
  initialRouteName: 'Home',
  contentComponent: SideMenu,
  drawerWidth: width,
}

const MainDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home,
    },
    Company: {
      screen: Company,
    },
    Gifts: {
      screen: Gifts,
    },
    Contact: {
      screen: Contact
    }
  },
  drawerConfig,
);

const InitialStack = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      path: 'menu/',
    }
  },
  {
    initialRouteName: 'Menu',
    headerMode: 'none',
  }
);

const SwitchNavigator = createSwitchNavigator(
  {
    Init: InitialStack,
    App: MainDrawerNavigator,
  },
  {
    initialRouteName: 'Init',
  }
);

const AppContainer = createAppContainer(SwitchNavigator);

export default AppContainer;

I am navigating from Home to Company with this

goToCompany = company => event => {
    this.props.navigation.navigate('Company', {
      company,
    });
  }

And receiving the params in Company with this

componentWillMount() {
    this.setState({ companyData: this.props.navigation.getParam('company', {}) });
}

So I am expecting the Company component will unmount on pop or allow me to change the state of the Company component when I send the details from Home.

I am using react-navigation 3.5.1 and react-native 0.59.3

Upvotes: 1

Views: 3219

Answers (3)

Amol B Jamkar
Amol B Jamkar

Reputation: 1257

React native navigation does not work as web. Read here for more details. https://reactnavigation.org/docs/en/navigation-lifecycle.html

When you navigat to other screen it doesn't actually get unmounted. Read documentation for details.

Use willFocus instead.

Upvotes: 1

Marco Fiorito
Marco Fiorito

Reputation: 52

You need to use the push method of navigation object. The push replace the current route with a new and the navigate search a route and if not exist create new one.

Upvotes: 0

AlexZvl
AlexZvl

Reputation: 2302

you can try using componentDidUpdate check in docs

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Upvotes: 0

Related Questions