diff --git a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets
index 80a1bfa287697c68304352d5354aea83a29349c4..6549114fa636829da3a80092e499a2e011917a4f 100644
--- a/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets
+++ b/tester/harmony/react_native_openharmony/src/main/ets/RNSurface.ets
@@ -27,6 +27,7 @@ import { SurfaceHandle, SurfaceProps } from './RNOH/SurfaceHandle';
 import { I18nManagerTurboModule } from './RNOHCorePackage/turboModules';
 import type { SurfaceContext } from './RNOH/RNInstance';
 import { NodeContent } from '@ohos.arkui.node'
+import { uiObserver as observer } from '@kit.ArkUI';
 
 interface RootViewState {}
 
@@ -120,9 +121,42 @@ export struct RNSurface {
   * onWindowSizeChange delay, as both have an effect on window changes. 
   */
   private readonly delayTime: number = 100;
+  private isOnNavDestinationSwitch: boolean = false;
+  private navgationInfo: NavigationInfo | undefined;
+  private navDestinationInfo: NavDestinationInfo | undefined;
+
+  onNavDestinationSwitch(): void {
+    if (this.isOnNavDestinationSwitch) {
+      return;
+    }
+    this.navgationInfo = this.queryNavigationInfo();
+    this.navDestinationInfo = this.queryNavDestinationInfo();
+    if (this.navgationInfo == undefined) {
+      return;
+    }
+    const callBackNavDestinationSwitchInfo = (info: observer.NavDestinationSwitchInfo) => {
+      const navDestinationInfoFrom = (info.from) as NavDestinationInfo;
+      const navDestinationInfoTo = (info.to) as NavDestinationInfo;
+      // navigation to navDestination
+      if (navDestinationInfoFrom.state == undefined && this.navDestinationInfo == undefined) {
+        this.surfaceHandle.setDisplayMode(DisplayMode.Hidden);
+        return;
+      }
+      // navDestination to navDestination
+      if (navDestinationInfoFrom.state == observer.NavDestinationState.ON_HIDDEN
+        && navDestinationInfoFrom.name == this.navDestinationInfo?.name) {
+        this.surfaceHandle.setDisplayMode(DisplayMode.Hidden);
+      }
+      return;
+    }
+    this.isOnNavDestinationSwitch = true;
+    observer.on('navDestinationSwitch', this.getUIContext(), {navigationId: this.navgationInfo.navigationId},
+     callBackNavDestinationSwitchInfo);
+  }
 
   aboutToAppear() {
     this.logger = this.ctx.logger.clone("RNSurface")
+    this.onNavDestinationSwitch()
     if (!(this.ctx instanceof RNComponentContext)) {
       this.ctx.reportRNOHError(new RNOHError({
         whatHappened: "RNSurface received RNOHContext instead of RNComponentContext. Custom RN components won't be visible.",
@@ -166,6 +200,9 @@ export struct RNSurface {
 
   aboutToDisappear() {
     const surfaceHandle = this.surfaceHandle;
+    if (this.isOnNavDestinationSwitch) {
+      observer.off('navDestinationSwitch', this.getUIContext(), {navigationId: this.navgationInfo?.navigationId}, null);
+    }
     if (this.timerId) {
       clearTimeout(this.timerId);
       this.timerId = undefined;