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

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@react-native-ohos/react-native-safe-area-context",
+  "version": "4.7.5-rc.1",
+  "description": "A flexible way to handle safe area, also works on Android and web.",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "react-native": "src/index.tsx",
+  "types": "lib/typescript/index.d.ts",
+  "harmony": {
+    "alias": "react-native-safe-area-context",
+    "autolinking": {
+      "etsPackageClassName":"SafeAreaViewPackage",
+      "cppPackageClassName":"SafeAreaViewPackage",
+      "cmakeLibraryTargetName": "rnoh_safe_area",
+      "ohPackageName": "@react-native-ohos/react-native-safe-area-context"
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "source": "src/index.tsx",
+  "sideEffects": false,
+  "files": [
+    "src",
+    "lib",
+    "jest",
+    "*.podspec",
+    "react-native.config.js",
+    "!**/__tests__",
+    "!example",
+    "harmony"
+  ],
+  "homepage": "https://gitcode.com/openharmony-sig/rntpc_react-native-safe-area-context#readme",
+  "license": "MIT",
+  "scripts": {
+    "start": "react-native start",
+    "test": "yarn format:check && yarn validate:eslint && yarn validate:typescript && yarn validate:jest",
+    "validate:eslint": "eslint \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\"",
+    "validate:typescript": "tsc --project ./ --noEmit",
+    "validate:jest": "jest",
+    "format:prettier:check": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" --check",
+    "format:prettier:write": "yarn format:prettier:check --write",
+    "format:clang:check": "clang-format --dry-run --Werror --glob='{ios,android,common}/**/*.{h,cpp,m,mm}'",
+    "format:clang:write": "clang-format -i --glob='{ios,android,common}/**/*.{h,hpp,cpp,m,mm}'",
+    "format:spotless:check": "cd android && ./gradlew spotlessCheck",
+    "format:spotless:write": "cd android && ./gradlew spotlessApply",
+    "format:check": "yarn format:prettier:check && yarn format:clang:check && yarn format:spotless:check",
+    "format:write": "yarn format:prettier:write && yarn format:clang:write && yarn format:spotless:write",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "react native",
+    "react-native-web",
+    "expo-web",
+    "safe area",
+    "view"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.6.1",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/eslint-plugin-specs": "^0.73.0",
+    "@release-it/conventional-changelog": "^5.1.1",
+    "@types/jest": "^29.5.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "clang-format": "^1.8.0",
+    "commitlint": "^17.6.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
+    "metro-react-native-babel-preset": "0.76.5",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.72.1",
+    "react-native-builder-bob": "^0.20.4",
+    "react-test-renderer": "^18.2.0",
+    "release-it": "^15.10.1",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "react-native-safe-area-context": "4.7.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitcode.com/openharmony-sig/rntpc_react-native-safe-area-context.git"
+  },
+  "jest": {
+    "preset": "react-native",
+    "testEnvironment": "node",
+    "clearMocks": true,
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

package/src/SafeArea.types.ts

@@ -0,0 +1,47 @@
+import type * as React from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import NativeSafeAreaView from './specs/NativeSafeAreaView';
+
+export type Edge = 'top' | 'right' | 'bottom' | 'left';
+export type EdgeMode = 'off' | 'additive' | 'maximum';
+
+export type EdgeRecord = Partial<Record<Edge, EdgeMode>>;
+export type Edges = readonly Edge[] | Readonly<EdgeRecord>;
+
+export interface EdgeInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Metrics {
+  insets: EdgeInsets;
+  frame: Rect;
+}
+
+export type InsetChangedEvent = NativeSyntheticEvent<Metrics>;
+
+export type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;
+
+export interface NativeSafeAreaProviderProps extends ViewProps {
+  children?: React.ReactNode;
+  onInsetsChange: InsetChangeNativeCallback;
+}
+
+export interface NativeSafeAreaViewProps extends ViewProps {
+  children?: React.ReactNode;
+  mode?: 'padding' | 'margin';
+  edges?: Edges;
+}
+
+export type NativeSafeAreaViewInstance = InstanceType<
+  typeof NativeSafeAreaView
+>;

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,4 @@
+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, 'paperInsetsChange'>;
+}
+
+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>;