React-native migrating react-navigation from version 3.x.x to 6.x.x

While i started upgrading react-native from version 0.59.9 to 0.71.2 there were lot of drastic changes done across many libraries. react-navigation is one such which has some serious drastic changes.

Typical error we get while upgrading is

creating a navigator doesn’t take an argument maybe you are trying to use react navigation api 4

solution to this is

Using react-navigations as given in their documentation. the old code looks as follows for Stack Navigator

const Drawer = createStackNavigator({
MainNav: { screen: MainNav }
});

however the usage is changed now, all navigator functions now doesn’t require an argument , the changed code looks as follows

const DrawerStack = createStackNavigator();
function Drawer() {
  return (
    <DrawerStack.Navigator>
      <DrawerStack.Screen name="MainNav" component={MainNav} />
    </DrawerStack.Navigator>
  );
}

createDrawerNavigator code is also changed in version 6.x

old code looks as follows

const AppNavigator = createAppContainer(createDrawerNavigator({
  Drawer: { screen: Drawer }
},
  {
    drawerPosition: 'right',
    contentOptions: {
      activeTintColor: '#e91e63'
    },
    contentComponent: props => <SideBar {...props} />
  }));

changed createDrawerNavigator looks as follows

const DrawerNavigator = createDrawerNavigator();
const AppNavigator = () => {
  return (
    <DrawerNavigator.Navigator
      drawerPosition='right'
      tabBarActiveTintColor='#e91e63'
      drawerContent={props => <SideBar {...props} />}
    >
      <DrawerNavigator.Screen name="Drawer" component={Drawer} />
    </DrawerNavigator.Navigator>
  );
}

similarly all navigator functions like createBottomTabNavigator, NavigationContainer are updated follow latest version documentation