Stacknavigator containing tabbed navigator ignores one of the routes

Question

I have a StackNavigator that contains a Tabbed Navigator(with two tabs) and a single route CreateReviewsScreen, that is not within the Tabbed Navigator. When I try to navigate back from CreateReviewsScreen to the tabbed navigator I'm unable to do so. I believe this is because the single route CreateReviewsScreen is being ignored on construction.

In my app container's navigationRef there is only the tabbed navigator, "Tabs". "CreateReviewScreen" is missing. The length in the photo below should be 2 not 1.

Relevant sections of code:

TabNav.js

import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { ReviewsScreen, VenuesScreen, CreateReviewsScreen } from '../scenes';
import { APP_COLORS } from '../styles/Global';

const mainTabs = createBottomTabNavigator(
  {
    Reviews: ReviewsScreen,
    Venues: VenuesScreen
  },
  {
    initialRouteName: 'Reviews',
    backBehavior: 'Reviews',
    tabBarOptions: {
      activeTintColor: APP_COLORS.FORE,
      labelStyle: {
        fontSize: 18,
        textAlign: 'center'
      },
      style: {
        backgroundColor: APP_COLORS.PRI_LGHT,
      },
    }
  }
);

export default createStackNavigator({
  Tabs: mainTabs,
  CreateReviews: CreateReviewsScreen
});

Navigation.js

import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { createAppContainer } from '@react-navigation/native';
import { LoggedOutScreen, LoginScreen, RegisterScreen, UserProfileScreen } from './scenes/index';
import TabNav from './Drawer/TabNav';


const AuthStack = createStackNavigator({
  LoggedOut: { 
   screen: LoggedOutScreen, 
   navigationOptions: {
     header: null
   }
  },
  Login: {
    screen: LoginScreen, 
    navigationOptions: {
      title: 'Login'
    }
  },
  Register: {
    screen: RegisterScreen,
    navigationOptions: {
      title: 'Sign up!'
    }
  },
  UserProfile: {
    screen: UserProfileScreen,
    navigationOptions: {
      title: 'Your Profile'
    }
  }
});

export default createAppContainer(createSwitchNavigator(
  {
    Main: TabNav,
    Auth: AuthStack
  }, 
  {
    initialRouteName: 'Auth',
  }
));

I guess `routes` do not show the number of routes, instead it contains the history of all routes you have moved to. — 10101010, Feb 26 '19 at 15:06
I wondered that myself, so when I took that screenshot I set my breakpoint in App.js before I had navigated to any other screens. Thanks for the idea though! — Joe Williamson, Feb 26 '19 at 15:51

score 0 · Answer 1 · answered Feb 26 '19 at 21:27

0

Try this.props.navigation.goBack(null)

answered Feb 26 '19 at 21:27

lamazing

523
3
11

Just tried this but it did not work. Nothing happens. Thanks though. – Joe Williamson Feb 27 '19 at 02:18

score 0 · Answer 2 · answered Feb 28 '19 at 03:52

It turns out I wasn't observing the correct error. The back behavior to the previous stack item was happening but there was a 10 second delay caused by remote debugging in Expo. I just didn't wait long enough before restarting the app to see that this was the issue. Disabling remote debugging made the back button work instantaneously.

Stacknavigator containing tabbed navigator ignores one of the routes

2 Answers2