RN: Further Optimize createAnimatedComponent

packages/react-native/Libraries/Animated/createAnimatedComponent.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import composeStyles from '../../src/private/core/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import useAnimatedProps from './useAnimatedProps';
@@ -45,17 +46,18 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
       // without these passthrough values.
       // $FlowFixMe[prop-missing]
       const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-      const {style: passthroughStyle, ...passthroughProps} =
-        passthroughAnimatedPropExplicitValues ?? {};
+      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
       const mergedStyle = useMemo(
-        () => ({...style, ...passthroughStyle}),
-        [style, passthroughStyle],
+        () => composeStyles(style, passthroughStyle),
+        [passthroughStyle, style],
       );
 
+      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+      // spread after `reducedProps` but before `style`.
       return (
         <Component
           {...reducedProps}
-          {...passthroughProps}
+          {...passthroughAnimatedPropExplicitValues}
           style={mergedStyle}
           ref={ref}
         />

packages/react-native/Libraries/StyleSheet/StyleSheet.js

@@ -23,6 +23,8 @@ import type {
   ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
 
+import composeStyles from '../../src/private/core/composeStyles';
+
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const flatten = require('./flattenStyle');
@@ -268,16 +270,7 @@ module.exports = {
    * array, saving allocations and maintaining reference equality for
    * PureComponent checks.
    */
-  compose<T: DangerouslyImpreciseStyleProp>(
-    style1: ?T,
-    style2: ?T,
-  ): ?T | $ReadOnlyArray<T> {
-    if (style1 != null && style2 != null) {
-      return ([style1, style2]: $ReadOnlyArray<T>);
-    } else {
-      return style1 != null ? style1 : style2;
-    }
-  },
+  compose: composeStyles,
 
   /**
    * Flattens an array of style objects, into one aggregated style object.

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -7502,10 +7502,7 @@ declare module.exports: {
   hairlineWidth: hairlineWidth,
   absoluteFill: any,
   absoluteFillObject: absoluteFill,
-  compose<T: DangerouslyImpreciseStyleProp>(
-    style1: ?T,
-    style2: ?T
-  ): ?T | $ReadOnlyArray<T>,
+  compose: composeStyles,
   flatten: flatten,
   setStyleAttributePreprocessor(
     property: string,

packages/react-native/src/private/core/composeStyles.js

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+/**
+ * Combines two styles such that `style2` will override any styles in `style1`.
+ * If either style is null or undefined, the other one is returned without
+ * allocating an array, saving allocations and enabling memoization.
+ */
+export default function composeStyles<T1, T2>(
+  style1: ?T1,
+  style2: ?T2,
+): ?(T1 | T2 | $ReadOnlyArray<T1 | T2>) {
+  if (style1 == null) {
+    return style2;
+  }
+  if (style2 == null) {
+    return style1;
+  }
+  return [style1, style2];
+}