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

package/src/PlatformPressable.tsx

@@ -0,0 +1,196 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  type GestureResponderEvent,
+  Platform,
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+type HoverEffectProps = {
+  color?: string;
+  hoverOpacity?: number;
+  activeOpacity?: number;
+};
+
+export type Props = Omit<PressableProps, 'style'> & {
+  pressColor?: string;
+  pressOpacity?: number;
+  hoverEffect?: HoverEffectProps;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  href?: string;
+  children: React.ReactNode;
+};
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_SUPPORTS_RIPPLE =
+  Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+
+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) {
+  const { dark } = useTheme();
+  const [opacity] = React.useState(() => new Animated.Value(1));
+
+  const animateTo = (toValue: number, duration: number) => {
+    if (ANDROID_SUPPORTS_RIPPLE) {
+      return;
+    }
+
+    Animated.timing(opacity, {
+      toValue,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver,
+    }).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.
+      if (!hasModifierKey && isLeftClick && isSelfTarget) {
+        e.preventDefault();
+        onPress?.(e);
+      }
+    } else {
+      onPress?.(e);
+    }
+  };
+
+  const handlePressIn = (e: GestureResponderEvent) => {
+    animateTo(pressOpacity, 0);
+    onPressIn?.(e);
+  };
+
+  const handlePressOut = (e: GestureResponderEvent) => {
+    animateTo(1, 200);
+    onPressOut?.(e);
+  };
+
+  return (
+    <AnimatedPressable
+      accessible
+      accessibilityRole={
+        Platform.OS === 'web' && rest.href != null ? 'link' : 'button'
+      }
+      onPress={disabled ? undefined : handlePress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      android_ripple={
+        ANDROID_SUPPORTS_RIPPLE
+          ? {
+              color:
+                pressColor !== undefined
+                  ? pressColor
+                  : dark
+                    ? 'rgba(255, 255, 255, .32)'
+                    : 'rgba(0, 0, 0, .32)',
+              ...android_ripple,
+            }
+          : undefined
+      }
+      style={[
+        {
+          cursor:
+            Platform.OS === 'web' || Platform.OS === 'ios'
+              ? // Pointer cursor on web
+                // Hover effect on iPad and visionOS
+                'pointer'
+              : 'auto',
+          opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <HoverEffect {...hoverEffect} />
+      {children}
+    </AnimatedPressable>
+  );
+}
+
+const css = String.raw;
+
+const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;
+
+const CSS_TEXT = css`
+  .${CLASS_NAME} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background-color: var(--overlay-color);
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  a:hover > .${CLASS_NAME}, button:hover > .${CLASS_NAME} {
+    opacity: var(--overlay-hover-opacity);
+  }
+
+  a:active > .${CLASS_NAME}, button:active > .${CLASS_NAME} {
+    opacity: var(--overlay-active-opacity);
+  }
+`;
+
+const HoverEffect = ({
+  color,
+  hoverOpacity = 0.08,
+  activeOpacity = 0.16,
+}: HoverEffectProps) => {
+  if (Platform.OS !== 'web' || color == null) {
+    return null;
+  }
+
+  return (
+    <>
+      <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
+        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,
+        }}
+      />
+    </>
+  );
+};

package/src/ResourceSavingView.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+type Props = {
+  visible: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
+
+export function ResourceSavingView({
+  visible,
+  children,
+  style,
+  ...rest
+}: Props) {
+  if (Platform.OS === 'web') {
+    return (
+      <View
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!visible}
+        style={[
+          { display: visible ? 'flex' : 'none' },
+          styles.container,
+          style,
+        ]}
+        pointerEvents={visible ? 'auto' : 'none'}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.container, style]}
+      // box-none doesn't seem to work properly on Android
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+      <View
+        collapsable={false}
+        removeClippedSubviews={
+          // On iOS & macOS, set removeClippedSubviews to true only when not focused
+          // This is an workaround for a bug where the clipped view never re-appears
+          Platform.OS === 'ios' || Platform.OS === 'macos' ? !visible : true
+        }
+        pointerEvents={visible ? 'auto' : 'none'}
+        style={visible ? styles.attached : styles.detached}
+      >
+        {children}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  attached: {
+    flex: 1,
+  },
+  detached: {
+    flex: 1,
+    top: FAR_FAR_AWAY,
+  },
+});

package/src/SafeAreaProviderCompat.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {
+  Dimensions,
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import {
+  initialWindowMetrics,
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const { width = 0, height = 0 } = Dimensions.get('window');
+
+// To support SSR on web, we need to have empty insets for initial values
+// Otherwise there can be mismatch between SSR and client output
+// We also need to specify empty values to support tests environments
+const initialMetrics =
+  Platform.OS === 'web' || initialWindowMetrics == null
+    ? {
+      frame: { x: 0, y: 0, width, height },
+      insets: { top: 0, left: 0, right: 0, bottom: 0 },
+    }
+    : initialWindowMetrics;
+
+export function SafeAreaProviderCompat({ children, style }: Props) {
+  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>
+  );
+}
+
+SafeAreaProviderCompat.initialMetrics = initialMetrics;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/Screen.tsx

@@ -0,0 +1,123 @@
+import {
+  NavigationContext,
+  type NavigationProp,
+  NavigationRouteContext,
+  type ParamListBase,
+  type RouteProp,
+} from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import {
+  useSafeAreaFrame,
+  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';
+
+type Props = {
+  focused: boolean;
+  modal?: boolean;
+  navigation: NavigationProp<ParamListBase>;
+  route: RouteProp<ParamListBase>;
+  header: React.ReactNode;
+  headerShown?: boolean;
+  headerStatusBarHeight?: number;
+  headerTransparent?: boolean;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  children: React.ReactNode;
+};
+
+export function Screen(props: Props) {
+  const dimensions = useSafeAreaFrame();
+  const insets = useSafeAreaInsets();
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+
+  const {
+    focused,
+    modal = false,
+    header,
+    headerShown = true,
+    headerTransparent,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
+    navigation,
+    route,
+    children,
+    style,
+  } = props;
+
+  const [headerHeight, setHeaderHeight] = React.useState(() =>
+    getDefaultHeaderHeight(dimensions, modal, headerStatusBarHeight)
+  );
+
+  return (
+    <Background
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      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.
+      collapsable={false}
+    >
+      {headerShown ? (
+        <NavigationContext.Provider value={navigation}>
+          <NavigationRouteContext.Provider value={route}>
+            <View
+              pointerEvents="box-none"
+              onLayout={(e) => {
+                const { height } = e.nativeEvent.layout;
+
+                setHeaderHeight(height);
+              }}
+              style={[
+                styles.header,
+                headerTransparent ? styles.absolute : null,
+              ]}
+            >
+              {header}
+            </View>
+          </NavigationRouteContext.Provider>
+        </NavigationContext.Provider>
+      ) : null}
+      <View style={styles.content}>
+        <HeaderShownContext.Provider
+          value={isParentHeaderShown || headerShown !== false}
+        >
+          <HeaderHeightContext.Provider
+            value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
+          >
+            {children}
+          </HeaderHeightContext.Provider>
+        </HeaderShownContext.Provider>
+      </View>
+    </Background>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+  header: {
+    zIndex: 1,
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    start: 0,
+    end: 0,
+  },
+});

package/src/Text.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@react-navigation/native';
+// eslint-disable-next-line no-restricted-imports
+import { Text as NativeText, type TextProps } from 'react-native';
+
+export function Text({ style, ...rest }: TextProps) {
+  const { colors, fonts } = useTheme();
+
+  return (
+    <NativeText
+      {...rest}
+      style={[{ color: colors.text }, fonts.regular, style]}
+    />
+  );
+}

package/src/__tests__/PlatformPressable.test.tsx

@@ -0,0 +1,81 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from '@jest/globals';
+import { NavigationContainer } from '@react-navigation/native';
+import { fireEvent, render } from '@testing-library/react-native';
+import { Platform, View } from 'react-native';
+
+import { PlatformPressable } from '../PlatformPressable';
+
+jest.useFakeTimers();
+
+test('triggers onPress on press event', () => {
+  const onPress = jest.fn();
+
+  const { getByTestId } = render(
+    <PlatformPressable onPress={onPress} testID="pressable">
+      <View />
+    </PlatformPressable>,
+    { wrapper: NavigationContainer }
+  );
+
+  fireEvent.press(getByTestId('pressable'));
+
+  jest.runAllTimers();
+
+  expect(onPress).toHaveBeenCalled();
+});
+
+describe('web', () => {
+  beforeEach(() => {
+    jest.replaceProperty(Platform, 'OS', 'web');
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('triggers press on left click', () => {
+    const onPress = jest.fn();
+    const preventDefault = jest.fn();
+
+    const { getByTestId } = render(
+      <PlatformPressable onPress={onPress} testID="pressable" href={'/'}>
+        <View />
+      </PlatformPressable>,
+      { wrapper: NavigationContainer }
+    );
+
+    fireEvent.press(getByTestId('pressable'), {
+      button: 0,
+      preventDefault,
+    });
+
+    jest.runAllTimers();
+
+    expect(preventDefault).toHaveBeenCalled();
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  test('ignores press non-left clicks', () => {
+    const onPress = jest.fn();
+
+    const { getByTestId } = render(
+      <PlatformPressable onPress={onPress} testID="pressable" href={'/'}>
+        <View />
+      </PlatformPressable>,
+      { wrapper: NavigationContainer }
+    );
+
+    fireEvent.press(getByTestId('pressable'), { button: 1 });
+
+    jest.runAllTimers();
+
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});

package/src/getDefaultSidebarWidth.tsx

@@ -0,0 +1,15 @@
+const APPROX_APP_BAR_HEIGHT = 56;
+const DEFAULT_DRAWER_WIDTH = 360;
+
+export const getDefaultSidebarWidth = ({ width }: { width: number }) => {
+  /**
+   * Default sidebar width is 360dp
+   * On screens smaller than 320dp, ideally the drawer would collapse to a tab bar
+   * https://m3.material.io/components/navigation-drawer/specs
+   */
+  if (width - APPROX_APP_BAR_HEIGHT <= 360) {
+    return width - APPROX_APP_BAR_HEIGHT;
+  }
+
+  return DEFAULT_DRAWER_WIDTH;
+};

package/src/getNamedContext.tsx

@@ -0,0 +1,30 @@
+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>>;
+}
+
+// We use a global variable to keep our contexts so that we can reuse same contexts across packages
+globalThis[contexts] =
+  globalThis[contexts] ?? new Map<string, React.Context<any>>();
+
+export function getNamedContext<T>(
+  name: string,
+  initialValue: T
+): React.Context<T> {
+  let context = globalThis[contexts].get(name);
+
+  if (context) {
+    return context;
+  }
+
+  context = React.createContext<T>(initialValue);
+  context.displayName = name;
+
+  globalThis[contexts].set(name, context);
+
+  return context;
+}