@react-navigation/native#DrawerActions TypeScript Examples

Header = ({isOverlay}: HeaderProps) => {
  const [i18n] = useI18n();
  const navigation = useNavigation();
  const onLogoPress = useCallback(() => {
    navigation.dispatch(DrawerActions.openDrawer());
  }, [navigation]);
  return (
    <TouchableWithoutFeedback onPress={onLogoPress}>
      <Box flexDirection="row" alignItems="center" justifyContent="center" marginBottom="l">
        <Box marginHorizontal="s">
          <Icon size={20} name="shield-covid" />
        </Box>
        <Text variant="homeHeader" color={isOverlay ? 'overlayBodyText' : 'bodyText'}>
          {i18n.translate('Home.AppName')}
        </Text>
      </Box>
    </TouchableWithoutFeedback>
  );
}

HomeScreen = () => {
  const navigation = useNavigation();
  useEffect(() => {
    if (__DEV__) {
      DevSettings.addMenuItem('Show Test Menu', () => {
        navigation.dispatch(DrawerActions.openDrawer());
      });
    }
  }, [navigation]);

  // This only initiate system status updater.
  // The actual updates will be delivered in useSystemStatus().
  const subscribeToStatusUpdates = useExposureNotificationSystemStatusAutomaticUpdater();
  useEffect(() => {
    return subscribeToStatusUpdates();
  }, [subscribeToStatusUpdates]);

  const startExposureNotificationService = useStartExposureNotificationService();
  useEffect(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  const maxWidth = useMaxContentWidth();

  return (
    <NotificationPermissionStatusProvider>
      <Box flex={1} alignItems="center" backgroundColor="mainBackground">
        <Box flex={1} maxWidth={maxWidth} paddingTop="m">
          <Content />
        </Box>
        <BottomSheetWrapper />
      </Box>
    </NotificationPermissionStatusProvider>
  );
}

function Example({ title, children }: ExampleProps) {
  const navigation = useNavigation();

  return (
    <ScreenContainer
      hasSafeArea={true}
      hasTopSafeArea={true}
      hasBottomSafeArea={true}
      scrollable={false}
    >
      <View style={exampleStyles.headerStyle}>
        <TouchableOpacity
          style={exampleStyles.menuButtonStyle}
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Image
            style={exampleStyles.menuButtonImageStyle}
            source={require("./assets/images/hamburger.png")}
          />
        </TouchableOpacity>

        <Text style={[exampleStyles.headerTextStyle]}>{title}</Text>
      </View>
      <ScreenContainer scrollable={true} hasSafeArea={false}>
        {children}
      </ScreenContainer>
    </ScreenContainer>
  );
}

export default function Main() {
  const {state} = useContext(ConfigContext);
  const [user] = useUser();

  if (!user || state.centralClient === undefined) {
    return null;
  }

  return (
    <React.Fragment>
      <Drawer.Navigator
        drawerContent={({state: navigationState, navigation}) => {
          let currentScreen = '';
          const stackState = navigationState.routes[0].state;
          if (stackState && stackState.index) {
            currentScreen = stackState.routes[stackState.index].name;
          }
          return (
            <InsightDrawer
              sourceSide="left"
              close={() => {
                navigation.dispatch(DrawerActions.closeDrawer());
              }}
              currentScreen={currentScreen}
            />
          );
        }}
        screenOptions={{swipeEdgeWidth: -100, headerShown: false}}>
        <Drawer.Screen name={DrawerScreens.MAIN} component={Navigation} />
      </Drawer.Navigator>
    </React.Fragment>
  );
}

export default function MenuIcon() {
  const navigation = useNavigation();

  const openDrawer = useCallback(() => {
    navigation.dispatch(DrawerActions.openDrawer());
  },[]);

  return (
    <TouchableOpacity onPress={openDrawer}>
      <Feather name="menu" size={24} style={{marginLeft: 25}}/>
    </TouchableOpacity>
  );
}

HeaderMenuIcon = (props: HeaderMenuIconProps) => {
  const {theme} = props;
  return (
    <IconButton
      buttonProps={{
        onPress: () => {
          props.navigation.dispatch(DrawerActions.toggleDrawer());
        },
      }}
      iconProps={{
        name: 'menu',
        style: {
          fontSize: theme.typography.headerIconSize,
          color: theme.typography.secondaryColor,
        },
      }}
    />
  );
}

onPressHome = () => {
    const {initialRoute, navigation} = this.props;
    navigation.dispatch(StackActions.pop());
    navigation.dispatch(DrawerActions.jumpTo(initialRoute));
  };

onClickHomeButton = () => {
    const {initialRoute, navigation} = this.props;
    navigation.dispatch(StackActions.pop());
    navigation.dispatch(DrawerActions.jumpTo(initialRoute));
  };

DrawerContent = (props: DrawerContentProps & DrawerItemListProps) => {
  const {
    myInfo,
    myInfoFinished,
    fetchMyInfo,
    logout,
    enabledModules,
    helpConfig,
    ...drawerContentProps
  } = props;
  const theme = useTheme();

  const onRefresh = useCallback(() => {
    fetchMyInfo();
  }, [fetchMyInfo]);

  const logoutOnPress = useCallback(() => {
    drawerContentProps.navigation.closeDrawer();
    logout();
  }, [logout, drawerContentProps]);

  const {isApiCompatible} = useApiDetails();

  let imageSource;
  if (myInfo?.employeePhoto !== undefined && myInfo?.employeePhoto !== null) {
    imageSource = {uri: `data:image/png;base64,${myInfo?.employeePhoto}`};
  }

  const commonProps = {
    activeTintColor: theme.palette.secondary,
    inactiveTintColor: theme.typography.primaryColor,
    activeBackgroundColor: theme.palette.background,
    labelStyle: styles.label,
  };

  const history = [...drawerContentProps.state.history];
  let currentDrawerItem = history.pop();
  if (currentDrawerItem?.type !== 'route') {
    currentDrawerItem = history.pop();
  }

  const onPressHelp = () => {
    props.fetchHelp(helpRequestForMobile);
  };

  const navigateHelp = () => {
    let url = helpConfig?.redirectUrls[0]?.url;
    if (url === undefined) {
      url = helpConfig?.defaultRedirectUrl;
    }
    if (url !== undefined) {
      Linking.canOpenURL(url).then((supported) => {
        if (supported) {
          if (url !== undefined) {
            Linking.openURL(url);
          }
        }
      });
    }
  };
  useEffect(() => {
    if (helpConfig?.defaultRedirectUrl !== undefined) {
      navigateHelp();
    }
    /* eslint-disable react-hooks/exhaustive-deps */
  }, [helpConfig]);
  /* eslint-enable react-hooks/exhaustive-deps */

  return (
    <SafeAreaView style={styles.safeArea}>
      <ProfilePicture
        name={myInfo?.employee.fullName}
        jobTitle={myInfo?.employee.jobTitle}
        imageSource={imageSource}
      />
      <DrawerContentScrollView
        contentContainerStyle={styles.contentContainer}
        refreshControl={
          <RefreshControl refreshing={!myInfoFinished} onRefresh={onRefresh} />
        }>
        <View style={styles.view}>
          <View>
            {getDrawerItems(
              drawerContentProps.state,
              drawerContentProps.descriptors,
              enabledModules,
            ).map((drawerItem) => (
              <Fragment key={drawerItem.key}>
                {drawerItem.subheader ? (
                  <View style={styles.subheader}>
                    <Icon
                      name={drawerItem.subheaderIcon?.name}
                      style={{margin: theme.spacing * 2}}
                    />
                    <Text style={{margin: theme.spacing * 2.5}}>
                      {drawerItem.subheader}
                    </Text>
                  </View>
                ) : null}
                <View style={{marginLeft: theme.spacing * 7}}>
                  <DrawerItem
                    style={{marginVertical: theme.spacing * -1}}
                    label={drawerItem.label}
                    onPress={() => {
                      drawerContentProps.navigation.closeDrawer();
                      drawerContentProps.navigation.dispatch(
                        DrawerActions.jumpTo(drawerItem.name),
                      );
                    }}
                    focused={
                      currentDrawerItem?.type === 'route' &&
                      currentDrawerItem.key === drawerItem.key
                    }
                    {...commonProps}
                  />
                </View>
              </Fragment>
            ))}
          </View>
        </View>
      </DrawerContentScrollView>
      <View>
        {isApiCompatible(ORANGEHRM_API_1$3$0) ? (
          <>
            <Divider />
            <DrawerItem
              style={styles.drawerItem}
              label={'Help'}
              onPress={onPressHelp}
              icon={() => (
                <Icon name={'help-circle'} style={styles.draweItemIcon} />
              )}
              {...commonProps}
            />
          </>
        ) : null}
        <Divider />
        <DrawerItem
          style={styles.drawerItem}
          label={'Logout'}
          onPress={logoutOnPress}
          icon={() => <Icon name={'logout'} style={styles.draweItemIcon} />}
          {...commonProps}
        />
        <Divider />
        <Footer />
      </View>
    </SafeAreaView>
  );
}