@react-native-ohos/elements 2.3.9-rc.1 → 2.4.0-rc.1

package/src/PlatformPressable.tsx

@@ -17,12 +17,15 @@ type HoverEffectProps = {
   activeOpacity?: number;
 };
 
-export type Props = Omit<PressableProps, 'style'> & {
+export type Props = Omit<PressableProps, 'style' | 'onPress'> & {
+  href?: string;
   pressColor?: string;
   pressOpacity?: number;
   hoverEffect?: HoverEffectProps;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  href?: string;
+  onPress?: (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  ) => void;
   children: React.ReactNode;
 };
 
@@ -37,19 +40,22 @@ const useNativeDriver = Platform.OS !== 'web';
 /**
  * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
  */
-export function PlatformPressable({
-  disabled,
-  onPress,
-  onPressIn,
-  onPressOut,
-  android_ripple,
-  pressColor,
-  pressOpacity = 0.3,
-  hoverEffect,
-  style,
-  children,
-  ...rest
-}: Props) {
+function PlatformPressableInternal(
+  {
+    disabled,
+    onPress,
+    onPressIn,
+    onPressOut,
+    android_ripple,
+    pressColor,
+    pressOpacity = 0.3,
+    hoverEffect,
+    style,
+    children,
+    ...rest
+  }: Props,
+  ref: React.Ref<React.ComponentRef<typeof AnimatedPressable>>
+) {
   const { dark } = useTheme();
   const [opacity] = React.useState(() => new Animated.Value(1));
 
@@ -66,18 +72,31 @@ export function PlatformPressable({
     }).start();
   };
 
-  const handlePress = (e: GestureResponderEvent) => {
-    if (Platform.OS === 'web' && rest.href != null) {
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      const isLeftClick = e.button == null || e.button === 0; // only handle left clicks
-      const isSelfTarget = [undefined, null, '', 'self'].includes(
-        // @ts-expect-error: these properties exist on web, but not in React Native
-        e.currentTarget?.target
-      ); // let browser handle "target=_blank" etc.
+  const handlePress = (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  ) => {
+    if (Platform.OS === 'web' && rest.href !== null) {
+      // ignore clicks with modifier keys
+      const hasModifierKey =
+        ('metaKey' in e && e.metaKey) ||
+        ('altKey' in e && e.altKey) ||
+        ('ctrlKey' in e && e.ctrlKey) ||
+        ('shiftKey' in e && e.shiftKey);
+
+      // only handle left clicks
+      const isLeftClick =
+        'button' in e ? e.button == null || e.button === 0 : true;
+
+      // let browser handle "target=_blank" etc.
+      const isSelfTarget =
+        e.currentTarget && 'target' in e.currentTarget
+          ? [undefined, null, '', 'self'].includes(e.currentTarget.target)
+          : true;
+
       if (!hasModifierKey && isLeftClick && isSelfTarget) {
         e.preventDefault();
+        // call `onPress` only when browser default is prevented
+        // this prevents app from handling the click when a link is being opened
         onPress?.(e);
       }
     } else {
@@ -97,10 +116,9 @@ export function PlatformPressable({
 
   return (
     <AnimatedPressable
+      ref={ref}
       accessible
-      accessibilityRole={
-        Platform.OS === 'web' && rest.href != null ? 'link' : 'button'
-      }
+      role={Platform.OS === 'web' && rest.href != null ? 'link' : 'button'}
       onPress={disabled ? undefined : handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
@@ -137,6 +155,10 @@ export function PlatformPressable({
   );
 }
 
+export const PlatformPressable = React.forwardRef(PlatformPressableInternal);
+
+PlatformPressable.displayName = 'PlatformPressable';
+
 const css = String.raw;
 
 const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
@@ -152,6 +174,7 @@ const CSS_TEXT = css`
     background-color: var(--overlay-color);
     opacity: 0;
     transition: opacity 0.15s;
+    pointer-events: none;
   }
 
   a:hover > .${CLASS_NAME}, button:hover > .${CLASS_NAME} {
@@ -174,7 +197,7 @@ const HoverEffect = ({
 
   return (
     <>
-      <style
+      <style 
         // @ts-expect-error: href and precedence are only available on React 19
         href={CLASS_NAME}
         // eslint-disable-next-line @eslint-react/dom/no-unknown-property

package/src/SafeAreaProviderCompat.tsx

@@ -13,6 +13,8 @@ import {
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
 
+import { FrameSizeProvider } from './useFrameSize';
+
 type Props = {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
@@ -26,29 +28,31 @@ const { width = 0, height = 0 } = Dimensions.get('window');
 const initialMetrics =
   Platform.OS === 'web' || initialWindowMetrics == null
     ? {
-      frame: { x: 0, y: 0, width, height },
-      insets: { top: 0, left: 0, right: 0, bottom: 0 },
-    }
+        frame: { x: 0, y: 0, width, height },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }
     : initialWindowMetrics;
 
 export function SafeAreaProviderCompat({ children, style }: Props) {
+  const insets = React.useContext(SafeAreaInsetsContext);
+
+  children = (
+    <FrameSizeProvider initialFrame={initialMetrics.frame}>
+      {children}
+    </FrameSizeProvider>
+  );
+
+  if (insets) {
+    // If we already have insets, don't wrap the stack in another safe area provider
+    // This avoids an issue with updates at the cost of potentially incorrect values
+    // https://github.com/react-navigation/react-navigation/issues/174
+    return <View style={[styles.container, style]}>{children}</View>;
+  }
+
   return (
-    <SafeAreaInsetsContext.Consumer>
-      {(insets) => {
-        if (insets) {
-          // If we already have insets, don't wrap the stack in another safe area provider
-          // This avoids an issue with updates at the cost of potentially incorrect values
-          // https://github.com/react-navigation/react-navigation/issues/174
-          return <View style={[styles.container, style]}>{children}</View>;
-        }
-
-        return (
-          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
-            {children}
-          </SafeAreaProvider>
-        );
-      }}
-    </SafeAreaInsetsContext.Consumer>
+    <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
+      {children}
+    </SafeAreaProvider>
   );
 }
 

package/src/Screen.tsx

@@ -13,15 +13,13 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Background } from './Background';
 import { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 import { HeaderHeightContext } from './Header/HeaderHeightContext';
 import { HeaderShownContext } from './Header/HeaderShownContext';
+import { useFrameSize } from './useFrameSize';
 
 type Props = {
   focused: boolean;
@@ -37,7 +35,6 @@ type Props = {
 };
 
 export function Screen(props: Props) {
-  const dimensions = useSafeAreaFrame();
   const insets = useSafeAreaInsets();
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
@@ -56,14 +53,15 @@ export function Screen(props: Props) {
     style,
   } = props;
 
-  const [headerHeight, setHeaderHeight] = React.useState(() =>
-    getDefaultHeaderHeight(dimensions, modal, headerStatusBarHeight)
+  const defaultHeaderHeight = useFrameSize((size) =>
+    getDefaultHeaderHeight(size, modal, headerStatusBarHeight)
   );
 
+  const [headerHeight, setHeaderHeight] = React.useState(defaultHeaderHeight);
+
   return (
     <Background
-      accessibilityElementsHidden={!focused}
-      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      aria-hidden={!focused}
       style={[styles.container, 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.
@@ -94,7 +92,7 @@ export function Screen(props: Props) {
           value={isParentHeaderShown || headerShown !== false}
         >
           <HeaderHeightContext.Provider
-            value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
+            value={headerShown ? headerHeight : (parentHeaderHeight ?? 0)}
           >
             {children}
           </HeaderHeightContext.Provider>

package/src/getNamedContext.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 const contexts = '__react_navigation__elements_contexts';
 
 declare global {
-  // eslint-disable-next-line no-var
   var __react_navigation__elements_contexts: Map<string, React.Context<any>>;
 }
 

package/src/index.tsx

@@ -26,6 +26,7 @@ export { ResourceSavingView } from './ResourceSavingView';
 export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { Screen } from './Screen';
 export { Text } from './Text';
+export { useFrameSize } from './useFrameSize';
 
 export const Assets = [
   backIcon,

package/src/useFrameSize.tsx

@@ -0,0 +1,254 @@
+import * as React from 'react';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+import {
+  // eslint-disable-next-line no-restricted-imports
+  useSafeAreaFrame,
+} from 'react-native-safe-area-context';
+import useLatestCallback from 'use-latest-callback';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+
+// Load with require to avoid error from webpack due to missing export in older versions
+// eslint-disable-next-line import-x/no-commonjs
+type SafeAreaListenerProps = {
+  onChange: (event: { frame: Frame }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const SafeAreaListener = (require('react-native-safe-area-context') as {
+  SafeAreaListener?: React.ComponentType<SafeAreaListenerProps>;
+}).SafeAreaListener;
+
+type Frame = {
+  width: number;
+  height: number;
+};
+
+type Listener = () => void;
+
+type RemoveListener = () => void;
+
+type FrameContextType = {
+  getCurrent: () => Frame;
+  subscribe: (listener: Listener) => RemoveListener;
+  subscribeThrottled: (listener: Listener) => RemoveListener;
+};
+
+const FrameContext = React.createContext<FrameContextType | undefined>(
+  undefined
+);
+
+export function useFrameSize<T>(
+  selector: (frame: Frame) => T,
+  throttle?: boolean
+): T {
+  const context = React.useContext(FrameContext);
+
+  if (context == null) {
+    throw new Error('useFrameSize must be used within a FrameSizeProvider');
+  }
+
+  const value = useSyncExternalStoreWithSelector(
+    throttle ? context.subscribeThrottled : context.subscribe,
+    context.getCurrent,
+    context.getCurrent,
+    selector
+  );
+
+  return value;
+}
+
+type FrameSizeProviderProps = {
+  initialFrame: Frame;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function FrameSizeProvider({
+  initialFrame,
+  children,
+}: FrameSizeProviderProps) {
+  const context = React.useContext(FrameContext);
+
+  if (context != null) {
+    // If the context is already present, don't wrap again
+    return children;
+  }
+
+  return (
+    <FrameSizeProviderInner initialFrame={initialFrame}>
+      {children}
+    </FrameSizeProviderInner>
+  );
+}
+
+function FrameSizeProviderInner({
+  initialFrame,
+  children,
+}: FrameSizeProviderProps) {
+  const frameRef = React.useRef<Frame>({
+    width: initialFrame.width,
+    height: initialFrame.height,
+  });
+
+  const listeners = React.useRef<Set<Listener>>(new Set());
+
+  const getCurrent = useLatestCallback(() => frameRef.current);
+
+  const subscribe = useLatestCallback((listener: Listener): RemoveListener => {
+    listeners.current.add(listener);
+
+    return () => {
+      listeners.current.delete(listener);
+    };
+  });
+
+  const subscribeThrottled = useLatestCallback(
+    (listener: Listener): RemoveListener => {
+      const delay = 100; // Throttle delay in milliseconds
+
+      let timer: ReturnType<typeof setTimeout>;
+      let updated = false;
+      let waiting = false;
+
+      const throttledListener = () => {
+        clearTimeout(timer);
+
+        updated = true;
+
+        if (waiting) {
+          // Schedule a timer to call the listener at the end
+          timer = setTimeout(() => {
+            if (updated) {
+              updated = false;
+              listener();
+            }
+          }, delay);
+        } else {
+          waiting = true;
+          setTimeout(function () {
+            waiting = false;
+          }, delay);
+
+          // Call the listener immediately at start
+          updated = false;
+          listener();
+        }
+      };
+
+      const unsubscribe = subscribe(throttledListener);
+
+      return () => {
+        unsubscribe();
+        clearTimeout(timer);
+      };
+    }
+  );
+
+  const context = React.useMemo<FrameContextType>(
+    () => ({
+      getCurrent,
+      subscribe,
+      subscribeThrottled,
+    }),
+    [subscribe, subscribeThrottled, getCurrent]
+  );
+
+  const onChange = useLatestCallback((frame: Frame) => {
+    if (
+      frameRef.current.height === frame.height &&
+      frameRef.current.width === frame.width
+    ) {
+      return;
+    }
+
+    frameRef.current = { width: frame.width, height: frame.height };
+    listeners.current.forEach((listener) => listener());
+  });
+
+  return (
+    <>
+      {Platform.OS === 'web' ? (
+        <FrameSizeListenerWeb onChange={onChange} />
+      ) : typeof SafeAreaListener === 'undefined' ? (
+        <FrameSizeListenerNativeFallback onChange={onChange} />
+      ) : (
+        <SafeAreaListener
+          onChange={({ frame }) => onChange(frame)}
+          style={StyleSheet.absoluteFill}
+        />
+      )}
+      <FrameContext.Provider value={context}>{children}</FrameContext.Provider>
+    </>
+  );
+}
+
+// SafeAreaListener is available only on newer versions
+// Fallback to an effect-based shim for older versions
+function FrameSizeListenerNativeFallback({
+  onChange,
+}: {
+  onChange: (frame: Frame) => void;
+}) {
+  const frame = useSafeAreaFrame();
+
+  React.useLayoutEffect(() => {
+    onChange(frame);
+  }, [frame, onChange]);
+
+  return null;
+}
+
+// FIXME: On the Web, the safe area frame value doesn't update on resize
+// So we workaround this by measuring the frame on resize
+function FrameSizeListenerWeb({
+  onChange,
+}: {
+  onChange: (frame: Frame) => void;
+}) {
+  const elementRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (elementRef.current == null) {
+      return;
+    }
+
+    const rect = elementRef.current.getBoundingClientRect();
+
+    onChange({
+      width: rect.width,
+      height: rect.height,
+    });
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      if (entry) {
+        const { width, height } = entry.contentRect;
+
+        onChange({ width, height });
+      }
+    });
+
+    observer.observe(elementRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [onChange]);
+
+  return (
+    <div
+      ref={elementRef}
+      style={{
+        ...StyleSheet.absoluteFillObject,
+        pointerEvents: 'none',
+        visibility: 'hidden',
+      }}
+    />
+  );
+}