react-native navigation. Drawer not opening after package update

Question

I am make using react-native. I recently had to update my react-navigation package to version 6. The issue is my drawer will no longer open and I cannot figure out how to fix it.

This is may code for my navigation:

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/dist/FontAwesome5';
import IonIcon from 'react-native-vector-icons/dist/Ionicons';
import { useNavigation } from '@react-navigation/native';

import { HomeScreen } from '../../screens/app/home/home.screen';
import HistoryScreen from '../../screens/app/history/history.screen';
import { SignoffScreen } from '../../screens/app/signoff/signoff.screen';
import NotificationsScreen from '../../screens/app/notifications/notifications.screen';
import useTheme from '../../theme/hooks/useTheme';
import { AppStackList, AppStackProps, DrawerList } from './types';
import { Colors } from '../../theme/Variables';
import CustomDrawerContent from '../../components/molecules/custom-drawer';
import { common } from '../../theme/Common';
import { FormScreen } from '../../screens/app/form/form.screen';
import { Menu } from '../../assets';

const AppStack = createStackNavigator<AppStackList>();
const Drawer = createDrawerNavigator<DrawerList>();

const renderIcon = (name: string, ion: boolean) => {
  if (ion) {
    return <IonIcon name={name} style={styles.iconStyle} />;
  }
  return <Icon name={name} style={styles.iconStyle} />;
};

const NotificationsNavigator = () => {
  const { Gutters } = useTheme();
  const navigation = useNavigation<AppStackProps>();

  return (
    <TouchableOpacity
      style={(common.navIconStyle, Gutters.regularRMargin)}
      delayPressIn={0}
      onPress={navigation.navigate('Notifications', { screen: 'NotificationsScreen' })}
    >
      <IonIcon name="notifications-outline" style={common.navIconStyle} />
    </TouchableOpacity>
  );
};

const MenuNavigator = () => {
  const navigation = useNavigation<AppStackProps>();

  return (
    <TouchableOpacity>
      <Menu name="notifications-outline" style={common.navIconStyle} />
    </TouchableOpacity>
  );
};


const historyDrawerOptions = {
  headerShown: false,
  title: '',
  drawerIcon: () => renderIcon('tasks', false),
  headerTintColor: Colors.black,
  headerRight: NotificationsNavigator,
};

const AppNavigator = () => {
  const { Custom } = useTheme();

  return (
    <AppStack.Navigator screenOptions={Custom.globalNavigatorScreenOptions}>
      <AppStack.Screen
        name="App Home"
        component={DrawerNavigator}
        options={{ headerShown: false }}
      />
      <AppStack.Screen
        name="NotificationsScreen"
        component={NotificationsScreen}
        options={{ headerShown: false }}
      />
      <AppStack.Screen name="FormScreen" component={FormScreen} options={{ headerShown: false }} />
      <AppStack.Screen
        name="SignoffScreen"
        component={SignoffScreen}
        options={{ headerShown: false }}
      />
    </AppStack.Navigator>
  );
};

const DrawerNavigator = () => (
  <Drawer.Navigator
    drawerStyle={styles.drawerStyle}
    drawerContentOptions={{
      activeTintColor: Colors.primary,
      inactiveTintColor: Colors.white,
      labelStyle: {
        color: Colors.white,
      },
    }}
    drawerContent={() => <CustomDrawerContent />}
  >
    <Drawer.Screen
      name="Home"
      component={HomeScreen}
      options={{
        headerShown: true,
        headerTitle: '',
        headerTransparent: true,
        headerStyle: {
          height: 120,
          backgroundColor: '#fff',
        },
        headerTitleAlign: 'center',
        headerTintColor: '#002C5F',
        headerRight: NotificationsNavigator,
        headerRightContainerStyle: {
          width: 100,
          marginRight: 8,
        },
        headerLeft: MenuNavigator,
        drawerActiveTintColor: Colors.white,
        drawerInactiveTintColor: Colors.white,
        drawerLabelStyle: { fontSize: 15 },
      }}
    />
    <Drawer.Screen name="History" component={HistoryScreen} options={historyDrawerOptions} />
  </Drawer.Navigator>
);

export default AppNavigator;

The draw was working before the update but now after it wont open? My NotificationsNavigator will also not open to its screen. Can anyone help???

react-native navigation. Drawer not opening after package update

0 Answers0