Remove non-layout style and prop updates path via synchronouslyUpdatePropsOnUIThread (#7014)

Currently, there are two ways to update native view props and styles in
Reanimated. The default path (so-called slow path) is to apply all props
changes to the ShadowTree via C++ API and let React Native mount the
changes. However, if all props updated in given batch are non-layout
props (i.e. those that don't require layout recalculation, like
background color or opacity) we use a fast path that calls
`synchronouslyUpdatePropsOnUIThread` from React Native and applies the
changes directly to platform views, without making changes to ShadowTree
in C++. Turns out, some features like view measurement or touch
detection system use C++ ShadowTree which is not consistent with what's
currently on the screen. Because of that, we're removing the fast path
(turns out it's not that fast, especially on iOS) to restore the
correctness of view measurement and touch detection for animated
components.

* Performance monitor example → Bokeh Example
* Android emulator / iPhone 14 Pro real device
* Debug mode
* Animating `transform` prop using `useAnimatedStyle`

| Platform | Before (main) | After (this PR) |
|:-:|:-:|:-:|
| Android (count=200) | 20 fps | 15 fps |
| iOS (count=500) | 22 fps | 22 fps |

<details>
<summary>App.tsx</summary>

```tsx
import React, { useState } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import Animated, {
  Easing,
  useAnimatedStyle,
  useReducedMotion,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

const dimensions = Dimensions.get('window');

function randBetween(min: number, max: number) {
  return min + Math.random() * (max - min);
}

function Circle() {
  const shouldReduceMotion = useReducedMotion();

  const [power] = useState(randBetween(0, 1));
  const [duration] = useState(randBetween(2000, 3000));

  const size = 100 + power * 250;
  const width = size;
  const height = size;
  const hue = randBetween(100, 200);
  const backgroundColor = `hsl(${hue},100%,50%)`;

  const opacity = 0.1 + (1 - power) * 0.1;
  const config = { duration, easing: Easing.linear };

  const left = useSharedValue(randBetween(0, dimensions.width) - size / 2);
  const top = useSharedValue(randBetween(0, dimensions.height) - size / 2);

  const update = () => {
    left.value = withTiming(left.value + randBetween(-100, 100), config);
    top.value = withTiming(top.value + randBetween(-100, 100), config);
  };

  React.useEffect(() => {
    update();
    if (shouldReduceMotion) {
      return;
    }
    const id = setInterval(update, duration);
    return () => clearInterval(id);
  });

  const animatedStyle = useAnimatedStyle(
    () => ({
      transform: [{ translateX: left.value }, { translateY: top.value }],
    }),
    []
  );

  return (
    <Animated.View
      style={[
        styles.circle,
        { width, height, backgroundColor, opacity },
        animatedStyle,
      ]}
    />
  );
}

interface BokehProps {
  count: number;
}

function Bokeh({ count }: BokehProps) {
  return (
    <>
      {[...Array(count)].map((_, i) => (
        <Circle key={i} />
      ))}
    </>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Bokeh count={200} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'black',
    overflow: 'hidden',
  },
  circle: {
    position: 'absolute',
    borderRadius: 999,
  },
});
```

</details>

* Fixes
#6832.
* Fixes
#6676.

Author: tomekzaw

Diff for: packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp

@@ -64,8 +64,6 @@ ReanimatedModuleProxy::ReanimatedModuleProxy(
       layoutAnimationsManager_(
           std::make_shared<LayoutAnimationsManager>(jsLogger_)),
 #ifdef RCT_NEW_ARCH_ENABLED
-      synchronouslyUpdateUIPropsFunction_(
-          platformDepMethodsHolder.synchronouslyUpdateUIPropsFunction),
       propsRegistry_(std::make_shared<PropsRegistry>()),
 #else
       obtainPropFunction_(platformDepMethodsHolder.obtainPropFunction),
@@ -489,7 +487,6 @@ jsi::Value ReanimatedModuleProxy::configureProps(
   auto nativePropsArray = nativeProps.asObject(rt).asArray(rt);
   for (size_t i = 0; i < nativePropsArray.size(rt); ++i) {
     auto name = nativePropsArray.getValueAtIndex(rt, i).asString(rt).utf8(rt);
-    nativePropNames_.insert(name);
     animatablePropNames_.insert(name);
   }
 #else
@@ -600,22 +597,6 @@ void ReanimatedModuleProxy::cleanupSensors() {
 }
 
 #ifdef RCT_NEW_ARCH_ENABLED
-bool ReanimatedModuleProxy::isThereAnyLayoutProp(
-    jsi::Runtime &rt,
-    const jsi::Object &props) {
-  const jsi::Array propNames = props.getPropertyNames(rt);
-  for (size_t i = 0; i < propNames.size(rt); ++i) {
-    const std::string propName =
-        propNames.getValueAtIndex(rt, i).asString(rt).utf8(rt);
-    bool isLayoutProp =
-        nativePropNames_.find(propName) != nativePropNames_.end();
-    if (isLayoutProp) {
-      return true;
-    }
-  }
-  return false;
-}
-
 jsi::Value ReanimatedModuleProxy::filterNonAnimatableProps(
     jsi::Runtime &rt,
     const jsi::Value &props) {
@@ -760,25 +741,6 @@ void ReanimatedModuleProxy::performOperations() {
     jsPropsUpdater.call(rt, viewTag, nonAnimatableProps);
   }
 
-  bool hasLayoutUpdates = false;
-
-  for (const auto &[shadowNode, props] : copiedOperationsQueue) {
-    if (isThereAnyLayoutProp(rt, props->asObject(rt))) {
-      hasLayoutUpdates = true;
-      break;
-    }
-  }
-
-  if (!hasLayoutUpdates) {
-    // If there's no layout props to be updated, we can apply the updates
-    // directly onto the components and skip the commit.
-    for (const auto &[shadowNode, props] : copiedOperationsQueue) {
-      Tag tag = shadowNode->getTag();
-      synchronouslyUpdateUIPropsFunction_(rt, tag, props->asObject(rt));
-    }
-    return;
-  }
-
   if (propsRegistry_->shouldReanimatedSkipCommit()) {
     // It may happen that `performOperations` is called on the UI thread
     // while React Native tries to commit a new tree on the JS thread.

Diff for: packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.h

@@ -191,7 +191,6 @@ class ReanimatedModuleProxy
   void requestAnimationFrame(jsi::Runtime &rt, const jsi::Value &callback);
 
 #ifdef RCT_NEW_ARCH_ENABLED
-  bool isThereAnyLayoutProp(jsi::Runtime &rt, const jsi::Object &props);
   jsi::Value filterNonAnimatableProps(
       jsi::Runtime &rt,
       const jsi::Value &props);
@@ -213,9 +212,6 @@ class ReanimatedModuleProxy
   std::shared_ptr<LayoutAnimationsManager> layoutAnimationsManager_;
 
 #ifdef RCT_NEW_ARCH_ENABLED
-  const SynchronouslyUpdateUIPropsFunction synchronouslyUpdateUIPropsFunction_;
-
-  std::unordered_set<std::string> nativePropNames_; // filled by configureProps
   std::unordered_set<std::string>
       animatablePropNames_; // filled by configureProps
   std::shared_ptr<UIManager> uiManager_;

Diff for: packages/react-native-reanimated/Common/cpp/reanimated/Tools/PlatformDepMethodsHolder.h

@@ -20,8 +20,6 @@ namespace reanimated {
 
 #ifdef RCT_NEW_ARCH_ENABLED
 
-using SynchronouslyUpdateUIPropsFunction =
-    std::function<void(jsi::Runtime &rt, Tag tag, const jsi::Object &props)>;
 using UpdatePropsFunction =
     std::function<void(jsi::Runtime &rt, const jsi::Value &operations)>;
 using RemoveFromPropsRegistryFunction =
@@ -79,7 +77,7 @@ using MaybeFlushUIUpdatesQueueFunction = std::function<void()>;
 struct PlatformDepMethodsHolder {
   RequestRenderFunction requestRender;
 #ifdef RCT_NEW_ARCH_ENABLED
-  SynchronouslyUpdateUIPropsFunction synchronouslyUpdateUIPropsFunction;
+  // nothing
 #else
   UpdatePropsFunction updatePropsFunction;
   ScrollToFunction scrollToFunction;

Diff for: packages/react-native-reanimated/android/src/fabric/java/com/swmansion/reanimated/ReaCompatibility.java

@@ -26,8 +26,4 @@ public void unregisterFabricEventListener(NodesManager nodesManager) {
       fabricUIManager.getEventDispatcher().removeListener(nodesManager);
     }
   }
-
-  public void synchronouslyUpdateUIProps(int viewTag, ReadableMap uiProps) {
-    fabricUIManager.synchronouslyUpdateViewOnUIThread(viewTag, uiProps);
-  }
 }

Diff for: packages/react-native-reanimated/android/src/main/cpp/reanimated/android/NativeProxy.cpp

@@ -318,26 +318,6 @@ std::vector<std::pair<std::string, double>> NativeProxy::measure(int viewTag) {
 }
 #endif // RCT_NEW_ARCH_ENABLED
 
-#ifdef RCT_NEW_ARCH_ENABLED
-inline jni::local_ref<ReadableMap::javaobject> castReadableMap(
-    jni::local_ref<ReadableNativeMap::javaobject> const &nativeMap) {
-  return make_local(reinterpret_cast<ReadableMap::javaobject>(nativeMap.get()));
-}
-
-void NativeProxy::synchronouslyUpdateUIProps(
-    jsi::Runtime &rt,
-    Tag tag,
-    const jsi::Object &props) {
-  static const auto method =
-      getJniMethod<void(int, jni::local_ref<ReadableMap::javaobject>)>(
-          "synchronouslyUpdateUIProps");
-  jni::local_ref<ReadableMap::javaobject> uiProps =
-      castReadableMap(ReadableNativeMap::newObjectCxxArgs(
-          jsi::dynamicFromValue(rt, jsi::Value(rt, props))));
-  method(javaPart_.get(), tag, uiProps);
-}
-#endif
-
 int NativeProxy::registerSensor(
     int sensorType,
     int interval,
@@ -456,8 +436,7 @@ PlatformDepMethodsHolder NativeProxy::getPlatformDependentMethods() {
   auto requestRender = bindThis(&NativeProxy::requestRender);
 
 #ifdef RCT_NEW_ARCH_ENABLED
-  auto synchronouslyUpdateUIPropsFunction =
-      bindThis(&NativeProxy::synchronouslyUpdateUIProps);
+  // nothing
 #else
   auto configurePropsFunction = bindThis(&NativeProxy::configureProps);
 #endif
@@ -491,7 +470,7 @@ PlatformDepMethodsHolder NativeProxy::getPlatformDependentMethods() {
   return {
       requestRender,
 #ifdef RCT_NEW_ARCH_ENABLED
-      synchronouslyUpdateUIPropsFunction,
+  // nothing
 #else
       updatePropsFunction,
       scrollToFunction,

Diff for: packages/react-native-reanimated/android/src/main/cpp/reanimated/android/NativeProxy.h

@@ -181,12 +181,6 @@ class NativeProxy : public jni::HybridClass<NativeProxy>,
   // std::shared_ptr<EventListener> eventListener_;
 #endif // RCT_NEW_ARCH_ENABLED
   void installJSIBindings();
-#ifdef RCT_NEW_ARCH_ENABLED
-  void synchronouslyUpdateUIProps(
-      jsi::Runtime &rt,
-      Tag viewTag,
-      const jsi::Object &props);
-#endif
   PlatformDepMethodsHolder getPlatformDependentMethods();
   void setupLayoutAnimations();
 

Diff for: packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NodesManager.java

@@ -440,10 +440,6 @@ public void updateProps(int viewTag, Map<String, Object> props) {
     }
   }
 
-  public void synchronouslyUpdateUIProps(int viewTag, ReadableMap uiProps) {
-    compatibility.synchronouslyUpdateUIProps(viewTag, uiProps);
-  }
-
   public String obtainProp(int viewTag, String propName) {
     View view;
     try {

Diff for: packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/nativeProxy/NativeProxyCommon.java

@@ -129,11 +129,6 @@ public void updateProps(int viewTag, Map<String, Object> props) {
     mNodesManager.updateProps(viewTag, props);
   }
 
-  @DoNotStrip
-  public void synchronouslyUpdateUIProps(int viewTag, ReadableMap uiProps) {
-    mNodesManager.synchronouslyUpdateUIProps(viewTag, uiProps);
-  }
-
   @DoNotStrip
   public String obtainProp(int viewTag, String propName) {
     return mNodesManager.obtainProp(viewTag, propName);

Diff for: packages/react-native-reanimated/android/src/paper/java/com/swmansion/reanimated/ReaCompatibility.java

@@ -9,6 +9,4 @@ public ReaCompatibility(ReactApplicationContext reactApplicationContext) {}
   public void registerFabricEventListener(NodesManager nodesManager) {}
 
   public void unregisterFabricEventListener(NodesManager nodesManager) {}
-
-  public void synchronouslyUpdateUIProps(int viewTag, ReadableMap uiProps) {}
 }

Diff for: packages/react-native-reanimated/apple/reanimated/apple/REANodesManager.h

@@ -43,7 +43,6 @@ typedef void (^REAPerformOperations)();
 
 #ifdef RCT_NEW_ARCH_ENABLED
 - (void)registerPerformOperations:(REAPerformOperations)performOperations;
-- (void)synchronouslyUpdateViewOnUIThread:(nonnull NSNumber *)viewTag props:(nonnull NSDictionary *)uiProps;
 #else
 - (void)configureUiProps:(nonnull NSSet<NSString *> *)uiPropsSet
           andNativeProps:(nonnull NSSet<NSString *> *)nativePropsSet;

Diff for: packages/react-native-reanimated/apple/reanimated/apple/REANodesManager.mm

@@ -161,7 +161,6 @@ @implementation REANodesManager {
 #ifdef RCT_NEW_ARCH_ENABLED
   __weak RCTBridge *_bridge;
   REAPerformOperations _performOperations;
-  __weak id<RCTSurfacePresenterStub> _surfacePresenter;
   NSMutableDictionary<NSNumber *, NSMutableDictionary *> *_operationsInBatch;
 #else
   NSMutableArray<REANativeAnimationOp> *_operationsInBatch;
@@ -202,7 +201,6 @@ - (nonnull instancetype)initWithModule:(REAModule *)reanimatedModule
 {
   if ((self = [super init])) {
     _bridge = bridge;
-    _surfacePresenter = surfacePresenter;
     _reanimatedModule = reanimatedModule;
     _wantRunUpdates = NO;
     _onAnimationCallbacks = [NSMutableArray new];
@@ -416,24 +414,7 @@ - (BOOL)isNativeViewMounted:(NSNumber *)viewTag
 }
 
 #ifdef RCT_NEW_ARCH_ENABLED
-
-- (void)synchronouslyUpdateViewOnUIThread:(nonnull NSNumber *)viewTag props:(nonnull NSDictionary *)uiProps
-{
-  // adapted from RCTPropsAnimatedNode.m
-  RCTSurfacePresenter *surfacePresenter = _bridge.surfacePresenter ?: _surfacePresenter;
-  RCTComponentViewRegistry *componentViewRegistry = surfacePresenter.mountingManager.componentViewRegistry;
-  REAUIView<RCTComponentViewProtocol> *componentView =
-      [componentViewRegistry findComponentViewWithTag:[viewTag integerValue]];
-
-  NSSet<NSString *> *propKeysManagedByAnimated = [componentView propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN];
-  [surfacePresenter synchronouslyUpdateViewOnUIThread:viewTag props:uiProps];
-  [componentView setPropKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN:propKeysManagedByAnimated];
-
-  // `synchronouslyUpdateViewOnUIThread` does not flush props like `backgroundColor` etc.
-  // so that's why we need to call `finalizeUpdates` here.
-  [componentView finalizeUpdates:RNComponentViewUpdateMask{}];
-}
-
+// nothing
 #else
 
 - (void)updateProps:(nonnull NSDictionary *)props

Diff for: packages/react-native-reanimated/apple/reanimated/apple/native/PlatformDepMethodsHolderImpl.h

@@ -23,9 +23,6 @@ PlatformDepMethodsHolder makePlatformDepMethodsHolderBridgeless(
     REAModule *reaModule);
 SetGestureStateFunction makeSetGestureStateFunctionBridgeless(
     RCTModuleRegistry *moduleRegistry);
-
-SynchronouslyUpdateUIPropsFunction makeSynchronouslyUpdateUIPropsFunction(
-    REANodesManager *nodesManager);
 #else // RCT_NEW_ARCH_ENABLED
 UpdatePropsFunction makeUpdatePropsFunction(REAModule *reaModule);
 MeasureFunction makeMeasureFunction(RCTUIManager *uiManager);

Diff for: packages/react-native-reanimated/apple/reanimated/apple/native/PlatformDepMethodsHolderImpl.mm

@@ -101,18 +101,6 @@ RequestRenderFunction makeRequestRender(REANodesManager *nodesManager)
   return requestRender;
 }
 
-#ifdef RCT_NEW_ARCH_ENABLED
-SynchronouslyUpdateUIPropsFunction makeSynchronouslyUpdateUIPropsFunction(REANodesManager *nodesManager)
-{
-  auto synchronouslyUpdateUIPropsFunction = [nodesManager](jsi::Runtime &rt, Tag tag, const jsi::Object &props) {
-    NSNumber *viewTag = @(tag);
-    NSDictionary *uiProps = convertJSIObjectToNSDictionary(rt, props);
-    [nodesManager synchronouslyUpdateViewOnUIThread:viewTag props:uiProps];
-  };
-  return synchronouslyUpdateUIPropsFunction;
-}
-#endif // RCT_NEW_ARCH_ENABLED
-
 #ifdef RCT_NEW_ARCH_ENABLED
 // nothing
 #else // RCT_NEW_ARCH_ENABLED
@@ -290,10 +278,6 @@ KeyboardEventUnsubscribeFunction makeUnsubscribeFromKeyboardEventsFunction(REAKe
 {
   auto requestRender = makeRequestRender(nodesManager);
 
-#ifdef RCT_NEW_ARCH_ENABLED
-  auto synchronouslyUpdateUIPropsFunction = makeSynchronouslyUpdateUIPropsFunction(nodesManager);
-#endif // RCT_NEW_ARCH_ENABLED
-
 #ifdef RCT_NEW_ARCH_ENABLED
   // nothing
 #else
@@ -354,7 +338,7 @@ KeyboardEventUnsubscribeFunction makeUnsubscribeFromKeyboardEventsFunction(REAKe
   PlatformDepMethodsHolder platformDepMethodsHolder = {
       requestRender,
 #ifdef RCT_NEW_ARCH_ENABLED
-      synchronouslyUpdateUIPropsFunction,
+  // nothing
 #else
       updatePropsFunction,
       scrollToFunction,
@@ -384,8 +368,6 @@ PlatformDepMethodsHolder makePlatformDepMethodsHolderBridgeless(
 {
   auto requestRender = makeRequestRender(nodesManager);
 
-  auto synchronouslyUpdateUIPropsFunction = makeSynchronouslyUpdateUIPropsFunction(nodesManager);
-
   auto getAnimationTimestamp = makeGetAnimationTimestamp();
 
   auto progressLayoutAnimation = makeProgressLayoutAnimation(reaModule);
@@ -410,7 +392,6 @@ PlatformDepMethodsHolder makePlatformDepMethodsHolderBridgeless(
 
   PlatformDepMethodsHolder platformDepMethodsHolder = {
       requestRender,
-      synchronouslyUpdateUIPropsFunction,
       getAnimationTimestamp,
       progressLayoutAnimation,
       endLayoutAnimation,