Maker PoC of commit hook to detect orientation change

Author: kmichalikk

FabricExample/android/settings.gradle

@@ -4,3 +4,12 @@ extensions.configure(com.facebook.react.ReactSettingsExtension) { ex -> ex.autol
 rootProject.name = 'FabricExample'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+
+includeBuild('../node_modules/react-native') {
+     dependencySubstitution {
+         substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
+         substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
+         substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+         substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+     }
+}

FabricExample/ios/Podfile.lock

@@ -3006,7 +3006,7 @@ SPEC CHECKSUMS:
   ReactCommon: 9e5f2e80ecaeb6c70f21ae0db29caaff75dabe47
   RNGestureHandler: f1dd7f92a0faa2868a919ab53bb9d66eb4ebfcf5
   RNReanimated: aadd939e2bb8984700467ca876b422b0a07b75cb
-  RNScreens: 0bbf16c074ae6bb1058a7bf2d1ae017f4306797c
+  RNScreens: aacce18b7172667385e4e60c013306c18bcdce96
   RNWorklets: 564218881b4c63ab941bd5b3be37ae585a30a1c6
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: e80c5fabbc3e26311152fa20404cdfa14f16a11f

apps/App.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { enableFreeze } from 'react-native-screens';
 import Example from './Example';
-// import * as Test from './src/tests';
+import * as Test from './src/tests';
 
 enableFreeze(true);
 
 export default function App() {
-  return <Example />;
-  // return <Test.TestBottomTabs />;
+  // return <Example />;
+  return <Test.Test3295 />;
 }

apps/src/tests/Test3212/ScrollViewTemplate.tsx

@@ -6,7 +6,7 @@ export function ScrollViewTemplate() {
   return (
     <ScrollView>
       <Text style={{ fontSize: 21 }}>
-        {Array.from({ length: 1000 }).map(_ => emoji[Math.floor(Math.random() * emoji.length)])}
+        {Array.from({ length: 50000 }).map(_ => emoji[Math.floor(Math.random() * emoji.length)])}
       </Text>
     </ScrollView>
   );

apps/src/tests/Test3295.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { Dimensions, ScrollView, Text, View } from "react-native";
+
+function ScrollViewTemplate() {
+  const emoji = ['😎', '🍏', '👀', '🤖', '👾', '👨‍💻'];
+  console.log(`ScrollViewRender screen dimensions / width ${Dimensions.get('screen').width} / height ${Dimensions.get('screen').height}`);
+  console.log(`ScrollViewRender window dimensions / width ${Dimensions.get('window').width} / height ${Dimensions.get('window').height}`);
+
+  return (
+    <ScrollView>
+      <Text style={{ fontSize: 21 }}>
+        {Array.from({ length: 50000 }).map(_ => emoji[Math.floor(Math.random() * emoji.length)])}
+      </Text>
+    </ScrollView>
+  );
+}
+
+function Foo() {
+  return (
+    <View style={{ backgroundColor: 'red', flex: 1 }}></View>
+  )
+}
+
+export default function() {
+  const Stack = createNativeStackNavigator();
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{
+        autoHideHomeIndicator: true,
+      }}>
+        <Stack.Screen name="Test" component={ScrollViewTemplate}/>
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -153,6 +153,7 @@ export { default as Test3212 } from './Test3212';
 export { default as Test3236 } from './Test3236';
 export { default as Test3239 } from './Test3239';
 export { default as Test3265 } from './Test3265';
+export { default as Test3295 } from './Test3295';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';

common/cpp/react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h

@@ -6,8 +6,13 @@
 #include <react/debug/react_native_assert.h>
 #include <react/renderer/components/rnscreens/Props.h>
 #include <react/renderer/components/rnscreens/utils/RectUtil.h>
+#include <react/renderer/components/root/RootShadowNode.h>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/uimanager/UIManager.h>
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
+#include <memory>
 #include "RNSScreenShadowNode.h"
+#include "RNSScreenShadowNodeCommitHook.h"
 
 namespace facebook {
 namespace react {
@@ -16,9 +21,29 @@ using namespace rnscreens;
 
 class RNSScreenComponentDescriptor final
     : public ConcreteComponentDescriptor<RNSScreenShadowNode> {
+ private:
+#ifdef ANDROID
+  /*
+   * A commit hook that triggers on `shadowTreeWillCommit` event,
+   * and can read the properties of RootShadowNodes for determining screen
+   * orientation.
+   */
+  mutable std::shared_ptr<RNSScreenShadowNodeCommitHook> commitHook_;
+  /*
+   * The following flag is expected to be set by RNSScreenShadowNodeCommitHook,
+   * when it detects that screen orientation has changed
+   * by comparing width to height of old and new ShadowNode revision.
+   */
+  mutable bool orientationDidChange_ = false;
+#endif // Android specific
+
  public:
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
 
+  void setOrientationDidChange() {
+    orientationDidChange_ = true;
+  }
+
   void adopt(ShadowNode &shadowNode) const override {
     react_native_assert(dynamic_cast<RNSScreenShadowNode *>(&shadowNode));
     auto &screenShadowNode = static_cast<RNSScreenShadowNode &>(shadowNode);
@@ -34,7 +59,22 @@ class RNSScreenComponentDescriptor final
     auto stateData = state->getData();
 
 #ifdef ANDROID
-    if (stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
+    if (!commitHook_) {
+      // The hook couldn't be attached in constructor because UIManager was
+      // missing from ContextContainer. Instead, we do it here, on the first
+      // call to the function. We don't anticipate any orientation changes that
+      // we need to respond to prior to this.
+      commitHook_ = std::make_shared<RNSScreenShadowNodeCommitHook>(
+          contextContainer_, const_cast<RNSScreenComponentDescriptor *>(this));
+    }
+
+    if (orientationDidChange_) {
+      orientationDidChange_ = false;
+      screenShadowNode.getStateDataMutable().frameSize = {0, 0};
+      screenShadowNode.getStateDataMutable().contentOffset = {0, 0};
+      layoutableShadowNode.setSize({YGUndefined, YGUndefined});
+    } else if (
+        stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
       // When we receive dimensions from JVM side we can remove padding used for
       // correction, and we can stop applying height and offset corrections for
       // the frame.

common/cpp/react/renderer/components/rnscreens/RNSScreenShadowNode.h

@@ -38,11 +38,11 @@ class JSI_EXPORT RNSScreenShadowNode final : public ConcreteViewShadowNode<
 
   FrameCorrectionModes &getFrameCorrectionModes();
 
+  StateData &getStateDataMutable();
+
  private:
 #ifdef ANDROID
   void applyFrameCorrections();
-
-  StateData &getStateDataMutable();
 #endif // ANDROID
 };
 

common/cpp/react/renderer/components/rnscreens/RNSScreenShadowNodeCommitHook.cpp

@@ -0,0 +1,67 @@
+#include "RNSScreenShadowNodeCommitHook.h"
+#include <react/fabric/FabricUIManagerBinding.h>
+#include <react/fabric/JFabricUIManager.h>
+#include <react/renderer/scheduler/Scheduler.h>
+#include "RNSScreenComponentDescriptor.h"
+
+namespace facebook {
+namespace react {
+
+RNSScreenShadowNodeCommitHook::RNSScreenShadowNodeCommitHook(
+    std::shared_ptr<const ContextContainer> contextContainer,
+    RNSScreenComponentDescriptor *screenComponentDescriptor)
+    : contextContainer_(contextContainer),
+      screenComponentDescriptor_(screenComponentDescriptor) {
+  if (contextContainer_) {
+    auto fabricUIManager = contextContainer_->at<jni::alias_ref<
+        jni::detail::JTypeFor<JFabricUIManager, jni::JObject, void>::_javaobject
+            *>>("FabricUIManager");
+    auto uiManager =
+        fabricUIManager->getBinding()->getScheduler()->getUIManager();
+    uiManager->registerCommitHook(*this);
+  }
+}
+
+RNSScreenShadowNodeCommitHook::RNSScreenShadowNodeCommitHook(
+    const RNSScreenShadowNodeCommitHook &other) {
+  contextContainer_ = other.contextContainer_;
+  screenComponentDescriptor_ = other.screenComponentDescriptor_;
+}
+
+RNSScreenShadowNodeCommitHook::~RNSScreenShadowNodeCommitHook() noexcept {
+  if (contextContainer_) {
+    auto fabricUIManager = contextContainer_->at<jni::alias_ref<
+        jni::detail::JTypeFor<JFabricUIManager, jni::JObject, void>::_javaobject
+            *>>("FabricUIManager");
+    auto uiManager =
+        fabricUIManager->getBinding()->getScheduler()->getUIManager();
+    uiManager->unregisterCommitHook(*this);
+  }
+}
+
+RootShadowNode::Unshared RNSScreenShadowNodeCommitHook::shadowTreeWillCommit(
+    const facebook::react::ShadowTree &shadowTree,
+    const RootShadowNode::Shared &oldRootShadowNode,
+    const RootShadowNode::Unshared &newRootShadowNode,
+    const ShadowTreeCommitOptions &) noexcept {
+  __android_log_print(ANDROID_LOG_INFO, "LAYOUT", "shadowTreeWillCommit");
+
+  auto oldRootProps =
+      std::static_pointer_cast<const RootProps>(oldRootShadowNode->getProps());
+  auto newRootProps =
+      std::static_pointer_cast<const RootProps>(newRootShadowNode->getProps());
+
+  const bool wasHorizontal = isHorizontal_(oldRootProps);
+  const bool willBeHorizontal = isHorizontal_(newRootProps);
+
+  if ((wasHorizontal && !willBeHorizontal) ||
+      (!wasHorizontal && willBeHorizontal)) {
+    screenComponentDescriptor_->setOrientationDidChange();
+  }
+
+  return std::static_pointer_cast<RootShadowNode>(
+      newRootShadowNode->ShadowNode::clone(ShadowNodeFragment{}));
+}
+
+} // namespace react
+} // namespace facebook

common/cpp/react/renderer/components/rnscreens/RNSScreenShadowNodeCommitHook.h

@@ -0,0 +1,44 @@
+#pragma once
+
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
+
+namespace facebook {
+namespace react {
+
+class RNSScreenComponentDescriptor;
+
+class RNSScreenShadowNodeCommitHook : public UIManagerCommitHook {
+ public:
+  RNSScreenShadowNodeCommitHook(
+      std::shared_ptr<const ContextContainer>,
+      RNSScreenComponentDescriptor *);
+
+  RNSScreenShadowNodeCommitHook(const RNSScreenShadowNodeCommitHook &);
+
+  virtual ~RNSScreenShadowNodeCommitHook() noexcept override;
+
+  virtual void commitHookWasRegistered(const UIManager &) noexcept override {}
+
+  virtual void commitHookWasUnregistered(const UIManager &) noexcept override {}
+
+  virtual RootShadowNode::Unshared shadowTreeWillCommit(
+      const ShadowTree &shadowTree,
+      const RootShadowNode::Shared &oldRootShadowNode,
+      const RootShadowNode::Unshared &newRootShadowNode,
+      const ShadowTreeCommitOptions & /*commitOptions*/) noexcept override;
+
+ private:
+  std::shared_ptr<const ContextContainer> contextContainer_;
+  RNSScreenComponentDescriptor *screenComponentDescriptor_;
+
+  inline bool isHorizontal_(std::weak_ptr<const RootProps> props) {
+    const float width = props.lock().get()->layoutConstraints.maximumSize.width;
+    const float height =
+        props.lock().get()->layoutConstraints.maximumSize.height;
+
+    return width > height;
+  };
+};
+
+} // namespace react
+} // namespace facebook