Migrate React Navigation from 4.x to 6.x

user_814765 0
Viewed 972

I have the following navigation with drawer working with react navigation 4.x, and need to migrate to version 6.x, but have not been able to do so.

I already have migrated my imports so it matches v6.x, and installed accordingly, but im strugling while trying to create the exact same structure for v6

Any help appreciated i looked for examples about migration but they are very few

  import { Dimensions } from "react-native";
  import { createStackNavigator } from "react-navigation-stack";
  import { createDrawerNavigator } from "react-navigation-drawer";
  import { createAppContainer } from "react-navigation";
  const { width, height } = Dimensions.get("window");

  import FirstScreen from "../Containers/Mainscreens/MainScreen/MainScreen";
  /* Vehicle List START */
  import PickUp from "../Containers/Vehicle/PickUp/index";
  import VehicleSideMenu from "../Containers/Vehicle/SideMenu/SideMenu";
  import Dashboard from "../Containers/Vehicle/Dashboard/index";
  import RoadTrip from "../Containers/Vehicle/RoadTrip/index";
  import Notifications from "../Containers/Vehicle/Notifications/index";
  import NotificationsDetails from "../Containers/Vehicle/NotificationsDetails/index";
  import History from "../Containers/Vehicle/History/index";
  import HistoryDetails from "../Containers/Vehicle/HistoryDetails/index";
  import RoadsideAssistance from "../Containers/Vehicle/RoadsideAssistance/index";
  import TemperatureControl from "../Containers/Vehicle/TemperatureControl/index";
  /* Vehicle List END */

  /* Vehicle Drawer START */
  const DrawerStackVehical = createStackNavigator(
    {
      Dashboard: { screen: Dashboard },
      PickUp: { screen: PickUp },
      RoadTrip: { screen: RoadTrip },
      Notifications: { screen: Notifications },
      NotificationsDetails: { screen: NotificationsDetails },
      RoadsideAssistance: { screen: RoadsideAssistance },
      HistoryDetails: { screen: HistoryDetails },
      History: { screen: History },
      TemperatureControl: { screen: TemperatureControl },
    },
    {
      headerMode: "none",
      navigationOptions: ({ navigation }) => ({
        gesturesEnabled: false,
      }),
    }
  );

  const DrawerNavigationVehical = createDrawerNavigator(
    {
      DrawerStackVehical: { screen: DrawerStackVehical },
    },
    {
      gesturesEnabled: false,
      contentComponent: VehicleSideMenu,
    }
  );

  const MainStack = createStackNavigator(
    {
      FirstScreen: { screen: FirstScreen },
    },
    {
      headerMode: "none",
      navigationOptions: {
        gesturesEnabled: false,
      },
    }
  );

  const PrimaryNav = createStackNavigator(
    {
      mainStack: { screen: MainStack },
      DrawerNavigationVehical: { screen: DrawerNavigationVehical },
    },

    {
      headerMode: "none",
      initialRouteName: "mainStack",
      gesturesEnabled: false,
    }
  );

  export default createAppContainer(PrimaryNav);
react-navigation react-native
1 Answers

I'll try to cover most of the changes that are made.

Stack Navigation is done like below

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function DrawerStackVehical() {
  return (
    <NavigationContainer>
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Dashboard" component={Dashboard} />
      <Stack.Screen name="PickUp" component={PickUp} />
      <Stack.Screen name="RoadTrip" component={RoadTrip} />
      <Stack.Screen name="Notifications" component={Notifications} />
    </Stack.Navigator>
    </NavigationContainer>
  );
}

Drawer Navigation

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function DrawerNavigationVehical() {
  return (
   <NavigationContainer>
    <Drawer.Navigator>
      <Drawer.Screen name="DrawerStackVehical" component={DrawerStackVehical} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
    </NavigationContainer>
  );
}

And you don't need to use createAppContainer now. You just need to use 'NavigationContainer` and wrap your component inside.

user_81960250
Related