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.Screen name="MainNav" component={MainNav} />

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 (
      drawerContent={props => <SideBar {...props} />}
      <DrawerNavigator.Screen name="Drawer" component={Drawer} />

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

Leave a Reply

Your email address will not be published. Required fields are marked *