@react-native-ohos/react-native-safe-area-context 5.1.1-rc.1

package/src/SafeAreaView.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import type {
+  Edge,
+  EdgeMode,
+  EdgeRecord,
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps,
+} from './SafeArea.types';
+import NativeSafeAreaView, { onSafeAreaValueChangeEvent } from './specs/NativeSafeAreaView';
+import type * as ReactNative from "react-native";
+import { useMemo, useState } from 'react';
+
+const defaultEdges: Record<Edge, EdgeMode> = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive',
+};
+
+export type SafeAreaViewProps = NativeSafeAreaViewProps;
+
+let isOnChange = false;
+let realTop = 0;
+let realLeft = 0;
+let realBottom = 0;
+let realRight = 0;
+let safeAreaTop = 0;
+let safeAreaLeft = 0;
+let safeAreaBottom = 0;
+let safeAreaRight = 0;
+
+function getEdgeValue(edgeMode: string, insetValue: number, edgeValue: number) {
+  if (edgeMode === 'off') {
+    return edgeValue;
+  } else if (edgeMode === 'maximum') {
+    return Math.max(insetValue, edgeValue);
+  } else {
+    return insetValue + edgeValue;
+  }
+}
+
+export const SafeAreaView = React.forwardRef<
+  NativeSafeAreaViewInstance,
+  SafeAreaViewProps
+>(({ edges, ...props }, ref) => {
+  const nativeEdges = useMemo(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+
+    const edgesObj = Array.isArray(edges)
+      ? edges.reduce<EdgeRecord>((acc, edge: Edge) => {
+        acc[edge] = 'additive';
+        return acc;
+      }, {})
+      : // ts has trouble with refining readonly arrays.
+      (edges as EdgeRecord);
+
+    // make sure that we always pass all edges, required for fabric
+    const requiredEdges: Record<Edge, EdgeMode> = {
+      top: edgesObj.top ?? 'off',
+      right: edgesObj.right ?? 'off',
+      bottom: edgesObj.bottom ?? 'off',
+      left: edgesObj.left ?? 'off',
+    };
+
+    return requiredEdges;
+  }, [edges]);
+
+  const [isFirstRefresh, setIsFirstRefresh] = useState(
+    false
+  );
+
+  let safeAreaStyle = [props.style]
+  let rawPadding = 0;
+  let rawMargin = 0;
+  let rawPaddingTop: number | undefined = undefined;
+  let rawPaddingLeft: number | undefined = undefined;
+  let rawPaddingBottom: number | undefined = undefined;
+  let rawPaddingRight: number | undefined = undefined;
+  let rawMarginTop: number | undefined = undefined;
+  let rawMarginLeft: number | undefined = undefined;
+  let rawMarginBottom: number | undefined = undefined;
+  let rawMarginRight: number | undefined = undefined;
+
+  const safeAreaChange = (e: ReactNative.NativeSyntheticEvent<onSafeAreaValueChangeEvent>) => {
+    if (e.nativeEvent.safeAreaViewInsetsValue?.top) {
+      safeAreaTop = e.nativeEvent.safeAreaViewInsetsValue?.top;
+    }
+    if (e.nativeEvent.safeAreaViewInsetsValue?.right) {
+      safeAreaRight = e.nativeEvent.safeAreaViewInsetsValue?.right;
+    }
+    if (e.nativeEvent.safeAreaViewInsetsValue?.bottom) {
+      safeAreaBottom = e.nativeEvent.safeAreaViewInsetsValue?.bottom;
+    }
+    if (e.nativeEvent.safeAreaViewInsetsValue?.left) {
+      safeAreaLeft = e.nativeEvent.safeAreaViewInsetsValue?.left;
+    }
+
+    if (!isOnChange) {
+      setIsFirstRefresh(true);
+    }
+    isOnChange = true;
+  }
+
+  let rawProp = props.style as ReactNative.ViewStyle[];
+  let i: number;
+  if (rawProp && rawProp.length > 0) {
+    for (i = 0; i < rawProp.length; i++) {
+      if (rawProp[i]?.padding) {
+        rawPadding = rawProp[i]?.padding as number;
+      }
+
+      if (rawProp[i]?.margin) {
+        rawMargin = rawProp[i]?.margin as number;
+      }
+
+      if (rawProp[i]?.paddingTop) {
+        rawPaddingTop = rawProp[i]?.paddingTop as number;
+      }
+
+      if (rawProp[i]?.paddingLeft) {
+        rawPaddingLeft = rawProp[i]?.paddingLeft as number;
+      }
+
+      if (rawProp[i]?.paddingRight) {
+        rawPaddingRight = rawProp[i]?.paddingRight as number;
+      }
+
+      if (rawProp[i]?.paddingBottom) {
+        rawPaddingBottom = rawProp[i]?.paddingBottom as number;
+      }
+
+      if (rawProp[i]?.marginTop) {
+        rawMarginTop = rawProp[i]?.marginTop as number;
+      }
+
+      if (rawProp[i]?.marginLeft) {
+        rawMarginLeft = rawProp[i]?.marginLeft as number;
+      }
+
+      if (rawProp[i]?.marginRight) {
+        rawMarginRight = rawProp[i]?.marginRight as number;
+      }
+
+      if (rawProp[i]?.marginBottom) {
+        rawMarginBottom = rawProp[i]?.marginBottom as number;
+      }
+    }
+  }
+
+  if (!rawPaddingTop) {
+    rawPaddingTop = rawPadding;
+  }
+
+  if (!rawPaddingLeft) {
+    rawPaddingLeft = rawPadding;
+  }
+
+  if (!rawPaddingRight) {
+    rawPaddingRight = rawPadding;
+  }
+
+  if (!rawPaddingBottom) {
+    rawPaddingBottom = rawPadding;
+  }
+
+  if (!rawMarginTop) {
+    rawMarginTop = rawMargin;
+  }
+
+  if (!rawMarginLeft) {
+    rawMarginLeft = rawMargin;
+  }
+
+  if (!rawMarginRight) {
+    rawMarginRight = rawMargin;
+  }
+
+  if (!rawMarginBottom) {
+    rawMarginBottom = rawMargin;
+  }
+
+  if (isOnChange) {
+    if (props.mode === 'margin') {
+      realTop = getEdgeValue(nativeEdges.top, safeAreaTop, rawMarginTop)
+      realLeft = getEdgeValue(nativeEdges.left, safeAreaLeft, rawMarginLeft)
+      realBottom = getEdgeValue(nativeEdges.bottom, safeAreaBottom, rawMarginBottom)
+      realRight = getEdgeValue(nativeEdges.right, safeAreaRight, rawMarginRight)
+      safeAreaStyle = [props.style, { marginTop: realTop, marginLeft: realLeft, marginBottom: realBottom, marginRight: realRight }]
+    } else {
+      realTop = getEdgeValue(nativeEdges.top, safeAreaTop, rawPaddingTop)
+      realLeft = getEdgeValue(nativeEdges.left, safeAreaLeft, rawPaddingLeft)
+      realBottom = getEdgeValue(nativeEdges.bottom, safeAreaBottom, rawPaddingBottom)
+      realRight = getEdgeValue(nativeEdges.right, safeAreaRight, rawPaddingRight)
+      safeAreaStyle = [props.style, { paddingTop: realTop, paddingLeft: realLeft, paddingBottom: realBottom, paddingRight: realRight }]
+    }
+  }
+
+  return <NativeSafeAreaView {...props} style={safeAreaStyle} edges={nativeEdges} isFirstRefresh={isFirstRefresh} onSafeAreaValueChange={safeAreaChange} ref={ref} />;
+});

package/src/index.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+export * from 'react-native-safe-area-context/src/SafeAreaContext';
+export * from './SafeAreaView';
+export * from 'react-native-safe-area-context/src//InitialWindow';
+export * from 'react-native-safe-area-context/src//SafeArea.types';

package/src/specs/NativeSafeAreaContext.ts

@@ -0,0 +1,23 @@
+import { TurboModule, TurboModuleRegistry } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Spec extends TurboModule {
+  getConstants: () => {
+    initialWindowMetrics?: {
+      insets: {
+        top: Double;
+        right: Double;
+        bottom: Double;
+        left: Double;
+      };
+      frame: {
+        x: Double;
+        y: Double;
+        width: Double;
+        height: Double;
+      };
+    };
+  };
+}
+
+export default TurboModuleRegistry.get<Spec>('RNCSafeAreaContext');

package/src/specs/NativeSafeAreaProvider.ts

@@ -0,0 +1,29 @@
+import type {
+  DirectEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, HostComponent } from 'react-native';
+
+export type Event = Readonly<{
+  insets: Readonly<{
+    top: Double;
+    right: Double;
+    bottom: Double;
+    left: Double;
+  }>;
+  frame: Readonly<{
+    x: Double;
+    y: Double;
+    width: Double;
+    height: Double;
+  }>;
+}>;
+
+export interface NativeProps extends ViewProps {
+  onInsetsChange?: DirectEventHandler<Event>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNCSafeAreaProvider',
+) as HostComponent<NativeProps>;

package/src/specs/NativeSafeAreaView.ts

@@ -0,0 +1,28 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { WithDefault, Float, DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import type { ViewProps, HostComponent } from 'react-native';
+
+export type onSafeAreaValueChangeEvent = Readonly<{
+  safeAreaViewInsetsValue?: {
+    top?: Float;
+    left?: Float;
+    bottom?: Float
+    right?: Float
+  };
+}>
+
+export interface NativeProps extends ViewProps {
+  mode?: WithDefault<'padding' | 'margin', 'padding'>;
+  edges?: Readonly<{
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+  }>;
+  isFirstRefresh: boolean;
+  onSafeAreaValueChange: DirectEventHandler<onSafeAreaValueChangeEvent>,
+}
+
+export default codegenNativeComponent<NativeProps>('RNCSafeAreaView', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;