@react-navigation/elements 3.0.0-alpha.5 → 3.0.0-alpha.50

package/src/LiquidGlassView.ios.tsx

@@ -1,14 +1,20 @@
+import type {
+  LiquidGlassContainerViewProps,
+  LiquidGlassViewProps,
+} from '@callstack/liquid-glass';
 import { Animated, View } from 'react-native';
 
-type CallstackLiquidGlass = typeof import('@callstack/liquid-glass');
+type AnimatedLiquidGlassViewProps =
+  Animated.AnimatedProps<LiquidGlassViewProps>;
+
+type AnimatedLiquidGlassContainerViewProps =
+  Animated.AnimatedProps<LiquidGlassContainerViewProps>;
 
 let isLiquidGlassSupported: boolean,
-  LiquidGlassView: CallstackLiquidGlass['LiquidGlassView'],
-  LiquidGlassContainerView: CallstackLiquidGlass['LiquidGlassContainerView'],
-  AnimatedLiquidGlassView: Animated.AnimatedComponent<typeof LiquidGlassView>,
-  AnimatedLiquidGlassContainerView: Animated.AnimatedComponent<
-    typeof LiquidGlassContainerView
-  >;
+  LiquidGlassView: React.ComponentType<LiquidGlassViewProps>,
+  LiquidGlassContainerView: React.ComponentType<LiquidGlassContainerViewProps>,
+  AnimatedLiquidGlassView: React.ComponentType<AnimatedLiquidGlassViewProps>,
+  AnimatedLiquidGlassContainerView: React.ComponentType<AnimatedLiquidGlassContainerViewProps>;
 
 try {
   // Add try/catch to support usage even if it's not installed, since it's optional.
@@ -24,9 +30,8 @@ try {
 } catch (e) {
   isLiquidGlassSupported = false;
   LiquidGlassView = View;
-  // @ts-expect-error: this is fine
+  LiquidGlassContainerView = View;
   AnimatedLiquidGlassView = Animated.View;
-  // @ts-expect-error: this is fine
   AnimatedLiquidGlassContainerView = Animated.View;
 }
 

package/src/LiquidGlassView.tsx

@@ -1,20 +1,24 @@
+import type {
+  LiquidGlassContainerViewProps,
+  LiquidGlassViewProps,
+} from '@callstack/liquid-glass';
 import { Animated, View } from 'react-native';
 
-type CallstackLiquidGlass = typeof import('@callstack/liquid-glass');
+type AnimatedLiquidGlassViewProps =
+  Animated.AnimatedProps<LiquidGlassViewProps>;
 
-export const LiquidGlassView: CallstackLiquidGlass['LiquidGlassView'] = View;
+type AnimatedLiquidGlassContainerViewProps =
+  Animated.AnimatedProps<LiquidGlassContainerViewProps>;
 
-export const LiquidGlassContainerView: CallstackLiquidGlass['LiquidGlassContainerView'] =
+export const LiquidGlassView: React.ComponentType<LiquidGlassViewProps> = View;
+
+export const LiquidGlassContainerView: React.ComponentType<LiquidGlassContainerViewProps> =
   View;
 
-// @ts-expect-error: this is fine
-export const AnimatedLiquidGlassView: Animated.AnimatedComponent<
-  typeof LiquidGlassView
-> = Animated.View;
+export const AnimatedLiquidGlassView: React.ComponentType<AnimatedLiquidGlassViewProps> =
+  Animated.View;
 
-// @ts-expect-error: this is fine
-export const AnimatedLiquidGlassContainerView: Animated.AnimatedComponent<
-  typeof LiquidGlassContainerView
-> = Animated.View;
+export const AnimatedLiquidGlassContainerView: React.ComponentType<AnimatedLiquidGlassContainerViewProps> =
+  Animated.View;
 
 export const isLiquidGlassSupported = false;

package/src/MissingIcon.tsx

@@ -8,8 +8,8 @@ import {
 import { Text } from './Text';
 
 type Props = {
-  color?: ColorValue;
-  size?: number;
+  color: ColorValue;
+  size: number;
   style?: StyleProp<TextStyle>;
 };
 

package/src/PlatformColor.native.tsx

@@ -1 +1 @@
-export { PlatformColor } from 'react-native';
+export { DynamicColorIOS, PlatformColor } from 'react-native';

package/src/PlatformColor.tsx

@@ -6,3 +6,7 @@
 export const PlatformColor:
   | typeof import('react-native').PlatformColor
   | undefined = undefined;
+
+export const DynamicColorIOS:
+  | typeof import('react-native').DynamicColorIOS
+  | undefined = undefined;

package/src/PlatformIcon.tsx

@@ -0,0 +1,70 @@
+import { MaterialSymbol, SFSymbol } from '@react-navigation/native';
+import {
+  type ColorValue,
+  Image,
+  type ImageStyle,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+
+import type { Icon } from './types';
+
+export type PlatformIconStyle = ImageStyle & ViewStyle;
+
+export type PlatformIconProps = {
+  icon: Icon;
+  size: number;
+  color?: ColorValue | undefined;
+  style?: StyleProp<PlatformIconStyle> | undefined;
+};
+
+export function PlatformIcon({
+  icon,
+  color,
+  size,
+  style,
+  ...rest
+}: PlatformIconProps) {
+  switch (icon.type) {
+    case 'sfSymbol':
+      return (
+        <SFSymbol
+          name={icon.name}
+          color={color}
+          size={size}
+          style={StyleSheet.flatten(style)}
+          {...rest}
+        />
+      );
+    case 'materialSymbol':
+      return (
+        <MaterialSymbol
+          name={icon.name}
+          variant={icon.variant}
+          weight={icon.weight}
+          size={size}
+          color={color}
+          style={StyleSheet.flatten(style)}
+          {...rest}
+        />
+      );
+    case 'image':
+      return (
+        <Image
+          source={icon.source}
+          resizeMode="contain"
+          fadeDuration={0}
+          tintColor={icon.tinted === false ? undefined : color}
+          style={[
+            {
+              width: size,
+              height: size,
+            },
+            style,
+          ]}
+          {...rest}
+        />
+      );
+  }
+}

package/src/PlatformPressable.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '@react-navigation/native';
+import { IsFocusedContext, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
@@ -19,15 +19,20 @@ 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;
+  ref?: React.Ref<React.ComponentRef<typeof AnimatedPressable>> | undefined;
 };
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
@@ -41,25 +46,25 @@ const useNativeDriver = Platform.OS !== 'web';
 /**
  * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
  */
-function PlatformPressableInternal(
-  {
-    disabled,
-    onPress,
-    onPressIn,
-    onPressOut,
-    android_ripple,
-    pressColor,
-    pressOpacity = 0.3,
-    hoverEffect,
-    style,
-    children,
-    ...rest
-  }: Props,
-  ref: React.Ref<React.ComponentRef<typeof AnimatedPressable>>
-) {
+export function PlatformPressable({
+  disabled,
+  onPress,
+  onPressIn,
+  onPressOut,
+  android_ripple,
+  pressColor,
+  pressOpacity = 0.3,
+  hoverEffect,
+  style,
+  children,
+  ref,
+  ...rest
+}: Props) {
   const { dark } = useTheme();
   const [opacity] = React.useState(() => new Animated.Value(1));
 
+  const interactive = !disabled && !rest['aria-disabled'];
+
   const animateTo = (toValue: number, duration: number) => {
     if (ANDROID_SUPPORTS_RIPPLE) {
       return;
@@ -76,7 +81,7 @@ function PlatformPressableInternal(
   const handlePress = (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
   ) => {
-    if (Platform.OS === 'web' && rest.href !== null) {
+    if (Platform.OS === 'web' && rest.href != null) {
       // ignore clicks with modifier keys
       const hasModifierKey =
         ('metaKey' in e && e.metaKey) ||
@@ -91,7 +96,7 @@ function PlatformPressableInternal(
       // let browser handle "target=_blank" etc.
       const isSelfTarget =
         e.currentTarget && 'target' in e.currentTarget
-          ? [undefined, null, '', 'self'].includes(e.currentTarget.target)
+          ? [undefined, null, '', '_self'].includes(e.currentTarget.target)
           : true;
 
       if (!hasModifierKey && isLeftClick && isSelfTarget) {
@@ -115,16 +120,75 @@ function PlatformPressableInternal(
     onPressOut?.(e);
   };
 
+  const elementRef = React.useRef<HTMLElement | null>(null);
+
+  const handleRef = React.useCallback(
+    (node: React.ComponentRef<typeof AnimatedPressable> | null) => {
+      elementRef.current =
+        Platform.OS === 'web' &&
+        typeof HTMLElement !== 'undefined' &&
+        node instanceof HTMLElement
+          ? node
+          : null;
+
+      if (typeof ref === 'function') {
+        return ref(node);
+      } else if (ref != null) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+
+  // React Native Web doesn't correctly handle ref cleanup functions
+  // So we use a `useEffect` for the listeners instead of the ref callback
+  React.useEffect(() => {
+    const element = elementRef.current;
+
+    if (rest.href == null || element == null || interactive) {
+      return;
+    }
+
+    // On web, a non-interactive button prevents our onPress from being called
+    // But the link is still clickable, and will perform a full page navigation
+    // So we manually prevent the default behavior of the link in that case
+    // The `href` is still set so regular link semantics are preserved
+    const preventNavigation = (event: Event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    element.addEventListener('click', preventNavigation, true);
+    element.addEventListener('auxclick', preventNavigation, true);
+
+    return () => {
+      element.removeEventListener('click', preventNavigation, true);
+      element.removeEventListener('auxclick', preventNavigation, true);
+    };
+  }, [interactive, rest.href]);
+
+  let focusable: boolean | undefined;
+
+  if (disabled) {
+    focusable = false;
+  } else if (Platform.isTV) {
+    // On `react-native-tvos`, the focus engine doesn't respect `aria-hidden` on screens
+    // So we hide them from TV focus engine for unfocused screens
+    focusable = React.use(IsFocusedContext);
+  }
+
   return (
     <AnimatedPressable
-      ref={ref}
+      ref={handleRef}
       accessible
+      disabled={disabled}
+      focusable={focusable}
       role={Platform.OS === 'web' && rest.href != null ? 'link' : 'button'}
-      onPress={disabled ? undefined : handlePress}
-      onPressIn={disabled ? undefined : handlePressIn}
-      onPressOut={disabled ? undefined : handlePressOut}
+      onPress={interactive ? handlePress : undefined}
+      onPressIn={interactive ? handlePressIn : undefined}
+      onPressOut={interactive ? handlePressOut : undefined}
       android_ripple={
-        ANDROID_SUPPORTS_RIPPLE && !disabled
+        ANDROID_SUPPORTS_RIPPLE && interactive
           ? {
               color:
                 pressColor !== undefined
@@ -139,27 +203,23 @@ function PlatformPressableInternal(
       style={[
         {
           cursor:
-            (Platform.OS === 'web' || Platform.OS === 'ios') && !disabled
+            (Platform.OS === 'web' || Platform.OS === 'ios') && interactive
               ? // Pointer cursor on web
                 // Hover effect on iPad and visionOS
                 'pointer'
               : 'auto',
-          opacity: !ANDROID_SUPPORTS_RIPPLE && !disabled ? opacity : 1,
+          opacity: !ANDROID_SUPPORTS_RIPPLE && interactive ? opacity : 1,
         },
         style,
       ]}
       {...rest}
     >
-      {!disabled ? <HoverEffect {...hoverEffect} /> : null}
+      {interactive ? <HoverEffect {...hoverEffect} /> : null}
       {children}
     </AnimatedPressable>
   );
 }
 
-export const PlatformPressable = React.forwardRef(PlatformPressableInternal);
-
-PlatformPressable.displayName = 'PlatformPressable';
-
 const css = String.raw;
 
 const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
@@ -196,20 +256,20 @@ const HoverEffect = ({
     return null;
   }
 
+  const style: React.CSSProperties & {
+    [key: `--${string}`]: string | number;
+  } = {
+    '--overlay-color': color,
+    '--overlay-hover-opacity': hoverOpacity,
+    '--overlay-active-opacity': activeOpacity,
+  };
+
   return (
     <>
       <style href={CLASS_NAME} precedence="elements">
         {CSS_TEXT}
       </style>
-      <div
-        className={CLASS_NAME}
-        style={{
-          // @ts-expect-error: CSS variables are not typed
-          '--overlay-color': color,
-          '--overlay-hover-opacity': hoverOpacity,
-          '--overlay-active-opacity': activeOpacity,
-        }}
-      />
+      <div className={CLASS_NAME} style={style} />
     </>
   );
 };

package/src/SafeAreaProviderCompat.tsx

@@ -34,7 +34,7 @@ const initialMetrics =
     : initialWindowMetrics;
 
 export function SafeAreaProviderCompat({ children, style }: Props) {
-  const insets = React.useContext(SafeAreaInsetsContext);
+  const insets = React.use(SafeAreaInsetsContext);
 
   return (
     <FrameSizeProvider

package/src/Screen.tsx

@@ -6,15 +6,10 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import {
-  Animated,
-  type StyleProp,
-  StyleSheet,
-  View,
-  type ViewStyle,
-} from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { Container, type Props as ContainerProps } from './Container';
 import { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 import { HeaderHeightContext } from './Header/HeaderHeightContext';
 import { HeaderShownContext } from './Header/HeaderShownContext';
@@ -22,14 +17,14 @@ 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?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  headerShown?: boolean | undefined;
+  headerStatusBarHeight?: number | undefined;
+  headerTransparent?: boolean | undefined;
+  style?: ContainerProps['style'] | undefined;
   children: React.ReactNode;
 };
 
@@ -37,8 +32,8 @@ export function Screen(props: Props) {
   const insets = useSafeAreaInsets();
   const { colors } = useTheme();
 
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const isParentHeaderShown = React.use(HeaderShownContext);
+  const parentHeaderHeight = React.use(HeaderHeightContext);
 
   const {
     focused,
@@ -61,7 +56,7 @@ export function Screen(props: Props) {
     })
   );
 
-  const headerRef = React.useRef<View>(null);
+  const headerRef = React.useRef<React.ComponentRef<typeof View>>(null);
 
   const [headerHeight, setHeaderHeight] = React.useState(defaultHeaderHeight);
 
@@ -72,25 +67,43 @@ export function Screen(props: Props) {
   }, [route.name]);
 
   return (
-    <Animated.View
-      aria-hidden={!focused}
-      style={[styles.container, { backgroundColor: colors.background }, style]}
+    <Container
+      inert={!focused}
+      style={{
+        ...styles.container,
+        backgroundColor: colors.background,
+        ...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}
+      // Container sets `collapsable` to `false` internally
+      // This comment is left to make sure refactors don't remove it by mistake
     >
       {headerShown ? (
         <NavigationProvider navigation={navigation} route={route}>
           <View
-            ref={headerRef}
-            onLayout={(e) => {
-              const { height } = e.nativeEvent.layout;
-
-              setHeaderHeight(height);
-            }}
-            style={[styles.header, headerTransparent ? styles.absolute : null]}
+            style={[
+              styles.header,
+              headerTransparent
+                ? [
+                    styles.absolute,
+                    // Specify an explicit min height for Android screen readers
+                    { minHeight: headerHeight },
+                  ]
+                : null,
+            ]}
           >
-            {header}
+            <View
+              ref={headerRef}
+              onLayout={(e) => {
+                const { height } = e.nativeEvent.layout;
+
+                setHeaderHeight(height);
+              }}
+              style={{ pointerEvents: 'box-none' }}
+            >
+              {header}
+            </View>
           </View>
         </NavigationProvider>
       ) : null}
@@ -105,7 +118,7 @@ export function Screen(props: Props) {
           </HeaderHeightContext.Provider>
         </HeaderShownContext.Provider>
       </View>
-    </Animated.View>
+    </Container>
   );
 }
 

package/src/index.tsx

@@ -1,9 +1,3 @@
-import backIcon from './assets/back-icon.png';
-import clearIcon from './assets/clear-icon.png';
-import closeIcon from './assets/close-icon.png';
-import searchIcon from './assets/search-icon.png';
-import searchIconLegacy from './assets/search-icon-legacy.png';
-
 export { Badge } from './Badge';
 export { Button } from './Button';
 export { getDefaultSidebarWidth } from './getDefaultSidebarWidth';
@@ -20,16 +14,8 @@ export { HeaderTitle } from './Header/HeaderTitle';
 export { useHeaderHeight } from './Header/useHeaderHeight';
 export { getLabel } from './Label/getLabel';
 export { Label } from './Label/Label';
+export { PlatformIcon } from './PlatformIcon';
 export { PlatformPressable } from './PlatformPressable';
 export { Text } from './Text';
-export { useFrameSize } from './useFrameSize';
-
-export const Assets = [
-  backIcon,
-  searchIcon,
-  searchIconLegacy,
-  closeIcon,
-  clearIcon,
-];
-
 export * from './types';
+export { useFrameSize } from './useFrameSize';

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