Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where is placed createSwitchNavigator in react-navigation 5.x for migrating from react-navigation 4 to 5.x

I'm migrating a React Native application from react-navigation 4 to 5.x and i can't find which package contains createSwitchNavigation. Specifically i have doubts with the auth token check part.

With react-navigation 4 i had:

const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  signinFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),
  appFlow: createBottomTabNavigator({
    TrackCreate: TrackCreateScreen,
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen
    }),
    Account: AccountScreen,
  })
}, {
  initialRouteName: 'ResolveAuth'
});

Then i have a file containing ResolveAuthScreen component.

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const ResolveAuthScreen = (props) => {
  useEffect(() => {
    if (!props.token) {
      props.navigation.navigate('loginFlow');
    } else {
      props.navigation.navigate('TrackList');
    }
  }, []);

  return null;
};

const mapStateToProps = (state) => {
  return {
    token: state.auth.token,
  };
};

export default connect(mapStateToProps, null)(ResolveAuthScreen);

The rest of components are not important for this doubt. I want to know how to replicate the same Switch navigation flow. I would like to know how can i create something like this:

const Switch = createSwitchNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Switch.Navigator>
        <Switch.Screen name="ResolveAuth" component={ResolveAuthScreen} />
        <Switch.Screen name="signinFlow" component={SignInFlowScreens} />
        <Switch.Screen name="appFlow" component={AppFlowScreens} />
      </Switch.Navigator>
    </NavigationContainer>
  );
}
like image 983
Siro_Diaz Avatar asked Feb 18 '20 10:02

Siro_Diaz


People also ask

How do you use the switch navigator in react navigation 5?

import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation"; import MainTabNavigator from "./MainTabNavigator"; import LoginScreen from "../screens/LoginScreen"; import AuthLoadingScreen from "../screens/AuthLoadingScreen"; export default createAppContainer( createSwitchNavigator( ...

What is the difference between react navigation 5 and 6?

While React Navigation 5 was complete overhaul to the API of React Navigation, React Navigation 6 keeps the same API, with some breaking changes to make things more consistent and provide more flexibility. We also tried to address some common pain points and confusions that users had.


2 Answers

To make the migration easier, you still can use createSwitchNavigator from @react-navigation/compat

like image 89
Vladyslav Zavalykhatko Avatar answered Sep 23 '22 16:09

Vladyslav Zavalykhatko


In earlier versions of React Navigation, there were 2 ways to handle this:

  1. Keep multiple navigators and use switch navigator to switch the active navigator to a different one upon login (recommended)
  2. Reset the state of the navigator to the desired screens upon login

But for v5, you need to use context. Take a look at here to see a detailed example!

like image 45
MohamadKh75 Avatar answered Sep 24 '22 16:09

MohamadKh75