4
Stack Navigator :
 - Login
 - Register
 - Activation
 - Tab Navigator
    + Home
    + Histories
    + Cart
    + Profile
 - Outlet
 - Product

I have problem with go back navigation, when I'm in Product Screen I can go to "Cart Screen" using navigation.navigate('Cart');, but while in "Cart Screen" and goBack() my screen go to "Home Screen". How to manage goBack() from stack screen to tab screen?

1
  • Send that section's navigation using props ( custom navigator) or use context-api or redux, then trigger it after popToTop for performance reasons and avoid memory leak. Commented Apr 19, 2020 at 12:31

2 Answers 2

1

In react-navigation (before 5), I did achieved to that you say with passing upper navigation as a prop to downward using custom navigation component like this:



// this component's navigation is replaced by upper navigation, you can send another prop if you need both navigations.
const MyComponent0 = createStackNavigator(
  {
    Child1: {
      screen: Child1,
      navigationOptions: ({navigation}) => {
        return {
          headerRight: (
            // you can use BackButton of library with import it, I wrote my own, that time i didn't know there is a ready importable back button.
            <TouchableOpacity
              style={{paddingLeft: 10}}
              onPress={() => navigation.toggleDrawer()}>
              <Icon ios="ios-menu" android="md-menu" style={{color: '#fff'}} />
            </TouchableOpacity>
          ),
          headerTitle: <Text style={styles.whiteText}>Child1 title</Text>,
          headerLeft: (
            <HeaderBackButton
              style={{color: '#FFF'}}
              onPress={() => navigation.goBack(null)}
            />
          ),
        };
      },
    },
    Child2,
    ...
  },
  {
    defaultNavigationOptions: {
      headerTitleStyle: {
        color: '#fff',
        fontSize: 13,
        ...Platform.select({
          android: {
            fontFamily: ...,
          },
          ios: {
            fontFamily: ...,
          },
        }),
      },
      headerStyle: {
        backgroundColor: 'rgba(0,0,0,1)',
      },
      headerTintColor: 'white',
    },
  },
);


class MyComponent1 extends Component {
  constructor() {
    super();
  }
  static router = MyComponent0.router;

  render() {
    return <MyComponent0 navigation={this.props.navigation} />; // you can send like navigation1 if you need downward navigation too.
  }
}

This code is in old approach, but it works using react-navigation before 5. I hope this helps you.

Sign up to request clarification or add additional context in comments.

Comments

1

you can use this method

    const goNext = () => {
                navigation.navigate('componentWithDrawer', {
                    screen: next_screen,
                    params: { previous_screen: current_srceen }
                }, next_screen)
                navigation.toggleDrawer()
            }
}

then for go back

const goBack = () => {
                navigation.navigate('componentWithDrawer', {
                    screen: useRoute().params.previous_screen,
                }, next_screen)
                navigation.toggleDrawer()
            }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.