Fix: KeyboardAvoidingView jitters in modals without set height

Co-authored-by: Przemysław Sosna<przemyslaw.sosna@swmansion.com>



# message auto-generated for no-merge-commit merge:
merge @sosen/modal-host-view-state into 0.77.1-rc.1-ohos

Fix: KeyboardAvoidingView jitters in modals without set height

Created-by: PrzemekSosna
Commit-by: Przemysław Sosna
Merged-by: huangyouhua
Description: ## Description
ModalHostViewState was previously initialized with height and width {0,0}. This would cause the first onLayout events to return the wrong height. KeyboardAvoidingView uses the first onLayout to set initialFrameHeight, which is then used to calculate the height of the components. This would lead to negative values being calculated for the height causing jittering etc. 

This is the PR in the core RN repo for reference: facebook/react-native#51048

## Changes
- fixed KeyboardAvoidingView jittering by initializing ModalHostViewState with sensible values.  

## Test Plan
1. Run the below snippet and focus the TextInput. You shouldn't see any jittering.
```ts
import React, {useState} from 'react';
import {
  View,
  Text,
  TextInput,
  Pressable,
  StyleSheet,
  Modal,
  KeyboardAvoidingView,
} from 'react-native';

const App = () => {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <View
      style={styles.outerContainer}
      onLayout={layoutEvent => {
        console.log('Outer container layout:', layoutEvent.nativeEvent.layout);
      }}>
      <Modal
        animationType="fade"
        visible={modalOpen}
        onLayout={layoutEvent => {
          console.log('modal layout:', layoutEvent.nativeEvent.layout);
        }}>
        <KeyboardAvoidingView behavior="height" style={styles.container}>
          <View style={[styles.closeView, {marginHorizontal: 25}]}>
            <Pressable
              onPress={() => setModalOpen(false)}
              style={styles.closeButton}>
              <Text>Close</Text>
            </Pressable>
          </View>
          <TextInput placeholder="TextInput" style={styles.textInput} />
        </KeyboardAvoidingView>
      </Modal>

      <Pressable onPress={() => setModalOpen(true)} style={styles.launchButton}>
        <Text>Open Example</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  outerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'cyan',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
    paddingTop: 20,
    backgroundColor: 'red',
    alignItems: 'center',
  },
  textInput: {
    borderRadius: 5,
    borderWidth: 1,
    height: 44,
    width: 300,
    paddingHorizontal: 10,
  },
  closeView: {
    alignSelf: 'stretch',
  },
  closeButton: {
    alignSelf: 'flex-end',
  },
  launchButton: {
    padding: 10,
    backgroundColor: '#eee',
    borderRadius: 5,
  },
});

export default App;
```



## Checklist
- [x] Does not involve incompatible changes; if involved, has been reviewed accordingly.
- [x] Does not impact performance, or performance testing has been conducted without degradation.
- [x] Complies with the relevant coding standards.
- [x] Does not involve documentation updates, or the documentation has been updated.
- [x] Meets testability requirements with necessary self-test cases, appropriate logging, or trace information added.
- [x] No illegal file inclusions exist, such as images or code.


See merge request: openharmony-sig/ohos_react_native!1184

Author: SosenWiosen

OAT.xml

@@ -50,6 +50,16 @@
                     desc="hvigor plugin for autolinking, code generation, etc." />
                 <filteritem type="filename" name="*.jpg|*.png|*.ttf" desc="desc files" />
             </filefilter>
+            <filefilter name="copyrightPolicyFilter" desc="">
+                <filteritem 
+                    type="filepath"
+                    name="packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/ComponentDescriptors/ModalHostViewComponentDescriptor.h"
+                    desc="Upstream code with modifications using the original license header" />
+                <filteritem 
+                    type="filepath"
+                    name="packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/ComponentDescriptors/ModalHostViewComponentDescriptorProvider.h"
+                    desc="Upstream code with modifications using the original license header" />
+            </filefilter>
         </filefilterlist>
     </oatconfig>
 </configuration>

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOH/RNInstance.h

@@ -21,6 +21,7 @@
 #include <react/renderer/animations/LayoutAnimationDriver.h>
 #include <react/renderer/scheduler/Scheduler.h>
 
+#include "RNOH/DisplayMetricsManager.h"
 #include "RNOH/MutationsToNapiConverter.h"
 #include "RNOH/TouchTarget.h"
 #include "RNOH/TurboModule.h"
@@ -54,6 +55,7 @@ class Surface {
   using Weak = std::weak_ptr<Surface>;
 
   virtual LayoutContext getLayoutContext() = 0;
+  virtual DisplayMetrics getDisplayMetrics() = 0;
   virtual std::weak_ptr<UIInputEventHandler> getUIInputEventHandler() = 0;
 };
 

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOH/RNInstanceCAPI.cpp

@@ -120,6 +120,7 @@ void RNInstanceCAPI::createSurface(
           m_componentInstanceRegistry,
           m_componentInstanceFactory,
           m_arkTSMessageHub,
+          m_arkTSBridge,
           surfaceId,
           m_id,
           moduleName));

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOH/RNInstanceInternal.cpp

@@ -90,6 +90,8 @@ void RNInstanceInternal::start() {
   m_runtimeScheduler = m_reactInstance->getRuntimeScheduler();
   m_contextContainer->insert<std::weak_ptr<react::RuntimeScheduler>>(
       "RuntimeScheduler", m_runtimeScheduler);
+  m_contextContainer->insert<std::weak_ptr<RNInstance>>(
+      "RNOH::RNInstance", weak_from_this());
 
   m_turboModuleProvider = createTurboModuleProvider();
   initializeScheduler(m_turboModuleProvider);

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOH/arkui/ArkUISurface.cpp

@@ -85,13 +85,15 @@ ArkUISurface::ArkUISurface(
     ComponentInstanceRegistry::Shared componentInstanceRegistry,
     ComponentInstanceFactory::Shared const& componentInstanceFactory,
     ArkTSMessageHub::Shared arkTSMessageHub,
+    DisplayMetricsManager::Shared displayMetricsManager,
     SurfaceId surfaceId,
     int rnInstanceId,
     std::string const& appKey)
     : m_surfaceId(surfaceId),
       m_scheduler(std::move(scheduler)),
       m_componentInstanceRegistry(std::move(componentInstanceRegistry)),
-      m_surfaceHandler(SurfaceHandler(appKey, surfaceId)) {
+      m_surfaceHandler(SurfaceHandler(appKey, surfaceId)),
+      m_displayMetricsManager(std::move(displayMetricsManager)) {
   m_scheduler->registerSurface(m_surfaceHandler);
   m_taskExecutor = taskExecutor;
   m_rootView = componentInstanceFactory->create(
@@ -283,6 +285,15 @@ Surface::LayoutContext ArkUISurface::getLayoutContext() {
   return Surface::LayoutContext::from(m_surfaceHandler.getLayoutContext());
 }
 
+DisplayMetrics ArkUISurface::getDisplayMetrics() {
+  DisplayMetrics result;
+
+  m_taskExecutor->runSyncTask(TaskThread::MAIN, [this, &result] {
+    result = m_displayMetricsManager->getDisplayMetrics();
+  });
+  return result;
+}
+
 std::weak_ptr<UIInputEventHandler> ArkUISurface::getUIInputEventHandler() {
   return m_touchEventHandler;
 };

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOH/arkui/ArkUISurface.h

@@ -36,6 +36,7 @@ class ArkUISurface : public Surface,
       ComponentInstanceRegistry::Shared componentInstanceRegistry,
       ComponentInstanceFactory::Shared const& componentInstanceFactory,
       ArkTSMessageHub::Shared arkTSMessageHub,
+      DisplayMetricsManager::Shared displayMetricsManager,
       facebook::react::SurfaceId surfaceId,
       int rnInstanceId,
       std::string const& appKey);
@@ -86,6 +87,7 @@ class ArkUISurface : public Surface,
   void stop(std::function<void()> onStop);
   void setDisplayMode(facebook::react::DisplayMode displayMode);
   Surface::LayoutContext getLayoutContext() override;
+  DisplayMetrics getDisplayMetrics() override;
   std::weak_ptr<UIInputEventHandler> getUIInputEventHandler() override;
 
  private:
@@ -98,6 +100,7 @@ class ArkUISurface : public Surface,
   ThreadGuard m_threadGuard{};
   std::shared_ptr<UIInputEventHandler> m_touchEventHandler;
   TaskExecutor::Shared m_taskExecutor;
+  DisplayMetricsManager::Shared m_displayMetricsManager;
 };
 
 } // namespace rnoh

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/ComponentDescriptors/ModalHostViewComponentDescriptor.cpp

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ModalHostViewComponentDescriptor.h"
+#include <react/renderer/components/modal/ModalHostViewShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNOH/RNInstance.h"
+
+namespace rnoh {
+
+facebook::react::State::Shared
+ModalHostViewComponentDescriptor::createInitialState(
+    const facebook::react::Props::Shared& props,
+    const facebook::react::ShadowNodeFamily::Shared& family) const {
+  facebook::react::Size screenSize = {0, 0};
+  auto instance = contextContainer_->at<std::weak_ptr<rnoh::RNInstance>>(
+      "RNOH::RNInstance");
+
+  auto maybeSurface =
+      instance.lock()->getSurfaceByRootTag(family->getSurfaceId());
+  if (maybeSurface.has_value()) {
+    auto surface = maybeSurface.value().lock();
+    if (surface) {
+      auto displayMetrics = surface->getDisplayMetrics();
+      screenSize.height = displayMetrics.windowPhysicalPixels.height /
+          displayMetrics.windowPhysicalPixels.scale;
+      screenSize.width = displayMetrics.windowPhysicalPixels.width /
+          displayMetrics.windowPhysicalPixels.scale;
+    }
+  }
+  auto data =
+      std::make_shared<const facebook::react::ModalHostViewState>(screenSize);
+
+  return std::make_shared<
+      facebook::react::ModalHostViewShadowNode::ConcreteState>(data, family);
+}
+
+} // namespace rnoh

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/ComponentDescriptors/ModalHostViewComponentDescriptor.h

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/components/modal/ModalHostViewShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNOH/RNInstance.h"
+
+namespace rnoh {
+
+/*
+ * RNOH uses a custom ModalHostViewComponentDescriptor so that we can set the
+ * initial state to the actual size of the screen and not the default {0,0}.
+ * This fixes a bug in KeyboardAvoidingView which relies on the height value
+ * from the initial onLayout.
+ */
+
+class ModalHostViewComponentDescriptor final
+    : public facebook::react::ConcreteComponentDescriptor<
+          facebook::react::ModalHostViewShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(facebook::react::ShadowNode& shadowNode) const override {
+    auto& layoutableShadowNode =
+        static_cast<facebook::react::YogaLayoutableShadowNode&>(shadowNode);
+    auto& stateData =
+        static_cast<
+            const facebook::react::ModalHostViewShadowNode::ConcreteState&>(
+            *shadowNode.getState())
+            .getData();
+
+    layoutableShadowNode.setSize(facebook::react::Size{
+        stateData.screenSize.width, stateData.screenSize.height});
+    layoutableShadowNode.setPositionType(YGPositionTypeAbsolute);
+
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+
+  facebook::react::State::Shared createInitialState(
+      const facebook::react::Props::Shared& props,
+      const facebook::react::ShadowNodeFamily::Shared& family) const override;
+};
+
+} // namespace rnoh

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/ComponentDescriptors/ModalHostViewComponentDescriptorProvider.h

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/componentregistry/ComponentDescriptorProvider.h>
+#include "ModalHostViewComponentDescriptor.h"
+
+namespace rnoh {
+facebook::react::ComponentDescriptor::Unique
+createModalHostViewComponentDescriptor(
+    const facebook::react::ComponentDescriptorParameters& parameters) {
+  return std::make_unique<const rnoh::ModalHostViewComponentDescriptor>(
+      parameters);
+}
+facebook::react::ComponentDescriptorProvider
+createModalHostViewComponentDescriptorProvider() {
+  return facebook::react::ComponentDescriptorProvider{
+      facebook::react::ModalHostViewShadowNode::Handle(),
+      facebook::react::ModalHostViewShadowNode::Name(),
+      nullptr,
+      &createModalHostViewComponentDescriptor,
+  };
+}
+} // namespace rnoh

packages/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/RNOHCorePackage.h

@@ -26,6 +26,7 @@
 #include "RNOHCorePackage/ComponentBinders/TextComponentJSIBinder.h"
 #include "RNOHCorePackage/ComponentBinders/TextInputComponentJSIBinder.h"
 #include "RNOHCorePackage/ComponentBinders/ViewComponentJSIBinder.h"
+#include "RNOHCorePackage/ComponentDescriptors/ModalHostViewComponentDescriptorProvider.h"
 #include "RNOHCorePackage/ComponentInstances/ActivityIndicatorComponentInstance.h"
 #include "RNOHCorePackage/ComponentInstances/ImageComponentInstance.h"
 #include "RNOHCorePackage/ComponentInstances/ModalHostViewComponentInstance.h"
@@ -203,8 +204,7 @@ class RNOHCorePackage : public Package {
             facebook::react::ScrollViewComponentDescriptor>(),
         facebook::react::concreteComponentDescriptorProvider<
             facebook::react::PullToRefreshViewComponentDescriptor>(),
-        facebook::react::concreteComponentDescriptorProvider<
-            facebook::react::ModalHostViewComponentDescriptor>(),
+        createModalHostViewComponentDescriptorProvider(),
         facebook::react::concreteComponentDescriptorProvider<
             facebook::react::SwitchComponentDescriptor>(),
         facebook::react::concreteComponentDescriptorProvider<