@react-navigation/native#DrawerActions TypeScript Examples

The following examples show how to use @react-navigation/native#DrawerActions. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Header.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
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>
  );
}
Example #2
Source File: HomeScreen.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: App.tsx    From react-native-jigsaw with MIT License 6 votes vote down vote up 
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>
  );
}
Example #4
Source File: main.tsx    From iotc-cpm-sample with MIT License 6 votes vote down vote up 
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>
  );
}
Example #5
Source File: MenuIcon.tsx    From expo-hamburger-menu-template with MIT License 6 votes vote down vote up 
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>
  );
}
Example #6
Source File: HeaderMenuIcon.tsx    From orangehrm-os-mobile with GNU General Public License v3.0 6 votes vote down vote up 
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,
        },
      }}
    />
  );
}
Example #7
Source File: LeaveRequestSuccess.tsx    From orangehrm-os-mobile with GNU General Public License v3.0 5 votes vote down vote up 
onPressHome = () => {
    const {initialRoute, navigation} = this.props;
    navigation.dispatch(StackActions.pop());
    navigation.dispatch(DrawerActions.jumpTo(initialRoute));
  };
Example #8
Source File: PunchRequestSuccess.tsx    From orangehrm-os-mobile with GNU General Public License v3.0 5 votes vote down vote up 
onClickHomeButton = () => {
    const {initialRoute, navigation} = this.props;
    navigation.dispatch(StackActions.pop());
    navigation.dispatch(DrawerActions.jumpTo(initialRoute));
  };
Example #9
Source File: DrawerContent.tsx    From orangehrm-os-mobile with GNU General Public License v3.0 4 votes vote down vote up 
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>
  );
}