@react-navigation/elements 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/ActivityView.tsx

@@ -0,0 +1,129 @@
+import { Activity, useCallback, useEffect, useState } from 'react';
+import { Platform, View, type ViewStyle } from 'react-native';
+
+import { Container } from './Container';
+
+export type Props = {
+  /**
+   * Mode of the activity view
+   * - `normal`: The view renders normally
+   * - `inert`: Content is not interactive
+   * - `paused`: Effects are unmounted and content is not interactive
+   */
+  mode: 'normal' | 'inert' | 'paused';
+  /**
+   * Whether the content is visible or not
+   */
+  visible: boolean;
+  /**
+   * Delay before pausing effects.
+   * So pending animations have time to finish.
+   *
+   * Defaults to 500ms.
+   */
+  delay?: number | undefined;
+  /**
+   * The style for the container view
+   */
+  style?: Omit<React.CSSProperties & ViewStyle, 'display'> | undefined;
+  /**
+   * The content of the activity view
+   */
+  children: React.ReactNode;
+};
+
+export function ActivityView({
+  mode,
+  visible,
+  delay = 500,
+  style,
+  children,
+}: Props) {
+  const [delayedMode, setDelayedMode] = useState(mode);
+
+  useEffect(() => {
+    if (!delay) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setDelayedMode(mode);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [delay, mode]);
+
+  const display = visible ? 'flex' : 'none';
+  const activityMode =
+    mode !== 'paused' || (delay && delayedMode !== 'paused')
+      ? 'visible'
+      : 'hidden';
+
+  /**
+   * Activity has 2 modes, visible and hidden - hidden unmounts effects
+   * But what we want is to unmount effects, without hiding content
+   * So we use hidden mode, but unset display: none to make content visible
+   */
+  const onRef = useCallback(
+    (node: HTMLDivElement | View | null) => {
+      if (Platform.OS !== 'web' || !(node && node instanceof HTMLElement)) {
+        return;
+      }
+
+      const observers: MutationObserver[] = [];
+
+      const observe = () => {
+        // Remove previous observers
+        observers.forEach((o) => o.disconnect());
+        observers.length = 0;
+
+        const children = node.childNodes;
+
+        // When the style attribute for children is updated by React
+        // We observe it and update display to make content visible
+        children.forEach((child) => {
+          if (child instanceof HTMLElement) {
+            child.style.display = display;
+
+            const o = new MutationObserver(() => {
+              child.style.display = display;
+            });
+
+            o.observe(child, {
+              attributes: true,
+              attributeFilter: ['style'],
+            });
+
+            observers.push(o);
+          }
+        });
+      };
+
+      observe();
+
+      // React removes refs when `Activity` is hidden
+      // So we render outside of the `Activity` and observer child list
+      const observer = new MutationObserver(observe);
+
+      observer.observe(node, {
+        childList: true,
+      });
+
+      return () => {
+        observer.disconnect();
+        observers.forEach((o) => o.disconnect());
+      };
+    },
+    [display]
+  );
+
+  return (
+    <Container ref={onRef} style={{ display: 'contents' }}>
+      <Activity mode={activityMode}>
+        <Container inert={mode !== 'normal'} style={{ ...style, display }}>
+          {children}
+        </Container>
+      </Activity>
+    </Container>
+  );
+}

package/src/Badge.tsx

@@ -19,15 +19,15 @@ type Props = TextProps & {
   /**
    * Content of the `Badge`.
    */
-  children?: string | number;
+  children?: string | number | undefined;
   /**
    * Size of the `Badge`.
    */
-  size?: number;
+  size?: number | undefined;
   /**
    * Style object for the tab bar container.
    */
-  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
 };
 
 const useNativeDriver = Platform.OS !== 'web';
@@ -49,17 +49,19 @@ export function Badge({
       return;
     }
 
-    Animated.timing(opacity, {
+    const animation = Animated.timing(opacity, {
       toValue: visible ? 1 : 0,
       duration: 150,
       useNativeDriver,
-    }).start(({ finished }) => {
+    });
+
+    animation.start(({ finished }) => {
       if (finished && !visible) {
         setRendered(false);
       }
     });
 
-    return () => opacity.stopAnimation();
+    return () => animation.stop();
   }, [opacity, rendered, visible]);
 
   if (!rendered) {
@@ -73,7 +75,7 @@ export function Badge({
   // @ts-expect-error: backgroundColor definitely exists
   const { backgroundColor = colors.notification, ...restStyle } =
     StyleSheet.flatten(style) || {};
-  const textColor = Color(backgroundColor)?.isLight() ? 'black' : 'white';
+  const textColor = Color.foreground(backgroundColor);
 
   const borderRadius = size / 2;
   const fontSize = Math.floor((size * 3) / 4);

package/src/Button.tsx

@@ -15,15 +15,15 @@ import {
 import { Text } from './Text';
 
 type ButtonBaseProps = Omit<PlatformPressableProps, 'children'> & {
-  variant?: 'plain' | 'tinted' | 'filled';
-  color?: ColorValue;
+  variant?: 'plain' | 'tinted' | 'filled' | undefined;
+  color?: ColorValue | undefined;
   children: string | string[];
 };
 
 type ButtonLinkProps<
   ParamList extends {} = RootParamList,
   RouteName extends keyof ParamList = keyof ParamList,
-> = LinkProps<ParamList, RouteName> & Omit<ButtonBaseProps, 'onPress'>;
+> = LinkProps<ParamList, RouteName> & ButtonBaseProps;
 
 const BUTTON_RADIUS = 40;
 
@@ -54,12 +54,22 @@ function ButtonLink<
   params,
   action,
   href,
+  onPress,
   ...rest
 }: ButtonLinkProps<ParamList, RouteName>) {
   // @ts-expect-error: This is already type-checked by the prop types
   const props = useLinkProps({ screen, params, action, href });
 
-  return <ButtonBase {...rest} {...props} />;
+  return (
+    <ButtonBase
+      {...rest}
+      {...props}
+      onPress={(e) => {
+        onPress?.(e);
+        props.onPress?.(e);
+      }}
+    />
+  );
 }
 
 function ButtonBase({
@@ -90,9 +100,7 @@ function ButtonBase({
       break;
     case 'filled':
       backgroundColor = color;
-      textColor = Color(color)?.isDark()
-        ? 'white'
-        : (Color(color)?.darken(0.71).string() ?? '#fff');
+      textColor = Color.foreground(backgroundColor);
       break;
   }
 

package/src/Color.tsx

@@ -1,10 +1,10 @@
 // eslint-disable-next-line no-restricted-imports
 import OriginalColor from 'color';
-import type { ColorValue } from 'react-native';
+import { type ColorValue, Platform } from 'react-native';
+
+import { DynamicColorIOS, PlatformColor } from './PlatformColor';
 
 type ColorType = {
-  isLight(): boolean;
-  isDark(): boolean;
   alpha(amount: number): ColorType;
   alpha(): number;
   fade(amount: number): ColorType;
@@ -19,3 +19,133 @@ export function Color(value: ColorValue): ColorType | undefined {
 
   return undefined;
 }
+
+Color.foreground = (color: ColorValue): ColorValue => {
+  const value = color as unknown;
+
+  if (typeof value === 'object' && value != null) {
+    // Special case for Android platform colors
+    // Available colors: https://developer.android.com/reference/android/R.color
+    if (
+      Platform.OS === 'android' &&
+      PlatformColor &&
+      'resource_paths' in value &&
+      Array.isArray(value.resource_paths) &&
+      typeof value.resource_paths[0] === 'string'
+    ) {
+      const name = value.resource_paths[0].replace('@android:color/', '');
+
+      if (name in ANDROID_COLOR_MAP) {
+        return PlatformColor(`@android:color/${ANDROID_COLOR_MAP[name]}`);
+      }
+    }
+
+    // Special case for iOS platform colors
+    if (
+      Platform.OS === 'ios' &&
+      PlatformColor &&
+      'semantic' in value &&
+      Array.isArray(value.semantic) &&
+      typeof value.semantic[0] === 'string'
+    ) {
+      const name = value.semantic[0];
+
+      if (name in IOS_COLOR_MAP) {
+        const foreground = IOS_COLOR_MAP[name];
+        return foreground === 'white' || foreground === 'black'
+          ? foreground
+          : PlatformColor(foreground);
+      }
+    }
+
+    // Special case for iOS dynamic colors
+    if (
+      Platform.OS === 'ios' &&
+      DynamicColorIOS &&
+      'dynamic' in value &&
+      typeof value.dynamic === 'object' &&
+      value.dynamic != null &&
+      'light' in value.dynamic &&
+      typeof value.dynamic.light === 'string' &&
+      'dark' in value.dynamic &&
+      typeof value.dynamic.dark === 'string'
+    ) {
+      const lightForeground = Color.foreground(value.dynamic.light);
+      const darkForeground = Color.foreground(value.dynamic.dark);
+
+      if (lightForeground && darkForeground) {
+        return DynamicColorIOS({
+          light: lightForeground,
+          dark: darkForeground,
+        });
+      }
+    }
+  } else if (typeof color === 'string' && !color.startsWith('var(')) {
+    const processed = OriginalColor(color);
+
+    if (processed.isLight()) {
+      return processed.darken(0.71).string();
+    }
+  }
+
+  return '#fff';
+};
+
+const ANDROID_COLOR_MAP: Record<string, string> = {
+  system_background_dark: 'system_on_background_dark',
+  system_background_light: 'system_on_background_light',
+  system_error_container_dark: 'system_on_error_container_dark',
+  system_error_container_light: 'system_on_error_container_light',
+  system_error_dark: 'system_on_error_dark',
+  system_error_light: 'system_on_error_light',
+  system_primary_container_dark: 'system_on_primary_container_dark',
+  system_primary_container_light: 'system_on_primary_container_light',
+  system_primary_dark: 'system_on_primary_dark',
+  system_primary_fixed: 'system_on_primary_fixed',
+  system_primary_light: 'system_on_primary_light',
+  system_secondary_container_dark: 'system_on_secondary_container_dark',
+  system_secondary_container_light: 'system_on_secondary_container_light',
+  system_secondary_dark: 'system_on_secondary_dark',
+  system_secondary_fixed: 'system_on_secondary_fixed',
+  system_secondary_light: 'system_on_secondary_light',
+  system_surface_dark: 'system_on_surface_dark',
+  system_surface_disabled: 'system_on_surface_disabled',
+  system_surface_light: 'system_on_surface_light',
+  system_surface_variant_dark: 'system_on_surface_variant_dark',
+  system_surface_variant_light: 'system_on_surface_variant_light',
+};
+
+const IOS_COLOR_MAP: Record<string, string> = {
+  systemBackground: 'label',
+  secondarySystemBackground: 'label',
+  tertiarySystemBackground: 'label',
+  systemGroupedBackground: 'label',
+  secondarySystemGroupedBackground: 'label',
+  tertiarySystemGroupedBackground: 'label',
+
+  systemFill: 'label',
+  secondarySystemFill: 'label',
+  tertiarySystemFill: 'label',
+  quaternarySystemFill: 'label',
+
+  systemRed: 'white',
+  systemGreen: 'white',
+  systemBlue: 'white',
+  systemIndigo: 'white',
+  systemPurple: 'white',
+  systemBrown: 'white',
+
+  systemOrange: 'black',
+  systemYellow: 'black',
+  systemMint: 'black',
+  systemTeal: 'black',
+  systemCyan: 'black',
+  systemPink: 'black',
+
+  systemGray: 'label',
+  systemGray2: 'label',
+  systemGray3: 'label',
+  systemGray4: 'label',
+  systemGray5: 'label',
+  systemGray6: 'label',
+};

package/src/Container.tsx

@@ -1,18 +1,33 @@
 import { Platform, View, type ViewStyle } from 'react-native';
 
 export type Props = {
-  inert?: boolean;
-  style?: React.CSSProperties & ViewStyle;
+  ref?: React.Ref<HTMLDivElement | View> | undefined;
+  inert?: boolean | undefined;
+  style?:
+    | (ViewStyle &
+        Omit<React.CSSProperties, 'backgroundColor'> & {
+          backgroundColor?: ViewStyle['backgroundColor'] | undefined;
+        })
+    | undefined;
   children: React.ReactNode;
 };
 
-export function Container({ inert, children, style }: Props) {
+export function Container({ ref, inert, children, style }: Props) {
   if (Platform.OS === 'web') {
+    const { backgroundColor, ...rest } = style ?? {};
+
     return (
       <div
+        ref={ref as React.Ref<HTMLDivElement> | undefined}
         inert={inert}
         aria-hidden={inert}
-        style={{ ...DEFAULT_STYLE, ...style }}
+        style={{
+          ...DEFAULT_STYLE,
+          ...rest,
+          backgroundColor:
+            // In practice we only get string on web instead of OpaqueValue
+            typeof backgroundColor === 'string' ? backgroundColor : undefined,
+        }}
       >
         {children}
       </div>
@@ -21,6 +36,7 @@ export function Container({ inert, children, style }: Props) {
 
   return (
     <View
+      ref={ref as React.Ref<View> | undefined}
       aria-hidden={inert}
       style={[{ pointerEvents: inert ? 'none' : 'box-none' }, style]}
       collapsable={false}

package/src/Header/Header.tsx

@@ -1,4 +1,8 @@
-import { useNavigation, useTheme } from '@react-navigation/native';
+import {
+  UNSTABLE_CornerInset,
+  useNavigation,
+  useTheme,
+} from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
@@ -30,20 +34,22 @@ type Props = HeaderOptions & {
   /**
    * Options for the back button.
    */
-  back?: {
-    /**
-     * Title of the previous screen.
-     */
-    title: string | undefined;
-    /**
-     * The `href` to use for the anchor tag on web
-     */
-    href: string | undefined;
-  };
+  back?:
+    | {
+        /**
+         * Title of the previous screen.
+         */
+        title: string | undefined;
+        /**
+         * The `href` to use for the anchor tag on web
+         */
+        href: string | undefined;
+      }
+    | undefined;
   /**
    * Whether the header is in a modal
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * Title text for the header.
    */
@@ -79,7 +85,7 @@ export function Header(props: Props) {
   const { colors } = useTheme();
 
   const navigation = useNavigation();
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isParentHeaderShown = React.use(HeaderShownContext);
 
   const [searchBarVisible, setSearchBarVisible] = React.useState(false);
 
@@ -321,21 +327,21 @@ export function Header(props: Props) {
       return;
     }
 
-    Animated.timing(searchBarVisibleAnim, {
+    const animation = Animated.timing(searchBarVisibleAnim, {
       toValue: searchBarVisible ? 1 : 0,
       duration: 150,
       useNativeDriver,
       easing: Easing.in(Easing.linear),
-    }).start(({ finished }) => {
+    });
+
+    animation.start(({ finished }) => {
       if (finished) {
         setSearchBarRendered(searchBarVisible);
         searchBarVisibleRef.current = searchBarVisible;
       }
     });
 
-    return () => {
-      searchBarVisibleAnim.stopAnimation();
-    };
+    return () => animation.stop();
   }, [searchBarVisible, searchBarVisibleAnim]);
 
   const headerOpacity = searchBarVisibleAnim.interpolate({
@@ -402,6 +408,7 @@ export function Header(props: Props) {
           },
         ]}
       >
+        <UNSTABLE_CornerInset direction="horizontal" edge="left" />
         <View
           style={[
             styles.start,
@@ -458,7 +465,23 @@ export function Header(props: Props) {
                   headerSearchBarOptions?.onOpen?.();
                 }}
               >
-                <HeaderIcon source={searchIcon} tintColor={iconTintColor} />
+                <HeaderIcon
+                  icon={Platform.select({
+                    android: {
+                      type: 'materialSymbol',
+                      name: 'search',
+                    },
+                    ios: {
+                      type: 'sfSymbol',
+                      name: 'magnifyingglass',
+                    },
+                    default: {
+                      type: 'image',
+                      source: searchIcon,
+                    },
+                  })}
+                  color={iconTintColor}
+                />
               </HeaderButton>
             ) : null}
           </HeaderButtonBackground>
@@ -540,7 +563,7 @@ const styles = StyleSheet.create({
     maxWidth: '50%',
   },
   background: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     pointerEvents: 'box-none',
   },
 });

package/src/Header/HeaderBackButton.tsx

@@ -12,11 +12,12 @@ import {
   View,
 } from 'react-native';
 
-import backIcon from '../assets/back-icon.png';
+import backIconImage from '../assets/back-icon.png';
 import { isLiquidGlassSupported } from '../LiquidGlassView';
 import type {
   HeaderBackButtonDisplayMode,
   HeaderBackButtonProps,
+  Icon,
 } from '../types';
 import { BUTTON_SIZE, HeaderButton } from './HeaderButton';
 import { HeaderIcon } from './HeaderIcon';
@@ -24,7 +25,7 @@ import { HeaderIcon } from './HeaderIcon';
 export function HeaderBackButton({
   disabled,
   allowFontScaling,
-  backImage,
+  icon,
   label,
   labelStyle,
   displayMode = 'minimal',
@@ -48,17 +49,30 @@ export function HeaderBackButton({
   const isMinimal = displayMode === 'minimal' || measuredMinimal;
 
   const renderBackImage = () => {
-    if (backImage) {
-      return backImage({ tintColor: tintColor ?? colors.text });
-    } else {
-      return (
-        <HeaderIcon
-          source={backIcon}
-          tintColor={tintColor ?? colors.text}
-          style={styles.icon}
-        />
-      );
+    const color = tintColor ?? colors.text;
+
+    if (typeof icon === 'function') {
+      return icon({ tintColor: color });
     }
+
+    const backIcon =
+      icon ??
+      Platform.select<Icon>({
+        ios: {
+          type: 'sfSymbol',
+          name: 'chevron.left',
+        },
+        android: {
+          type: 'materialSymbol',
+          name: 'arrow_back',
+        },
+        default: {
+          type: 'image',
+          source: backIconImage,
+        },
+      });
+
+    return <HeaderIcon icon={backIcon} color={color} style={styles.icon} />;
   };
 
   const handlePress = () => {
@@ -105,11 +119,11 @@ function HeaderBackLabel({
   truncatedLabel,
   onMeasureMinimal,
 }: {
-  allowFontScaling?: boolean;
+  allowFontScaling?: boolean | undefined;
   displayMode: HeaderBackButtonDisplayMode;
   label: string | undefined;
-  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-  tintColor?: ColorValue;
+  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
+  tintColor?: ColorValue | undefined;
   truncatedLabel: string | undefined;
   onMeasureMinimal: () => void;
 }) {
@@ -231,8 +245,8 @@ function HeaderBackLabel({
 // iOS uses a smaller chevron, Android uses a larger arrow
 const ICON_WIDTH = Platform.OS === 'ios' ? 13 : 24;
 const ICON_SPACING_START = isLiquidGlassSupported
-  ? 13 // Standard distance of chevron from left edge in liquid glass
-  : 0; // Otherwise icon is aligned to the start of the button
+  ? 15 // Standard distance of chevron from left edge in liquid glass
+  : 2; // Otherwise icon is aligned to the start of the button
 
 // Standard distance between chevron and label
 const ICON_LABEL_SPACING = 9;

package/src/Header/HeaderBackground.tsx

@@ -12,9 +12,9 @@ import { BlurEffectBackground } from '../BlurEffectBackground';
 import { type BlurEffectType } from '../getBlurBackgroundColor';
 
 type Props = Omit<ViewProps, 'style'> & {
-  blurEffect?: BlurEffectType | 'none';
-  style?: StyleProp<ViewStyle>;
-  children?: React.ReactNode;
+  blurEffect?: BlurEffectType | 'none' | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
+  children?: React.ReactNode | undefined;
 };
 
 export function HeaderBackground({