CODEWITHSUNDEEP
react-nativereact-navigation
Millenial2020
Millenial2020

Reputation: 2913

how to go back a page in react native navigation v3

I'm using the tabs template on expo react native.

I have a navigation in the AppNavigator.js

import React from 'react';
import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';
import GoalScreen from '../screens/GoalScreen';

const GoalStack = createStackNavigator({
  Goal: GoalScreen
})

export default createAppContainer(createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  Main: MainTabNavigator,
  Goal: GoalStack
}));

When i tap on the Goal I get to that page fine. but inside the goal screen i want to go back when i press the back button.

<Left>
                    <Button hasText transparent onPress={() => {
                        this.props.navigation.goBack(null);
                    }} >
                        <Text>Cancel</Text>
                    </Button>
                </Left>

But for some reason is not working.

Upvotes: 3

Views: 2842

Answers (3)

Vikram Biwal
Vikram Biwal

Reputation: 2826

Try this:

this.props.navigation.goBack();

Upvotes: 1

Prabhu
Prabhu

Reputation: 1057

It's working correctly There is no previous stack to go back.

The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away

https://reactnavigation.org/docs/en/switch-navigator.html

You can perform goback action inside GoalStack if you have more than one screen. But both the GoalStack and MainTabNavigator is specified in switch navigator. Since switch navigator shows one screen at a time, you can't perform goback here.

if you want to go for MainTabNavigator from GoalStack, you need to use like below

this.props.navigation.navigate("Main")

Upvotes: 1

Jebin Benny
Jebin Benny

Reputation: 951

In switch navigator you have to switch navigation directly,

eg:

this.props.navigation.navigate("Main");

And if you push from one screen to another screen(In stack navigation) you can use the 'goBack' function.

Upvotes: 2

Related Questions