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

package/harmony/safe_area/src/main/ets/SafeAreaView.ets

@@ -0,0 +1,242 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import matrix4 from '@ohos.matrix4'
+
+import {
+  Descriptor,
+  ComponentBuilderContext,
+  RNOHContext,
+  ViewBaseProps,
+  Tag,
+  RNComponentFactory,
+  ViewRawProps,
+  RNViewManager,
+  ViewDescriptorWrapperBase,
+  TransformMatrix,
+  CompactValue,
+  Edges,
+  Point
+} from '@rnoh/react-native-openharmony'
+
+import { SafeAreaViewModifier } from './SafeAreaViewModifier'
+import { SafeAreaViewTurboModule } from "./SafeViewTurboModule"
+import { EdgeInsets, AvoidArea, Event, EdgesMode } from './common/SafeAreaType';
+import Logger from './Logger'
+
+export const SAFE_AREA_VIEW_TYPE: string = "RNCSafeAreaView"
+
+export type DimensionValue = number | 'auto' | `${number}%` | null;
+
+export interface SafeAreaViewProps extends ViewBaseProps {
+  edges: EdgesMode,
+  mode: string,
+  margin: EdgeInsets,
+  padding: EdgeInsets,
+}
+
+export interface SafeAreaViewState {}
+
+export interface SafeAreaViewRawProps extends ViewRawProps {
+  mode: string
+}
+
+export type SafeAreaViewDescriptor = Descriptor<"RNCSafeAreaView", SafeAreaViewProps, SafeAreaViewState, SafeAreaViewRawProps>;
+
+export class SafeAreaViewManager extends RNViewManager {
+  protected offsetX: number = 0;
+  protected offsetY: number = 0;
+
+  constructor(
+    tag: Tag,
+    ctx: RNOHContext,
+    offsetX: number,
+    offsetY: number
+  ) {
+    super(tag, ctx);
+    this.offsetX = offsetX
+    this.offsetY = offsetY
+  }
+
+  setOffsetX(offsetX: number) {
+    this.offsetX = offsetX
+  }
+
+  setOffsetY(offsetY: number) {
+    this.offsetY = offsetY
+  }
+
+  public computeChildPoint(point: Point, childTag: Tag): Point {
+    return super.computeChildPoint({ x: point.x + this.offsetX, y: point.y + this.offsetY }, childTag);
+  }
+}
+
+export class SafeAreaViewDescriptorWrapper extends ViewDescriptorWrapperBase<"RNCSafeAreaView", SafeAreaViewProps, SafeAreaViewState, SafeAreaViewRawProps> {
+  public edgeInsets: EdgeInsets = { top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0 }
+
+  public get mode(): string | undefined {
+    return this.rawProps.mode
+  }
+
+  public SetEdgeInsets(edges: EdgeInsets) {
+    this.edgeInsets = edges
+  }
+
+  public getEdgeInsets() {
+    return this.edgeInsets
+  }
+
+  public get margin(): Edges<CompactValue> {
+    const resolvedEdges = this.resolveEdges({
+      all: this.rawProps.margin,
+      top: this.rawProps.marginTop,
+      left: this.rawProps.marginLeft,
+      right: this.rawProps.marginRight,
+      bottom: this.rawProps.marginBottom,
+      start: this.rawProps.marginStart,
+      end: this.rawProps.marginEnd,
+    })
+
+    return {
+      top: new CompactValue(resolvedEdges.top as DimensionValue, this.height),
+      left: new CompactValue(resolvedEdges.left as DimensionValue, this.width),
+      right: new CompactValue(resolvedEdges.right as DimensionValue, this.width),
+      bottom: new CompactValue(resolvedEdges.bottom as DimensionValue, this.height),
+    }
+  }
+}
+
+@Component
+export struct SafeAreaView {
+  ctx!: RNOHContext
+  tag: number = 0
+  @BuilderParam public buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void
+  private componentManager!: SafeAreaViewManager
+  @State descriptor: SafeAreaViewDescriptor = {} as SafeAreaViewDescriptor
+  @State descriptorWrapper: SafeAreaViewDescriptorWrapper | undefined = undefined
+  private unregisterDescriptorChangesListener?: () => void = undefined
+  private unregisterComponentManager?: () => void = undefined
+  @State avoidArea: AvoidArea = {} as AvoidArea
+  @State edgeInsets: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 }
+
+  getEdgeValue(edgeMode: string | undefined, insetValue: number, edgeValue: number): number {
+    if (edgeMode == 'off') {
+      return 0;
+    } else if (edgeMode == 'maximum') {
+      //insetValue 安全区域    edgeValue原区域
+      return edgeValue > insetValue ? edgeValue - insetValue : insetValue - edgeValue
+    } else {
+      return insetValue;
+    }
+  }
+
+  updateInsets() {
+    const safeAreaViewTurboModule = this.ctx.rnInstance.getTurboModule<SafeAreaViewTurboModule>("RNCSafeAreaContext")
+    const safeAreaInsets = safeAreaViewTurboModule.getSafeAreaInsets();
+    let edges: EdgesMode = { top: 'additive', right: 'additive', bottom: 'additive', left: 'additive' };
+    edges = this.descriptor.props.edges
+    safeAreaInsets.then((data: Event) => {
+      if (data.insets) {
+        let edgesData = this.descriptorWrapper?.mode && this.descriptorWrapper?.mode === 'margin' ? this.descriptor.props.margin : this.descriptor.props.padding
+        this.edgeInsets = {
+          top: this.getEdgeValue(edges.top, data.insets.top, edgesData?.top),
+          right: this.getEdgeValue(edges.right, data.insets.right, edgesData?.right),
+          bottom: this.getEdgeValue(edges.bottom, data.insets.bottom, edgesData?.bottom),
+          left: this.getEdgeValue(edges.left, data.insets.left, edgesData?.left)
+        }
+      }
+      Logger.info("edgeInsets " + JSON.stringify(this.edgeInsets))
+    })
+      .catch((e: string | Error) => {
+        Logger.error('updateInsets error', JSON.stringify(e));
+        this.edgeInsets = {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        }
+      })
+      .finally(() => {
+        if (this.descriptorWrapper) {
+          this.descriptorWrapper.SetEdgeInsets(this.edgeInsets)
+        }
+        let offsetY = this.edgeInsets.bottom - this.edgeInsets.top
+        let offsetX = this.edgeInsets.right - this.edgeInsets.left
+        this.componentManager.setOffsetY(offsetY)
+        this.componentManager.setOffsetX(offsetX)
+        this.componentManager.markBoundingBoxAsDirty()
+      })
+  }
+
+  aboutToAppear() {
+    this.descriptor = this.ctx.descriptorRegistry.getDescriptor<SafeAreaViewDescriptor>(this.tag)
+    if (this.descriptor) {
+      this.setDescriptor(this.descriptor)
+    }
+    this.updateInsets()
+    this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
+      (newDescriptor) => {
+        this.setDescriptor(newDescriptor as SafeAreaViewDescriptor)
+        this.updateInsets()
+      }
+    )
+    this.initComponent()
+  }
+
+  aboutToDisappear() {
+    this.unregisterDescriptorChangesListener?.()
+    this.unregisterComponentManager?.()
+  }
+
+  initComponent() {
+    if (!this.componentManager) {
+      this.componentManager = new SafeAreaViewManager(this.tag, this.ctx, 0, 0)
+    }
+    this.unregisterComponentManager = this.ctx.componentManagerRegistry.registerComponentManager(this.tag, this.componentManager)
+    const parentTag = this.descriptor.parentTag;
+    this.componentManager.setParentTag(parentTag);
+  }
+
+  private setDescriptor(descriptor: SafeAreaViewDescriptor) {
+    this.descriptorWrapper = new SafeAreaViewDescriptorWrapper(descriptor)
+    this.descriptor = descriptor
+    Logger.info('descriptorWrapper' + JSON.stringify(this.descriptorWrapper))
+  }
+
+  build() {
+    Stack() {
+      ForEach(this.descriptorWrapper?.childrenTags, (childrenTag: Tag) => {
+        RNComponentFactory({
+          ctx: this.ctx,
+          tag: childrenTag,
+          buildCustomComponent: this.buildCustomComponent
+        })
+      }, (tag: Tag) => tag.toString())
+    }
+    .attributeModifier(SafeAreaViewModifier.getInstance().setDescriptor(this.descriptorWrapper))
+  }
+}

package/harmony/safe_area/src/main/ets/SafeAreaViewModifier.ets

@@ -0,0 +1,140 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { TransformMatrix } from '@rnoh/react-native-openharmony'
+import { SafeAreaViewDescriptorWrapper } from './SafeAreaView'
+import matrix4 from '@ohos.matrix4'
+
+export class SafeAreaViewModifier implements AttributeModifier<StackAttribute> {
+  private constructor() {
+  }
+
+  private static instance: SafeAreaViewModifier;
+  protected descriptorWrapper: SafeAreaViewDescriptorWrapper | undefined = undefined
+
+  public static getInstance(): SafeAreaViewModifier {
+    if (!SafeAreaViewModifier.instance) {
+      SafeAreaViewModifier.instance = new SafeAreaViewModifier();
+    }
+    return SafeAreaViewModifier.instance;
+  }
+
+  setDescriptor(descriptorWrapper: SafeAreaViewDescriptorWrapper | undefined): SafeAreaViewModifier {
+    this.descriptorWrapper = descriptorWrapper;
+    return SafeAreaViewModifier.instance;
+  }
+
+  getHitTestMode() {
+    switch (this.descriptorWrapper?.pointerEvents) {
+      case "none":
+        return HitTestMode.None
+      case "box-none":
+        return HitTestMode.None
+      case "box-only":
+        return HitTestMode.Block
+      default:
+        return HitTestMode.Default
+    }
+  }
+
+  getBorderStyle(): BorderStyle {
+    switch (this.descriptorWrapper?.borderStyle) {
+      case "dashed":
+        return BorderStyle.Dashed
+      case "dotted":
+        return BorderStyle.Dotted
+      default:
+        return BorderStyle.Solid
+    }
+  }
+
+  getTransform(): undefined | matrix4.Matrix4Transit {
+    const descriptorWrapper = this.descriptorWrapper
+    if (!descriptorWrapper) {
+      return undefined
+    }
+    const rawTransformationMatrix = descriptorWrapper.rawTransformationMatrix.slice()
+    rawTransformationMatrix[12] = vp2px(rawTransformationMatrix[12]);
+    rawTransformationMatrix[13] = vp2px(rawTransformationMatrix[13]);
+    rawTransformationMatrix[14] = vp2px(rawTransformationMatrix[14]);
+    return matrix4.init(rawTransformationMatrix as TransformMatrix)
+  }
+
+  applyNormalAttribute(instance: StackAttribute): void {
+    instance.width(this.descriptorWrapper?.width)
+    instance.height(this.descriptorWrapper?.height)
+    instance.position(this.descriptorWrapper?.positionRelativeToParent)
+
+    if (this.descriptorWrapper?.backgroundColor !== '#00000000') {
+      instance.backgroundColor(this.descriptorWrapper?.backgroundColor)
+    }
+    if (JSON.stringify(this.descriptorWrapper?.borderWidth) !== '{}') {
+      instance.borderWidth(this.descriptorWrapper?.borderWidth)
+    }
+    if (JSON.stringify(this.descriptorWrapper?.borderColor) !== '{"top":"#00000000","left":"#00000000","right":"#00000000","bottom":"#00000000"}') {
+      instance.borderColor(this.descriptorWrapper?.borderColor)
+    }
+    if (JSON.stringify(this.descriptorWrapper?.borderRadius) !== '{}') {
+      instance.borderRadius(this.descriptorWrapper?.borderRadius)
+    }
+    if (this.descriptorWrapper?.borderStyle === 'dashed' || this.descriptorWrapper?.borderStyle === 'dotted') {
+      instance.borderStyle(this.getBorderStyle())
+    }
+    if (this.descriptorWrapper?.opacity !== 1) {
+      instance.opacity(this.descriptorWrapper?.opacity)
+    }
+    // if (this.descriptorWrapper?.transformStringify !== '[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]') {
+    //   instance.transform(this.getTransform())
+    // }
+    if (this.descriptorWrapper?.isClipping) {
+      instance.clip(this.descriptorWrapper?.isClipping)
+    }
+    let hitTestBehavior: HitTestMode = this.getHitTestMode();
+    if (hitTestBehavior !== HitTestMode.Default) {
+      instance.hitTestBehavior(hitTestBehavior)
+    }
+    if (this.descriptorWrapper?.shadow) {
+      instance.shadow(this.descriptorWrapper?.shadow)
+    }
+    if (this.descriptorWrapper?.mode) {
+      if (this.descriptorWrapper?.mode === 'margin') {
+        instance.margin({
+          top: this.descriptorWrapper?.edgeInsets.top,
+          right: this.descriptorWrapper?.edgeInsets.right,
+          bottom: this.descriptorWrapper?.edgeInsets.bottom,
+          left: this.descriptorWrapper?.edgeInsets.left
+        })
+        instance.padding(0)
+      } else {
+        instance.padding({
+          top: this.descriptorWrapper?.edgeInsets.top,
+          right: this.descriptorWrapper?.edgeInsets.right,
+          bottom: this.descriptorWrapper?.edgeInsets.bottom,
+          left: this.descriptorWrapper?.edgeInsets.left
+        })
+        instance.margin(0)
+      }
+    }
+  }
+}

package/harmony/safe_area/src/main/ets/SafeAreaViewPackage.ets

@@ -0,0 +1,47 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { RNPackage, TurboModulesFactory } from '@rnoh/react-native-openharmony/ts';
+import type { TurboModule, TurboModuleContext } from '@rnoh/react-native-openharmony/ts';
+import { SafeAreaViewTurboModule } from './SafeViewTurboModule';
+import { RNOHPackage } from "@rnoh/react-native-openharmony";
+
+class SafeAreaTurboModulesFactory extends TurboModulesFactory {
+  createTurboModule(name: string): TurboModule | null {
+    if (name === 'RNCSafeAreaContext') {
+      return new SafeAreaViewTurboModule(this.ctx);
+    }
+    return null;
+  }
+
+  hasTurboModule(name: string): boolean {
+    return name === 'RNCSafeAreaContext';
+  }
+}
+
+export class SafeAreaViewPackage extends RNOHPackage {
+  createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
+    return new SafeAreaTurboModulesFactory(ctx);
+  }
+}

package/harmony/safe_area/src/main/ets/SafeViewTurboModule.ts

@@ -0,0 +1,131 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+import window from '@ohos.window';
+import type { TurboModuleContext } from '@rnoh/react-native-openharmony/ts';
+import { TurboModule } from '@rnoh/react-native-openharmony/ts';
+import type { EdgeInsets, Event, Frame } from './common/SafeAreaType';
+import Logger from './Logger';
+
+const TAG: string = '[RNOH]SafeAreaViewTurboModule'
+
+
+export class SafeAreaViewTurboModule extends TurboModule {
+  private windowInstance: window.Window = null;
+
+  constructor(protected ctx: TurboModuleContext) {
+    super(ctx);
+    if (!this.windowInstance) {
+      window.getLastWindow(this.ctx.uiAbilityContext, (err, data) => {
+        if (err.code) {
+          Logger.debug(TAG, 'Failed to obtain the top window. Cause: ' + JSON.stringify(err));
+          return;
+        }
+        this.windowInstance = data
+      })
+      this.sleep(10);
+    }
+    Logger.debug(TAG, '[RNOH]:SafeAreaViewTurboModule constructor');
+  }
+
+  sleep(delay: number) {
+    var start = new Date().getTime();
+    while ((new Date().getTime() - start) < delay) {
+      continue;
+    }
+  }
+
+  getConstants(): {} {
+    Logger.debug(TAG, 'RNCSafeAreaContext getConstants:' + this.windowInstance);
+    let frame: Frame = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    }
+    let insets: EdgeInsets = {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+    if (this.windowInstance != null) {
+      const windowInfo = this.windowInstance.getWindowProperties()
+      const avoidArea = this.windowInstance.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
+      const avoidAreaBottom = this.windowInstance.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
+      frame = {
+        x: px2vp(windowInfo.windowRect.left),
+        y: px2vp(windowInfo.windowRect.top),
+        width: px2vp(windowInfo.windowRect.width),
+        height: px2vp(windowInfo.windowRect.height)
+      }
+      insets = {
+        top: px2vp(avoidArea.topRect.height),
+        right: px2vp(avoidArea.rightRect.height),
+        bottom: px2vp(avoidAreaBottom.bottomRect.height),
+        left: px2vp(avoidArea.leftRect.height)
+      }
+    }
+    return { "initialWindowMetrics": { frame, insets } }
+  }
+
+  getSafeAreaInsets(): Promise<Event> {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const windowInstance = await window.getLastWindow(this.ctx.uiAbilityContext);
+        const windowInfo = windowInstance.getWindowProperties()
+        Logger.debug(TAG, JSON.stringify(windowInfo));
+        const frame: Frame = {
+          x: px2vp(windowInfo.windowRect.left),
+          y: px2vp(windowInfo.windowRect.top),
+          width: px2vp(windowInfo.windowRect.width),
+          height: px2vp(windowInfo.windowRect.height)
+        }
+        if (!windowInfo.isLayoutFullScreen) {
+          const insets: EdgeInsets = {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+          }
+          resolve({ insets, frame })
+        } else {
+          let type = window.AvoidAreaType.TYPE_SYSTEM;
+          let avoidArea = windowInstance.getWindowAvoidArea(type);
+          const avoidAreaBottom = this.windowInstance.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
+          const insets: EdgeInsets = {
+            top: px2vp(avoidArea.topRect.height),
+            right: px2vp(avoidArea.rightRect.height),
+            bottom: px2vp(avoidAreaBottom.bottomRect.height),
+            left: px2vp(avoidArea.leftRect.height)
+          }
+          resolve({ insets, frame })
+        }
+      } catch (exception) {
+        reject(exception)
+      }
+    })
+  }
+}

package/harmony/safe_area/src/main/ets/common/SafeAreaType.ts

@@ -0,0 +1,70 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export type EdgesMode = {
+  top?: string
+  right?: string
+  bottom?: string
+  left?: string
+}
+
+export type EdgeInsets = {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export type Frame = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type Event = {
+  insets: EdgeInsets
+  frame: Frame
+}
+
+export type Rect = {
+  top?: number
+  right?: number
+  bottom?: number
+  left?: number
+}
+
+export type AvoidArea = {
+  margin?: Rect | number
+  padding?: Rect | number
+}
+
+export type AvoidAreaProps = {
+  edges: string
+  mode: string
+  margin: string
+  padding: string
+}
+
+export type Tag = number;

package/harmony/safe_area/src/main/module.json5

@@ -0,0 +1,7 @@
+{
+  module: {
+    name: 'safe_area',
+    type: 'har',
+    deviceTypes: ['default'],
+  },
+}

package/harmony/safe_area/src/main/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    }
+  ]
+}

package/harmony/safe_area/src/main/resources/en_US/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    }
+  ]
+}

package/harmony/safe_area/src/main/resources/zh_CN/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    }
+  ]
+}

package/harmony/safe_area/ts.ets

@@ -0,0 +1,26 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export * from "./src/main/ets/SafeAreaViewPackage"
+export * from "./src/main/ets/SafeViewTurboModule"