@react-navigation/elements 3.0.0-alpha.11 → 3.0.0-alpha.13

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';

package/src/Button.tsx

@@ -15,8 +15,8 @@ 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[];
 };
 

package/src/Container.tsx

@@ -1,20 +1,24 @@
 import { Platform, View, type ViewStyle } from 'react-native';
 
 export type Props = {
-  inert?: boolean;
-  style?: ViewStyle &
-    Omit<React.CSSProperties, 'backgroundColor'> & {
-      backgroundColor?: ViewStyle['backgroundColor'];
-    };
+  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={{
@@ -32,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.
    */
@@ -402,6 +408,7 @@ export function Header(props: Props) {
           },
         ]}
       >
+        <UNSTABLE_CornerInset direction="horizontal" edge="left" />
         <View
           style={[
             styles.start,

package/src/Header/HeaderBackButton.tsx

@@ -119,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;
 }) {

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({

package/src/Header/HeaderSearchBar.tsx

@@ -30,11 +30,11 @@ import { HeaderIcon } from './HeaderIcon';
 type Props = Omit<HeaderSearchBarOptions, 'ref'> & {
   visible: boolean;
   onClose: () => void;
-  tintColor?: ColorValue;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
+  tintColor?: ColorValue | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
   statusBarHeight: number;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
 };
 
 const INPUT_TYPE_TO_MODE = {

package/src/Header/HeaderTitle.tsx

@@ -10,9 +10,9 @@ import {
 } from 'react-native';
 
 type Props = Omit<TextProps, 'style'> & {
-  tintColor?: ColorValue;
-  children?: string;
-  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  tintColor?: ColorValue | undefined;
+  children?: string | undefined;
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
 };
 
 export function HeaderTitle({ tintColor, style, ...rest }: Props) {

package/src/Header/getHeaderTitle.tsx

@@ -1,7 +1,10 @@
 import type { HeaderOptions } from '../types';
 
 export function getHeaderTitle(
-  options: { title?: string; headerTitle?: HeaderOptions['headerTitle'] },
+  options: {
+    title?: string | undefined;
+    headerTitle?: HeaderOptions['headerTitle'];
+  },
   fallback: string
 ): string {
   return typeof options.headerTitle === 'string'

package/src/Label/getLabel.tsx

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

package/src/PlatformPressable.tsx

@@ -19,14 +19,18 @@ type HoverEffectProps = {
 };
 
 export type Props = Omit<PressableProps, 'style' | 'onPress'> & {
-  href?: string;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
-  hoverEffect?: HoverEffectProps;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  onPress?: (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => void;
+  href?: string | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
+  hoverEffect?: HoverEffectProps | undefined;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
+  onPress?:
+    | ((
+        e:
+          | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+          | GestureResponderEvent
+      ) => void)
+    | undefined;
   children: React.ReactNode;
 };
 

package/src/Screen.tsx

@@ -9,22 +9,22 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { Container } from './Container';
 import { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 import { HeaderHeightContext } from './Header/HeaderHeightContext';
 import { HeaderShownContext } from './Header/HeaderShownContext';
-import { Container } from './internal';
 import { useFrameSize } from './useFrameSize';
 
 type Props = {
   focused: boolean;
-  modal?: boolean;
+  modal?: boolean | undefined;
   navigation: NavigationProp<ParamListBase>;
   route: RouteProp<ParamListBase>;
   header: React.ReactNode;
-  headerShown?: boolean;
-  headerStatusBarHeight?: number;
-  headerTransparent?: boolean;
-  style?: React.ComponentProps<typeof Container>['style'];
+  headerShown?: boolean | undefined;
+  headerStatusBarHeight?: number | undefined;
+  headerTransparent?: boolean | undefined;
+  style?: React.ComponentProps<typeof Container>['style'] | undefined;
   children: React.ReactNode;
 };
 

package/src/internal.tsx

@@ -1,6 +1,6 @@
+export { ActivityView } from './ActivityView';
 export { Color } from './Color';
 export { Container, type Props as ContainerProps } from './Container';
-export { Lazy } from './Lazy';
 export { isLiquidGlassSupported } from './LiquidGlassView';
 export { MissingIcon } from './MissingIcon';
 export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';