CODEWITHSUNDEEP
react-nativereact-navigation
burakkesepara
burakkesepara

Reputation: 316

React Navigation navigate works like goBack

In my React Native project I want users to navigate to the Login page. And, at the login page, user can fill the inputs to log in. Then, if log in process is successful, user should navigate back to the Homepage.

I am doing all the navigations with this.props.navigation.navigate function. But at the login page, the navigate function doesn't work as I expected. It works like the goBack function. By that I can't update homepage's state.

What should i do for navigate function to work as the way it works always ?

Upvotes: 1

Views: 125

Answers (1)

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4879

Solution

Use Modal. (Recommend)

Wrap your homeStack and AuthStack using createStackNavigation with a Modal option. or use createSwitchNavigation.

const MainStack = createStackNavigator(
  {
    Home: {
      screen: HomeStack,
    },
    Auth: {
      screen: AuthStack,
    },
  },
  {
    mode: 'modal',
  }
);

OR

Using ‘push’ or ‘replace’ instead of ‘navigate’ can be other options.

Why?

It works as goBack even though you use navigate in stackNavigation if screen is stacked already as your process home->login->home. Thus, using modal can be a one of simple and cool way.

Modal: https://reactnavigation.org/docs/en/modal.html

Upvotes: 2

Related Questions