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

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

@@ -0,0 +1,128 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2025 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 {
+  Descriptor,
+  ComponentBuilderContext,
+  RNComponentFactory,
+  RNOHContext,
+  ViewRawProps,
+  ViewBaseProps,
+  ViewDescriptorWrapperBase,
+  RNViewManager,
+  ViewBaseDescriptor
+} from '@rnoh/react-native-openharmony'
+
+import { SafeAreaViewTurboModule } from "./SafeViewTurboModule"
+import { Event, Tag } from './common/SafeAreaType';
+import Logger from './Logger'
+import { SafeAreaProviderModifier } from './SafeAreaProviderModifier'
+
+export const SAFE_AREA_PROVIDER_TYPE: string = "RNCSafeAreaProvider"
+
+export interface SafeAreaProviderProps extends ViewBaseProps {}
+
+export interface SafeAreaProviderState {}
+
+export interface SafeAreaProviderRawProps extends ViewRawProps {}
+
+export type SafeAreaProviderDescriptor = Descriptor<"RNCSafeAreaProvider", SafeAreaProviderProps, SafeAreaProviderState, SafeAreaProviderRawProps>
+
+export class SafeAreaProviderDescriptorWrapper extends ViewDescriptorWrapperBase<"RNCSafeAreaProvider", SafeAreaProviderProps, SafeAreaProviderState, SafeAreaProviderRawProps> {
+}
+
+@Component
+export struct SafeAreaProvider {
+  ctx!: RNOHContext
+  tag: number = 0
+  @BuilderParam buildCustomComponent: (componentBuilderContext: ComponentBuilderContext) => void
+  private componentManager!: RNViewManager
+  @State descriptor: SafeAreaProviderDescriptor = {} as SafeAreaProviderDescriptor
+  @State descriptorWrapper: SafeAreaProviderDescriptorWrapper | undefined = undefined
+  private unregisterDescriptorChangesListener?: () => void = undefined
+  private unregisterComponentManager?: () => void = undefined
+
+  onInsetsChange() {
+    const safeAreaViewTurboModule = this.ctx.rnInstance.getTurboModule<SafeAreaViewTurboModule>("RNCSafeAreaContext")
+    const safeAreaInsets = safeAreaViewTurboModule.getSafeAreaInsets();
+    safeAreaInsets.then((data: Event) => {
+      this.ctx.rnInstance.emitComponentEvent(this.descriptor.tag, SAFE_AREA_PROVIDER_TYPE, {
+        type: "onInsetsChange",
+        insets: data.insets,
+        frame: {
+          x: this.descriptor.layoutMetrics.frame.origin.x,
+          y: this.descriptor.layoutMetrics.frame.origin.y,
+          width: this.descriptor.layoutMetrics.frame.size.width,
+          height: this.descriptor.layoutMetrics.frame.size.height
+        },
+      })
+    })
+  }
+
+  aboutToAppear() {
+    this.descriptor = this.ctx.descriptorRegistry.getDescriptor<SafeAreaProviderDescriptor>(this.tag)
+    if (this.descriptor) {
+      this.setDescriptor(this.descriptor)
+    }
+    this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
+      (newDescriptor) => {
+        this.setDescriptor(newDescriptor as SafeAreaProviderDescriptor)
+      }
+    )
+    this.initComponent();
+    this.onInsetsChange()
+  }
+
+  aboutToDisappear() {
+    this.unregisterDescriptorChangesListener?.()
+    this.unregisterComponentManager?.()
+  }
+
+  initComponent() {
+    if (!this.componentManager) {
+      this.componentManager = new RNViewManager(this.tag, this.ctx)
+    }
+    this.unregisterComponentManager = this.ctx.componentManagerRegistry.registerComponentManager(this.tag, this.componentManager)
+    const parentTag = this.descriptor.parentTag;
+    this.componentManager.setParentTag(parentTag);
+  }
+
+  private setDescriptor(descriptor: SafeAreaProviderDescriptor) {
+    this.descriptorWrapper = new SafeAreaProviderDescriptorWrapper(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(SafeAreaProviderModifier.getInstance().setDescriptor(this.descriptorWrapper))
+  }
+}

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

@@ -0,0 +1,121 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2025 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 { SafeAreaProviderDescriptorWrapper } from './SafeAreaProvider';
+import matrix4 from '@ohos.matrix4';
+
+export class SafeAreaProviderModifier implements AttributeModifier<StackAttribute> {
+  private constructor() {
+  }
+
+  private static instance: SafeAreaProviderModifier;
+  protected descriptorWrapper: SafeAreaProviderDescriptorWrapper | undefined = undefined
+
+  public static getInstance(): SafeAreaProviderModifier {
+    if (!SafeAreaProviderModifier.instance) {
+      SafeAreaProviderModifier.instance = new SafeAreaProviderModifier();
+    }
+    return SafeAreaProviderModifier.instance;
+  }
+
+  setDescriptor(descriptorWrapper: SafeAreaProviderDescriptorWrapper | undefined): SafeAreaProviderModifier {
+    this.descriptorWrapper = descriptorWrapper;
+    return SafeAreaProviderModifier.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)
+    }
+  }
+}

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

@@ -0,0 +1,242 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2025 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) 2025 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.ts

@@ -0,0 +1,46 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2025 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';
+
+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 RNPackage {
+  createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
+    return new SafeAreaTurboModulesFactory(ctx);
+  }
+}