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

package/lib/typescript/src/types.d.ts

@@ -1,10 +1,49 @@
-import type { Animated, ColorValue, LayoutChangeEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import type { MaterialSymbolProps } from '@react-navigation/native';
+import * as React from 'react';
+import type { Animated, ColorValue, ImageSourcePropType, LayoutChangeEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
 import type { BlurEffectType } from './getBlurBackgroundColor';
 export type HeaderBackButtonDisplayMode = 'default' | 'generic' | 'minimal';
 export type Layout = {
     width: number;
     height: number;
 };
+type IconImage = {
+    /**
+     * - `image` - Use a local image as the icon.
+     */
+    type: 'image';
+    /**
+     * Image source to use as the icon.
+     * - Local image: `require('./path/to/image.png')`
+     * - Drawable resource or xcasset: `{ uri: 'image_name' }`
+     */
+    source: ImageSourcePropType;
+    /**
+     * Whether to apply tint color to the image.
+     * Disabling will keep the image's original colors.
+     *
+     * Defaults to `true`.
+     */
+    tinted?: boolean;
+};
+type IconSfSymbol = {
+    /**
+     * - `sfSymbol` - Use an SF Symbol as the icon on iOS.
+     */
+    type: 'sfSymbol';
+    /**
+     * Name of the SF Symbol to use as the icon.
+     */
+    name: SFSymbol;
+};
+type IconMaterialSymbol = {
+    /**
+     * - `materialSymbol` - Use a Material Symbol as the icon on Android.
+     */
+    type: 'materialSymbol';
+} & Pick<MaterialSymbolProps, 'name' | 'variant' | 'weight'>;
+export type Icon = IconSfSymbol | IconMaterialSymbol | IconImage;
 export type HeaderSearchBarRef = {
     focus: () => void;
     blur: () => void;
@@ -23,59 +62,59 @@ export type HeaderSearchBarOptions = {
      * - `clearText` - removes any text present in the search bar input field
      * - `cancelSearch` - cancel the search and close the search bar
      */
-    ref?: React.Ref<HeaderSearchBarRef>;
+    ref?: React.Ref<HeaderSearchBarRef> | undefined;
     /**
      * The auto-capitalization behavior
      */
-    autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters' | 'systemDefault';
+    autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters' | 'systemDefault' | undefined;
     /**
      * Automatically focuses search input on mount
      */
-    autoFocus?: boolean;
+    autoFocus?: boolean | undefined;
     /**
      * The text to be used instead of default `Cancel` button text
      *
      * @platform ios
      */
-    cancelButtonText?: string;
+    cancelButtonText?: string | undefined;
     /**
      * Sets type of the input. Defaults to `text`.
      */
-    inputType?: 'text' | 'phone' | 'number' | 'email';
+    inputType?: 'text' | 'phone' | 'number' | 'email' | undefined;
     /**
      * Determines how the return key should look. Defaults to `search`.
      */
-    enterKeyHint?: TextInputProps['enterKeyHint'];
+    enterKeyHint?: TextInputProps['enterKeyHint'] | undefined;
     /**
      * A callback that gets called when search input has lost focus
      */
-    onBlur?: TextInputProps['onBlur'];
+    onBlur?: TextInputProps['onBlur'] | undefined;
     /**
      * A callback that gets called when the text changes.
      * It receives the current text value of the search input.
      */
-    onChange?: TextInputProps['onChange'];
+    onChange?: TextInputProps['onChange'] | undefined;
     /**
      * Callback that is called when the submit button is pressed.
      * It receives the current text value of the search input.
      */
-    onSubmitEditing?: TextInputProps['onSubmitEditing'];
+    onSubmitEditing?: TextInputProps['onSubmitEditing'] | undefined;
     /**
      * A callback that gets called when search input is opened
      */
-    onOpen?: () => void;
+    onOpen?: (() => void) | undefined;
     /**
      * A callback that gets called when search input is closed
      */
-    onClose?: () => void;
+    onClose?: (() => void) | undefined;
     /**
      * A callback that gets called when search input has received focus
      */
-    onFocus?: TextInputProps['onFocus'];
+    onFocus?: TextInputProps['onFocus'] | undefined;
     /**
      * Text displayed when search field is empty
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
 };
 export type HeaderOptions = {
     /**
@@ -85,28 +124,28 @@ export type HeaderOptions = {
      * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
      * The title string is passed in `children`.
      */
-    headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+    headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode) | undefined;
     /**
      * How to align the the header title.
      * Defaults to `center` on iOS and `left` on Android.
      */
-    headerTitleAlign?: 'left' | 'center';
+    headerTitleAlign?: 'left' | 'center' | undefined;
     /**
      * Style object for the title component.
      */
-    headerTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+    headerTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
     /**
      * Style object for the container of the `headerTitle` element.
      */
-    headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
     /**
      * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
      */
-    headerTitleAllowFontScaling?: boolean;
+    headerTitleAllowFontScaling?: boolean | undefined;
     /**
      * Options to render a search bar.
      */
-    headerSearchBarOptions?: HeaderSearchBarOptions;
+    headerSearchBarOptions?: HeaderSearchBarOptions | undefined;
     /**
      * How the back button displays icon and title.
      *
@@ -117,25 +156,25 @@ export type HeaderOptions = {
      *
      * Defaults to "default" on iOS, and "minimal" on other platforms.
      */
-    headerBackButtonDisplayMode?: HeaderBackButtonDisplayMode;
+    headerBackButtonDisplayMode?: HeaderBackButtonDisplayMode | undefined;
     /**
      * Style object for header back title. Supported properties:
      * - fontFamily
      * - fontSize
      */
     headerBackTitleStyle?: StyleProp<{
-        fontFamily?: string;
-        fontSize?: number;
-    }>;
+        fontFamily?: string | undefined;
+        fontSize?: number | undefined;
+    }> | undefined;
     /**
      * Function which returns a React Element to display on the left side of the header.
      */
-    headerLeft?: (props: HeaderBackButtonProps & {
+    headerLeft?: ((props: HeaderBackButtonProps & {
         /**
          * Whether it's possible to navigate back.
          */
-        canGoBack?: boolean;
-    }) => React.ReactNode;
+        canGoBack?: boolean | undefined;
+    }) => React.ReactNode) | undefined;
     /**
      * Whether the liquid glass background is visible for the item.
      *
@@ -144,20 +183,20 @@ export type HeaderOptions = {
      *
      * Defaults to `true`.
      */
-    headerLeftBackgroundVisible?: boolean;
+    headerLeftBackgroundVisible?: boolean | undefined;
     /**
      * Style object for the container of the `headerLeft` element`.
      */
-    headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
     /**
      * Function which returns a React Element to display on the right side of the header.
      */
-    headerRight?: (props: {
-        tintColor?: ColorValue;
-        pressColor?: ColorValue;
-        pressOpacity?: number;
+    headerRight?: ((props: {
+        tintColor?: ColorValue | undefined;
+        pressColor?: ColorValue | undefined;
+        pressOpacity?: number | undefined;
         canGoBack: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
     /**
      * Whether the liquid glass background is visible for the item.
      *
@@ -166,41 +205,41 @@ export type HeaderOptions = {
      *
      * Defaults to `true`.
      */
-    headerRightBackgroundVisible?: boolean;
+    headerRightBackgroundVisible?: boolean | undefined;
     /**
      * Style object for the container of the `headerRight` element.
      */
-    headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
     /**
      * Color for material ripple (Android >= 5.0 only).
      */
-    headerPressColor?: ColorValue;
+    headerPressColor?: ColorValue | undefined;
     /**
      * Color for material ripple (Android >= 5.0 only).
      */
-    headerPressOpacity?: number;
+    headerPressOpacity?: number | undefined;
     /**
      * Tint color for the header.
      */
-    headerTintColor?: ColorValue;
+    headerTintColor?: ColorValue | undefined;
     /**
      * Function which returns a React Element to render as the background of the header.
      * This is useful for using backgrounds such as an image, a gradient, blur effect etc.
      * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
      */
-    headerBackground?: (props: {
+    headerBackground?: ((props: {
         style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
     /**
      * Style object for the container of the `headerBackground` element.
      */
-    headerBackgroundContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    headerBackgroundContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
     /**
      * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
      * The header will also float over the screen so that it overlaps the content underneath.
      * This is useful if you want to render a semi-transparent header or a blurred background.
      */
-    headerTransparent?: boolean;
+    headerTransparent?: boolean | undefined;
     /**
      * Blur effect for the translucent header.
      * The `headerTransparent` option needs to be set to `true` for this to work.
@@ -209,11 +248,11 @@ export type HeaderOptions = {
      *
      * @platform web
      */
-    headerBlurEffect?: BlurEffectType | 'none';
+    headerBlurEffect?: BlurEffectType | 'none' | undefined;
     /**
      * Style object for the header. You can specify a custom background color here, for example.
      */
-    headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
     /**
      * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
      *
@@ -230,13 +269,13 @@ export type HeaderOptions = {
      * If the above styles are specified in `headerStyle` along with `headerShadowVisible: false`,
      * then `headerShadowVisible: false` will take precedence.
      */
-    headerShadowVisible?: boolean;
+    headerShadowVisible?: boolean | undefined;
     /**
      * Extra padding to add at the top of header to account for translucent status bar.
      * By default, it uses the top value from the safe area insets of the device.
      * Pass 0 or a custom value to disable the default behaviour, and customize the height.
      */
-    headerStatusBarHeight?: number;
+    headerStatusBarHeight?: number | undefined;
 };
 export type HeaderTitleProps = {
     /**
@@ -246,57 +285,57 @@ export type HeaderTitleProps = {
     /**
      * Whether title font should scale to respect Text Size accessibility settings.
      */
-    allowFontScaling?: boolean;
+    allowFontScaling?: boolean | undefined;
     /**
      * Tint color for the header.
      */
-    tintColor?: ColorValue;
+    tintColor?: ColorValue | undefined;
     /**
      * Callback to trigger when the size of the title element changes.
      */
-    onLayout?: (e: LayoutChangeEvent) => void;
+    onLayout?: ((e: LayoutChangeEvent) => void) | undefined;
     /**
      * Style object for the title element.
      */
-    style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+    style?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
 };
 export type HeaderButtonProps = {
     /**
      * Callback to call when the button is pressed.
      */
-    onPress?: () => void;
+    onPress?: (() => void) | undefined;
     /**
      * The `href` to use for the anchor tag on web
      */
-    href?: string;
+    href?: string | undefined;
     /**
      * Whether the button is disabled.
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Accessibility label for the button for screen readers.
      */
-    accessibilityLabel?: string;
+    accessibilityLabel?: string | undefined;
     /**
      * ID to locate this button in tests.
      */
-    testID?: string;
+    testID?: string | undefined;
     /**
      * Tint color for the header button.
      */
-    tintColor?: ColorValue;
+    tintColor?: ColorValue | undefined;
     /**
      * Color for material ripple (Android >= 5.0 only).
      */
-    pressColor?: ColorValue;
+    pressColor?: ColorValue | undefined;
     /**
      * Opacity when the button is pressed, used when ripple is not supported.
      */
-    pressOpacity?: number;
+    pressOpacity?: number | undefined;
     /**
      * Style object for the button.
      */
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle> | undefined;
     /**
      * Content to render for the button. Usually the icon.
      */
@@ -304,20 +343,30 @@ export type HeaderButtonProps = {
 };
 export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
     /**
-     * Function which returns a React Element to display custom image in header's back button.
+     * Icon to display for the back button.
+     *
+     * Supported types:
+     * - image: custom image source
+     * - sfSymbol: SF Symbol icon (iOS only)
+     * - materialSymbol: material symbol icon (Android only)
+     * - React Node: function that returns a React Element
+     *
+     * Defaults to back icon image for the platform
+     * - A chevron on iOS
+     * - An arrow on Android
      */
-    backImage?: (props: {
-        tintColor: ColorValue;
-    }) => React.ReactNode;
+    icon?: Icon | ((props: {
+        tintColor: ColorValue | undefined;
+    }) => React.ReactNode) | undefined;
     /**
      * Label text for the button. Usually the title of the previous screen.
      * By default, this is only shown on iOS.
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Label text to show when there isn't enough space for the full label.
      */
-    truncatedLabel?: string;
+    truncatedLabel?: string | undefined;
     /**
      * How the back button displays icon and title.
      *
@@ -328,14 +377,15 @@ export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
      *
      * Defaults to "default" on iOS, and "minimal" on other platforms.
      */
-    displayMode?: HeaderBackButtonDisplayMode;
+    displayMode?: HeaderBackButtonDisplayMode | undefined;
     /**
      * Style object for the label.
      */
-    labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+    labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
     /**
      * Whether label font should scale to respect Text Size accessibility settings.
      */
-    allowFontScaling?: boolean;
+    allowFontScaling?: boolean | undefined;
 };
+export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.20",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -48,31 +48,32 @@
   },
   "dependencies": {
     "color": "^4.2.3",
+    "sf-symbols-typescript": "^2.2.0",
     "use-latest-callback": "^0.3.2",
     "use-sync-external-store": "^1.5.0"
   },
   "devDependencies": {
     "@callstack/liquid-glass": "^0.6.0",
     "@jest/globals": "^30.0.0",
-    "@react-navigation/native": "^8.0.0-alpha.2",
-    "@testing-library/react-native": "^13.2.1",
-    "@types/react": "~19.1.10",
+    "@react-navigation/native": "^8.0.0-alpha.17",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/react": "~19.2.2",
     "@types/use-sync-external-store": "^1.5.0",
     "del-cli": "^6.0.0",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
     "react-native-builder-bob": "^0.40.12",
-    "react-native-screens": "^4.20.0",
-    "react-test-renderer": "19.1.0",
-    "typescript": "^5.9.2"
+    "react-native-screens": "^4.24.0",
+    "react-test-renderer": "19.2.0",
+    "typescript": "^6.0.2"
   },
   "peerDependencies": {
     "@callstack/liquid-glass": ">= 0.6.0",
-    "@react-navigation/native": "^8.0.0-alpha.2",
-    "react": ">= 19.0.0",
+    "@react-navigation/native": "^8.0.0-alpha.17",
+    "react": ">= 19.2.0",
     "react-native": "*",
     "react-native-safe-area-context": ">= 5.5.0",
-    "react-native-screens": ">= 4.19.0"
+    "react-native-screens": ">= 4.24.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -92,5 +93,5 @@
       ]
     ]
   },
-  "gitHead": "9664da8fff3bd7ed575bf12ddfcc47b3a42be997"
+  "gitHead": "97bdf9c98215e82b3c80fb3820ab072867283d54"
 }

package/src/ActivityView.native.tsx

@@ -0,0 +1,90 @@
+import { Activity, useEffect, useState } from 'react';
+import {
+  type HostComponent,
+  NativeComponentRegistry,
+  type ViewProps,
+} from 'react-native';
+
+// eslint-disable-next-line import-x/extensions
+import type { Props } from './ActivityView.tsx';
+import { Container } from './Container';
+
+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';
+
+  return (
+    <Activity mode={activityMode}>
+      <ActivityContentView style={{ display: 'contents' }}>
+        <Container
+          inert={mode !== 'normal'}
+          style={{
+            ...style,
+            /**
+             * The visibility of the nested view is controlled by `Activity`
+             * It'll be overridden to `display: 'none'` when `mode="hidden"` regardless of what we set
+             * So we set the visibility on another view instead
+             */
+            display,
+          }}
+        >
+          {children}
+        </Container>
+      </ActivityContentView>
+    </Activity>
+  );
+}
+
+const STYLE: Record<string, true | { process?: (arg1: any) => any }> = {
+  display: {
+    /**
+     * React `Activity` sets `display: 'none'` when `mode="hidden"` to unmount effects
+     * But we want to keep the content visible, so we switch it to `display: 'contents'`
+     */
+    process: () => 'contents',
+  },
+};
+
+const VIEW_CONFIG = {
+  uiViewClassName: 'RCTView',
+  validAttributes: {
+    style: STYLE,
+  },
+};
+
+type ActivityContentViewProps = Omit<ViewProps, 'style'> & {
+  style?:
+    | {
+        display?: 'contents' | undefined;
+      }
+    | undefined;
+};
+
+const ActivityContentView: HostComponent<ActivityContentViewProps> =
+  NativeComponentRegistry.get<ActivityContentViewProps>(
+    'ReactNavigationActivityContentView',
+    () => VIEW_CONFIG
+  );