@react-navigation/drawer 6.1.5

package/src/views/DrawerContentScrollView.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+  I18nManager,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import DrawerPositionContext from '../utils/DrawerPositionContext';
+
+type Props = ScrollViewProps & {
+  children: React.ReactNode;
+};
+
+function DrawerContentScrollView(
+  { contentContainerStyle, style, children, ...rest }: Props,
+  ref?: React.Ref<ScrollView>
+) {
+  const drawerPosition = React.useContext(DrawerPositionContext);
+  const insets = useSafeAreaInsets();
+
+  const isRight = I18nManager.isRTL
+    ? drawerPosition === 'left'
+    : drawerPosition === 'right';
+
+  return (
+    <ScrollView
+      {...rest}
+      ref={ref}
+      contentContainerStyle={[
+        {
+          paddingTop: insets.top + 4,
+          paddingStart: !isRight ? insets.left : 0,
+          paddingEnd: isRight ? insets.right : 0,
+        },
+        contentContainerStyle,
+      ]}
+      style={[styles.container, style]}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+export default React.forwardRef(DrawerContentScrollView);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/views/DrawerItem.tsx

@@ -0,0 +1,227 @@
+import { PlatformPressable } from '@react-navigation/elements';
+import { Link, useTheme } from '@react-navigation/native';
+import Color from 'color';
+import * as React from 'react';
+import {
+  Platform,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+type Props = {
+  /**
+   * The label text of the item.
+   */
+  label:
+    | string
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+  /**
+   * Icon to display for the `DrawerItem`.
+   */
+  icon?: (props: {
+    focused: boolean;
+    size: number;
+    color: string;
+  }) => React.ReactNode;
+  /**
+   * URL to use for the link to the tab.
+   */
+  to?: string;
+  /**
+   * Whether to highlight the drawer item as active.
+   */
+  focused?: boolean;
+  /**
+   * Function to execute on press.
+   */
+  onPress: () => void;
+  /**
+   * Color for the icon and label when the item is active.
+   */
+  activeTintColor?: string;
+  /**
+   * Color for the icon and label when the item is inactive.
+   */
+  inactiveTintColor?: string;
+  /**
+   * Background color for item when its active.
+   */
+  activeBackgroundColor?: string;
+  /**
+   * Background color for item when its inactive.
+   */
+  inactiveBackgroundColor?: string;
+  /**
+   * Color of the touchable effect on press.
+   * Only supported on Android.
+   *
+   * @platform android
+   */
+  pressColor?: string;
+  /**
+   * Opacity of the touchable effect on press.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  pressOpacity?: number;
+  /**
+   * Style object for the label element.
+   */
+  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Style object for the wrapper element.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+const LinkPressable = ({
+  children,
+  style,
+  onPress,
+  onLongPress,
+  to,
+  accessibilityRole,
+  ...rest
+}: Omit<React.ComponentProps<typeof PlatformPressable>, 'style'> & {
+  style: StyleProp<ViewStyle>;
+} & {
+  to?: string;
+  children: React.ReactNode;
+  onPress?: () => void;
+}) => {
+  if (Platform.OS === 'web' && to) {
+    // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
+    // We need to use `onClick` to be able to prevent default browser handling of links.
+    return (
+      <Link
+        {...rest}
+        to={to}
+        style={[styles.button, style]}
+        onPress={(e: any) => {
+          if (
+            !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+            (e.button == null || e.button === 0) // ignore everything but left clicks
+          ) {
+            e.preventDefault();
+            onPress?.(e);
+          }
+        }}
+        onLongPress={onLongPress ?? undefined}
+      >
+        {children}
+      </Link>
+    );
+  } else {
+    return (
+      <PlatformPressable
+        {...rest}
+        accessibilityRole={accessibilityRole}
+        onPress={onPress}
+      >
+        <View style={style}>{children}</View>
+      </PlatformPressable>
+    );
+  }
+};
+
+/**
+ * A component used to show an action item with an icon and a label in a navigation drawer.
+ */
+export default function DrawerItem(props: Props) {
+  const { colors } = useTheme();
+
+  const {
+    icon,
+    label,
+    labelStyle,
+    to,
+    focused = false,
+    activeTintColor = colors.primary,
+    inactiveTintColor = Color(colors.text).alpha(0.68).rgb().string(),
+    activeBackgroundColor = Color(activeTintColor).alpha(0.12).rgb().string(),
+    inactiveBackgroundColor = 'transparent',
+    style,
+    onPress,
+    pressColor,
+    pressOpacity,
+    ...rest
+  } = props;
+
+  const { borderRadius = 4 } = StyleSheet.flatten(style || {});
+  const color = focused ? activeTintColor : inactiveTintColor;
+  const backgroundColor = focused
+    ? activeBackgroundColor
+    : inactiveBackgroundColor;
+
+  const iconNode = icon ? icon({ size: 24, focused, color }) : null;
+
+  return (
+    <View
+      collapsable={false}
+      {...rest}
+      style={[styles.container, { borderRadius, backgroundColor }, style]}
+    >
+      <LinkPressable
+        onPress={onPress}
+        style={[styles.wrapper, { borderRadius }]}
+        accessibilityRole="button"
+        accessibilityState={{ selected: focused }}
+        pressColor={pressColor}
+        pressOpacity={pressOpacity}
+        to={to}
+      >
+        <React.Fragment>
+          {iconNode}
+          <View
+            style={[
+              styles.label,
+              { marginLeft: iconNode ? 32 : 0, marginVertical: 5 },
+            ]}
+          >
+            {typeof label === 'string' ? (
+              <Text
+                numberOfLines={1}
+                style={[
+                  {
+                    color,
+                    fontWeight: '500',
+                  },
+                  labelStyle,
+                ]}
+              >
+                {label}
+              </Text>
+            ) : (
+              label({ color, focused })
+            )}
+          </View>
+        </React.Fragment>
+      </LinkPressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 10,
+    marginVertical: 4,
+    overflow: 'hidden',
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  label: {
+    marginRight: 32,
+    flex: 1,
+  },
+  button: {
+    display: 'flex',
+  },
+});

package/src/views/DrawerItemList.tsx

@@ -0,0 +1,80 @@
+import {
+  CommonActions,
+  DrawerActions,
+  DrawerNavigationState,
+  ParamListBase,
+  useLinkBuilder,
+} from '@react-navigation/native';
+import * as React from 'react';
+
+import type { DrawerDescriptorMap, DrawerNavigationHelpers } from '../types';
+import DrawerItem from './DrawerItem';
+
+type Props = {
+  state: DrawerNavigationState<ParamListBase>;
+  navigation: DrawerNavigationHelpers;
+  descriptors: DrawerDescriptorMap;
+};
+
+/**
+ * Component that renders the navigation list in the drawer.
+ */
+export default function DrawerItemList({
+  state,
+  navigation,
+  descriptors,
+}: Props) {
+  const buildLink = useLinkBuilder();
+
+  const focusedRoute = state.routes[state.index];
+  const focusedDescriptor = descriptors[focusedRoute.key];
+  const focusedOptions = focusedDescriptor.options;
+
+  const {
+    drawerActiveTintColor,
+    drawerInactiveTintColor,
+    drawerActiveBackgroundColor,
+    drawerInactiveBackgroundColor,
+  } = focusedOptions;
+
+  return state.routes.map((route, i) => {
+    const focused = i === state.index;
+    const {
+      title,
+      drawerLabel,
+      drawerIcon,
+      drawerLabelStyle,
+      drawerItemStyle,
+    } = descriptors[route.key].options;
+
+    return (
+      <DrawerItem
+        key={route.key}
+        label={
+          drawerLabel !== undefined
+            ? drawerLabel
+            : title !== undefined
+            ? title
+            : route.name
+        }
+        icon={drawerIcon}
+        focused={focused}
+        activeTintColor={drawerActiveTintColor}
+        inactiveTintColor={drawerInactiveTintColor}
+        activeBackgroundColor={drawerActiveBackgroundColor}
+        inactiveBackgroundColor={drawerInactiveBackgroundColor}
+        labelStyle={drawerLabelStyle}
+        style={drawerItemStyle}
+        to={buildLink(route.name, route.params)}
+        onPress={() => {
+          navigation.dispatch({
+            ...(focused
+              ? DrawerActions.closeDrawer()
+              : CommonActions.navigate({ name: route.name, merge: true })),
+            target: state.key,
+          });
+        }}
+      />
+    );
+  }) as React.ReactNode as React.ReactElement;
+}

package/src/views/DrawerToggleButton.tsx

@@ -0,0 +1,54 @@
+import { PlatformPressable } from '@react-navigation/elements';
+import {
+  DrawerActions,
+  ParamListBase,
+  useNavigation,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { Image, Platform, StyleSheet } from 'react-native';
+
+import type { DrawerNavigationProp } from '../types';
+
+type Props = {
+  accessibilityLabel?: string;
+  pressColor?: string;
+  pressOpacity?: number;
+  tintColor?: string;
+};
+
+export default function DrawerToggleButton({ tintColor, ...rest }: Props) {
+  const navigation = useNavigation<DrawerNavigationProp<ParamListBase>>();
+
+  return (
+    <PlatformPressable
+      {...rest}
+      accessible
+      accessibilityRole="button"
+      android_ripple={{ borderless: true }}
+      onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
+      style={styles.touchable}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+    >
+      <Image
+        style={[styles.icon, tintColor ? { tintColor } : null]}
+        source={require('./assets/toggle-drawer-icon.png')}
+        fadeDuration={0}
+      />
+    </PlatformPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    height: 24,
+    width: 24,
+    margin: 3,
+    resizeMode: 'contain',
+  },
+  touchable: {
+    marginHorizontal: 11,
+  },
+});