@react-navigation/elements 2.0.0-alpha.0 → 2.0.0-alpha.10

package/src/Header/HeaderBackButton.tsx

@@ -3,15 +3,15 @@ import * as React from 'react';
 import {
   Animated,
   Image,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   Platform,
   StyleSheet,
   View,
 } from 'react-native';
 
 import { MaskedView } from '../MaskedView';
-import { PlatformPressable } from '../PlatformPressable';
 import type { HeaderBackButtonProps } from '../types';
+import { HeaderButton } from './HeaderButton';
 
 export function HeaderBackButton({
   disabled,
@@ -31,6 +31,7 @@ export function HeaderBackButton({
   accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
   testID,
   style,
+  href,
 }: HeaderBackButtonProps) {
   const { colors, fonts } = useTheme();
   const { direction } = useLocale();
@@ -79,6 +80,7 @@ export function HeaderBackButton({
             Boolean(labelVisible) && styles.iconWithLabel,
             Boolean(tintColor) && { tintColor },
           ]}
+          resizeMode="contain"
           source={require('../assets/back-icon.png')}
           fadeDuration={0}
         />
@@ -136,6 +138,7 @@ export function HeaderBackButton({
           <View style={styles.iconMaskContainer}>
             <Image
               source={require('../assets/back-icon-mask.png')}
+              resizeMode="contain"
               style={[styles.iconMask, direction === 'rtl' && styles.flip]}
             />
             <View style={styles.iconMaskFillerRect} />
@@ -147,43 +150,34 @@ export function HeaderBackButton({
     );
   };
 
-  const handlePress = () => onPress && requestAnimationFrame(onPress);
+  const handlePress = () => {
+    if (onPress) {
+      requestAnimationFrame(() => onPress());
+    }
+  };
 
   return (
-    <PlatformPressable
+    <HeaderButton
       disabled={disabled}
-      accessible
-      accessibilityRole="button"
+      href={href}
       accessibilityLabel={accessibilityLabel}
       testID={testID}
-      onPress={disabled ? undefined : handlePress}
+      onPress={handlePress}
       pressColor={pressColor}
       pressOpacity={pressOpacity}
-      android_ripple={androidRipple}
-      style={[styles.container, disabled && styles.disabled, style]}
-      hitSlop={Platform.select({
-        ios: undefined,
-        default: { top: 16, right: 16, bottom: 16, left: 16 },
-      })}
+      style={[styles.container, style]}
     >
       <React.Fragment>
         {renderBackImage()}
         {renderLabel()}
       </React.Fragment>
-    </PlatformPressable>
+    </HeaderButton>
   );
 }
 
-const androidRipple = {
-  borderless: true,
-  foreground: Platform.OS === 'android' && Platform.Version >= 23,
-  radius: 20,
-};
-
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    flexDirection: 'row',
+    paddingHorizontal: 0,
     minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
     ...Platform.select({
       ios: null,
@@ -193,9 +187,6 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  disabled: {
-    opacity: 0.5,
-  },
   label: {
     fontSize: 17,
     // Title and back label are a bit different width due to title being bold
@@ -215,13 +206,11 @@ const styles = StyleSheet.create({
       marginLeft: 8,
       marginRight: 22,
       marginVertical: 12,
-      resizeMode: 'contain',
     },
     default: {
       height: 24,
       width: 24,
       margin: 3,
-      resizeMode: 'contain',
     },
   }),
   iconWithLabel:
@@ -245,9 +234,8 @@ const styles = StyleSheet.create({
     marginLeft: -14.5,
     marginVertical: 12,
     alignSelf: 'center',
-    resizeMode: 'contain',
   },
   flip: {
-    transform: [{ scaleX: -1 }],
+    transform: 'scaleX(-1)',
   },
 });

package/src/Header/HeaderBackContext.tsx

@@ -1,6 +1,5 @@
 import { getNamedContext } from '../getNamedContext';
 
-export const HeaderBackContext = getNamedContext<{ title: string } | undefined>(
-  'HeaderBackContext',
-  undefined
-);
+export const HeaderBackContext = getNamedContext<
+  { title: string | undefined; href: string | undefined } | undefined
+>('HeaderBackContext', undefined);

package/src/Header/HeaderBackground.tsx

@@ -3,10 +3,10 @@ import * as React from 'react';
 import {
   Animated,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  ViewProps,
-  ViewStyle,
+  type ViewProps,
+  type ViewStyle,
 } from 'react-native';
 
 type Props = Omit<ViewProps, 'style'> & {

package/src/Header/HeaderButton.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+import { PlatformPressable } from '../PlatformPressable';
+import type { HeaderButtonProps } from '../types';
+
+export function HeaderButton({
+  disabled,
+  onPress,
+  pressColor,
+  pressOpacity,
+  accessibilityLabel,
+  testID,
+  style,
+  href,
+  children,
+}: HeaderButtonProps) {
+  return (
+    <PlatformPressable
+      disabled={disabled}
+      href={href}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      onPress={onPress}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      android_ripple={androidRipple}
+      style={[styles.container, disabled && styles.disabled, style]}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+    >
+      {children}
+    </PlatformPressable>
+  );
+}
+
+const androidRipple = {
+  borderless: true,
+  foreground: Platform.OS === 'android' && Platform.Version >= 23,
+  radius: 20,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/Header/HeaderTitle.tsx

@@ -3,10 +3,10 @@ import * as React from 'react';
 import {
   Animated,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  TextProps,
-  TextStyle,
+  type TextProps,
+  type TextStyle,
 } from 'react-native';
 
 type Props = Omit<TextProps, 'style'> & {

package/src/Header/getDefaultHeaderHeight.tsx

@@ -1,14 +1,20 @@
-import { Platform } from 'react-native';
+import { PixelRatio, Platform } from 'react-native';
 
 import type { Layout } from '../types';
 
 export function getDefaultHeaderHeight(
   layout: Layout,
   modalPresentation: boolean,
-  statusBarHeight: number
+  topInset: number
 ): number {
   let headerHeight;
 
+  // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
+  const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50;
+  const statusBarHeight = hasDynamicIsland
+    ? topInset - (5 + 1 / PixelRatio.get())
+    : topInset;
+
   const isLandscape = layout.width > layout.height;
 
   if (Platform.OS === 'ios') {
@@ -29,8 +35,6 @@ export function getDefaultHeaderHeight(
         }
       }
     }
-  } else if (Platform.OS === 'android') {
-    headerHeight = 56;
   } else {
     headerHeight = 64;
   }

package/src/Header/getHeaderTitle.tsx

@@ -7,6 +7,6 @@ export function getHeaderTitle(
   return typeof options.headerTitle === 'string'
     ? options.headerTitle
     : options.title !== undefined
-    ? options.title
-    : fallback;
+      ? options.title
+      : fallback;
 }

package/src/Label/Label.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {
+  type StyleProp,
+  StyleSheet,
+  type TextProps,
+  type TextStyle,
+} from 'react-native';
+
+import { Text } from '../Text';
+
+type Props = Omit<TextProps, 'style'> & {
+  tintColor?: string;
+  children?: string;
+  style?: StyleProp<TextStyle>;
+};
+
+export function Label({ tintColor, style, ...rest }: Props) {
+  return (
+    <Text
+      numberOfLines={1}
+      {...rest}
+      style={[styles.label, tintColor != null && { color: tintColor }, style]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    textAlign: 'center',
+    backgroundColor: 'transparent',
+  },
+});

package/src/Label/getLabel.tsx

@@ -0,0 +1,10 @@
+export function getLabel(
+  options: { label?: string; title?: string },
+  fallback: string
+): string {
+  return options.label !== undefined
+    ? options.label
+    : options.title !== undefined
+      ? options.title
+      : fallback;
+}

package/src/MaskedViewNative.tsx

@@ -16,6 +16,7 @@ let RNCMaskedView: MaskedViewType | undefined;
 try {
   // Add try/catch to support usage even if it's not installed, since it's optional.
   // Newer versions of Metro will handle it properly.
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   RNCMaskedView = require('@react-native-masked-view/masked-view').default;
 } catch (e) {
   // Ignore

package/src/MissingIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+import { type StyleProp, StyleSheet, Text, type TextStyle } from 'react-native';
 
 type Props = {
   color?: string;

package/src/PlatformPressable.tsx

@@ -3,18 +3,19 @@ import * as React from 'react';
 import {
   Animated,
   Easing,
-  GestureResponderEvent,
+  type GestureResponderEvent,
   Platform,
   Pressable,
-  PressableProps,
-  StyleProp,
-  ViewStyle,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native';
 
 export type Props = Omit<PressableProps, 'style'> & {
   pressColor?: string;
   pressOpacity?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  href?: string;
   children: React.ReactNode;
 };
 
@@ -28,6 +29,8 @@ const ANDROID_SUPPORTS_RIPPLE =
  * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
  */
 export function PlatformPressable({
+  disabled,
+  onPress,
   onPressIn,
   onPressOut,
   android_ripple,
@@ -52,6 +55,26 @@ export function PlatformPressable({
     }).start();
   };
 
+  const handlePress = (e: GestureResponderEvent) => {
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const isLeftClick = e.button == null || e.button === 0; // only handle left clicks
+    const isSelfTarget = [undefined, null, '', 'self'].includes(
+      // @ts-expect-error: these properties exist on web, but not in React Native
+      e.currentTarget?.target
+    ); // let browser handle "target=_blank" etc.
+
+    if (Platform.OS === 'web' && rest.href != null) {
+      if (!hasModifierKey && isLeftClick && isSelfTarget) {
+        e.preventDefault();
+        onPress?.(e);
+      }
+    } else {
+      onPress?.(e);
+    }
+  };
+
   const handlePressIn = (e: GestureResponderEvent) => {
     animateTo(pressOpacity, 0);
     onPressIn?.(e);
@@ -64,6 +87,11 @@ export function PlatformPressable({
 
   return (
     <AnimatedPressable
+      accessible
+      accessibilityRole={
+        Platform.OS === 'web' && rest.href != null ? 'link' : 'button'
+      }
+      onPress={disabled ? undefined : handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       android_ripple={
@@ -73,8 +101,8 @@ export function PlatformPressable({
                 pressColor !== undefined
                   ? pressColor
                   : dark
-                  ? 'rgba(255, 255, 255, .32)'
-                  : 'rgba(0, 0, 0, .32)',
+                    ? 'rgba(255, 255, 255, .32)'
+                    : 'rgba(0, 0, 0, .32)',
               ...android_ripple,
             }
           : undefined

package/src/ResourceSavingView.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
 
 type Props = {
   visible: boolean;

package/src/SafeAreaProviderCompat.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import {
   Dimensions,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 import {
   initialWindowMetrics,

package/src/Screen.tsx

@@ -1,12 +1,18 @@
 import {
   NavigationContext,
-  NavigationProp,
+  type NavigationProp,
   NavigationRouteContext,
-  ParamListBase,
-  RouteProp,
+  type ParamListBase,
+  type RouteProp,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,
@@ -59,6 +65,9 @@ export function Screen(props: Props) {
       accessibilityElementsHidden={!focused}
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       style={[styles.container, style]}
+      // On Fabric we need to disable collapsing for the background to ensure
+      // that we won't render unnecessary views due to the view flattening.
+      collapsable={false}
     >
       <View style={styles.content}>
         <HeaderShownContext.Provider

package/src/Text.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { Text as NativeText, type TextProps } from 'react-native';
+
+export function Text({ style, ...rest }: TextProps) {
+  const { colors, fonts } = useTheme();
+
+  return (
+    <NativeText
+      {...rest}
+      style={[{ color: colors.text }, fonts.regular, style]}
+    />
+  );
+}

package/src/getDefaultSidebarWidth.tsx

@@ -0,0 +1,22 @@
+import { Platform } from 'react-native';
+
+export const getDefaultSidebarWidth = ({
+  height,
+  width,
+}: {
+  height: number;
+  width: number;
+}) => {
+  /*
+   * Default sidebar width is screen width - header height
+   * with a max width of 280 on mobile and 320 on tablet
+   * https://material.io/components/navigation-drawer
+   */
+  const smallerAxisSize = Math.min(height, width);
+  const isLandscape = width > height;
+  const isTablet = smallerAxisSize >= 600;
+  const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
+  const maxWidth = isTablet ? 320 : 280;
+
+  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
+};

package/src/getNamedContext.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 const contexts = '__react_navigation__elements_contexts';
 
 declare global {
+  // eslint-disable-next-line no-var
   var __react_navigation__elements_contexts: Map<string, React.Context<any>>;
 }
 

package/src/index.tsx

@@ -1,19 +1,25 @@
 export { Background } from './Background';
+export { Button } from './Button';
+export { getDefaultSidebarWidth } from './getDefaultSidebarWidth';
 export { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 export { getHeaderTitle } from './Header/getHeaderTitle';
 export { Header } from './Header/Header';
 export { HeaderBackButton } from './Header/HeaderBackButton';
 export { HeaderBackContext } from './Header/HeaderBackContext';
 export { HeaderBackground } from './Header/HeaderBackground';
+export { HeaderButton } from './Header/HeaderButton';
 export { HeaderHeightContext } from './Header/HeaderHeightContext';
 export { HeaderShownContext } from './Header/HeaderShownContext';
 export { HeaderTitle } from './Header/HeaderTitle';
 export { useHeaderHeight } from './Header/useHeaderHeight';
+export { getLabel } from './Label/getLabel';
+export { Label } from './Label/Label';
 export { MissingIcon } from './MissingIcon';
 export { PlatformPressable } from './PlatformPressable';
 export { ResourceSavingView } from './ResourceSavingView';
 export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { Screen } from './Screen';
+export { Text } from './Text';
 
 export const Assets = [
   // eslint-disable-next-line import/no-commonjs

package/src/types.tsx

@@ -148,6 +148,26 @@ export type HeaderTitleProps = {
 };
 
 export type HeaderButtonProps = {
+  /**
+   * Callback to call when the button is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Accessibility label for the button for screen readers.
+   */
+  accessibilityLabel?: string;
+  /**
+   * ID to locate this button in tests.
+   */
+  testID?: string;
   /**
    * Tint color for the header button.
    */
@@ -161,20 +181,16 @@ export type HeaderButtonProps = {
    */
   pressOpacity?: number;
   /**
-   * Whether it's possible to navigate back in stack.
-   */
-  canGoBack?: boolean;
-};
-
-export type HeaderBackButtonProps = HeaderButtonProps & {
-  /**
-   * Whether the button is disabled.
+   * Style object for the button.
    */
-  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
   /**
-   * Callback to call when the button is pressed.
+   * Content to render for the button. Usually the icon.
    */
-  onPress?: () => void;
+  children: React.ReactNode;
+};
+
+export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
   /**
    * Function which returns a React Element to display custom image in header's back button.
    */
@@ -213,16 +229,4 @@ export type HeaderBackButtonProps = HeaderButtonProps & {
    * Layout of the title element in the header.
    */
   titleLayout?: Layout;
-  /**
-   * Accessibility label for the button for screen readers.
-   */
-  accessibilityLabel?: string;
-  /**
-   * ID to locate this button in tests.
-   */
-  testID?: string;
-  /**
-   * Style object for the button.
-   */
-  style?: StyleProp<ViewStyle>;
 };