@react-navigation/elements 3.0.0-alpha.3 → 3.0.0-alpha.30

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>>;
 };
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
@@ -41,22 +46,20 @@ 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));
 
@@ -115,10 +118,22 @@ function PlatformPressableInternal(
     onPressOut?.(e);
   };
 
+  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}
       accessible
+      disabled={disabled}
+      focusable={focusable}
       role={Platform.OS === 'web' && rest.href != null ? 'link' : 'button'}
       onPress={disabled ? undefined : handlePress}
       onPressIn={disabled ? undefined : handlePressIn}
@@ -156,10 +171,6 @@ function PlatformPressableInternal(
   );
 }
 
-export const PlatformPressable = React.forwardRef(PlatformPressableInternal);
-
-PlatformPressable.displayName = 'PlatformPressable';
-
 const css = String.raw;
 
 const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;

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 } 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?: React.ComponentProps<typeof Container>['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,
@@ -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';
@@ -22,14 +16,5 @@ export { getLabel } from './Label/getLabel';
 export { Label } from './Label/Label';
 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';