How navigate from a screen to another in ternary render

Question

I got the following react-navigation structure:

<NavigationContainer>
      {authToken ? (
        <Tab.Navigator>
          <Tab.Screen
            name='HomeScreen'
            component={HomeScreen}
          />
          <Tab.Screen
            name='SettingsScreen'
            component={SettingsScreen}
          />
        </Tab.Navigator>
      ) : (
        <Stack.Navigator>
          <Stack.Screen name="SignUpScreen" component={SignUpScreen} />
        </Stack.Navigator>
      )}
    </NavigationContainer>

How to navigate from SignUpScreen to HomeScreen and conversely:

// HomeScreen.js button :

onPress={() => {
  // remove authToken and then :
  navigation.navigate(`SignUpScreen`);
}}

Got the error message: The action 'NAVIGATE' with payload {"name":"SignUpScreen"} was not handled by any navigator. Do you have a screen named 'SignUpScreen'? The action 'NAVIGATE' with payload {"name":"SignUpScreen"} was not handled by any navigator. Do you have a screen named 'SignUpScreen'?

Same from SignUpScreen after authToken = true .

Is there a way to navigate from one stack to another in a ternary operator? (Or trigger the index of the navigation to re-render the condition?).

Answer 1

Assuming what what you want to implement is an App that has a different navigation if you are logged in or out, I would suggest using the Switch navigator. In your case, your error it is most likely caused because the signup screen does not exist in the tree of both stack navigators. I'll post the entire main code but the part you should take a look is this:

const Navigator = createSwitchNavigator({
        Main: MainTabNavigator,
        Auth: AuthNavigator,
        SplashScreen: SplashScreen,
        Onboarding: Onboarding,
      }, {
        initialRouteName: 'SplashScreen',
        headerMode: 'none'
    });

The rest:

import React from "react";
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import {ThemeProvider} from 'styled-components'
import {configureStore} from "./redux/store"
import { Provider } from 'react-redux'

const theme = {
  primaryColor: '#3F51B5',
  darkPrimaryColor: '#303F9F',
  containerBackgroundColor: '#FFFFFF',
  lightPrimaryColor: '#C5CAE9',
  accentColor: '#FF5722',
  backgroundColor: 'white',
  font: 'Lato-Regular',
  fontBold: 'Lato-Bold'
}

const ConfigNavigator = createStackNavigator({
  Config: ConfigScreen,
  SettingsScreen: SettingsScreen,
  ...coreRoutes
}, {
  initialRouteName: 'Config',
  headerMode: 'none'
});

const HomeNavigator = createStackNavigator({
  ...coreRoutes
}, {
  initialRouteName: 'HomeScreen',
  headerMode: 'none'
});

const PlacesNavigator = createStackNavigator({
  Places: PlacesScreen,
  POI: POIScreen,
}, {
  initialRouteName: 'Places',
  headerMode: 'none'
});

const PinnedNavigator = createStackNavigator({
  Pinned: PinnedScreen,
  POI: POIScreen,
}, {
  initialRouteName: 'Pinned',
  headerMode: 'none'
});

const MainTabNavigator = createBottomTabNavigator({
  Home: HomeNavigator,
  Places: PlacesNavigator,
  Pinned: PinnedNavigator,
  Chat: ChatScreen,
  Config: ConfigNavigator,
}, {
  initialRouteName: 'Home',
  tabBarPosition: "bottom",
  swipeEnabled: false,
  tabBarComponent: props => {
    return <TabNavigation {...props}
    items={[
      {
        text: Strings['home'], icon: { name: "home", type: "MaterialCommunityIcons" },
        route: "Home"
      },
      {
        text: Strings['places'], icon: { name: "map-marker-multiple", type: "MaterialCommunityIcons"},
        route: "Places"
      },
      {
        text: Strings['pinned'], icon: { name: "pin", type: "MaterialCommunityIcons" },
        route: "Pinned"
      },
      {
        text: Strings['chat'], icon: { name: "wechat", type: "MaterialCommunityIcons" },
        route: "Chat"
      },
      {
        text: Strings['settings'], icon: { name: "settings", type: "MaterialCommunityIcons" },
        route: "Config"
      }
    ]}
    />
  }
});

const AuthNavigator = createStackNavigator({
  Registration: RegistrationScreen,
}, {
  initialRouteName: 'Registration',
  headerMode: 'none'
});

const Navigator = createSwitchNavigator({
    Main: MainTabNavigator,
    Auth: AuthNavigator,
    SplashScreen: SplashScreen,
    Onboarding: Onboarding,
  }, {
    initialRouteName: 'SplashScreen',
    headerMode: 'none'
});

const AppContainer = createAppContainer(Navigator)

let store = configureStore();

class App extends React.Component {

  constructor(){
      super();
      this.theme = new Theme(theme);
  }

  render(){
    return <Provider store={store}>
              <ThemeProvider theme={this.theme.getTheme()}>
                  <AppContainer/>
              </ThemeProvider>
          </Provider>
  }
};

export default App;

From then, you just navigate to Auth or Main and the entire navigator tree changes.