@office-iss/react-native-win32 0.0.0-canary.264 → 0.0.0-canary.265

package/overrides.json

@@ -7,13 +7,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.76.0-nightly-20240909-143f1ad29",
+  "baseVersion": "0.77.0-nightly-20240921-1747f57c6",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "cc375839a102263f435205df68b79d3d74c4f20a"
+      "baseHash": "3fbaf9dcd4027fa382894d06f330d0c68ceff9fb"
     },
     {
       "type": "derived",
@@ -109,7 +109,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Components/TextInput/TextInput.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/TextInput/TextInput.js",
-      "baseHash": "494c1159a38de1b57d3889a4dabdc3708204ad4d"
+      "baseHash": "19224f9b870df6e0c82d8da36f1f7b22bdd6b596"
     },
     {
       "type": "patch",
@@ -337,7 +337,7 @@
       "type": "derived",
       "file": "src-win/Libraries/NativeComponent/BaseViewConfig.win32.js",
       "baseFile": "packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js",
-      "baseHash": "91e7e2aacf6c1559247dccad0c581fde64202bf3"
+      "baseHash": "0b4642542c2865c5cd3d542a82b295a1aca21c1a"
     },
     {
       "type": "copy",
@@ -438,7 +438,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Text/TextNativeComponent.win32.js",
       "baseFile": "packages/react-native/Libraries/Text/TextNativeComponent.js",
-      "baseHash": "642b6fc1c5b5802e3612f39c2ae0135b149a65f8",
+      "baseHash": "1b2e6301edc13f3a91e47b9befe8a47a12e6ad39",
       "issue": 7074
     },
     {
@@ -509,7 +509,7 @@
       "type": "patch",
       "file": "src-win/src/private/animated/NativeAnimatedHelper.win32.js",
       "baseFile": "packages/react-native/src/private/animated/NativeAnimatedHelper.js",
-      "baseHash": "c91921c31ad267817d7a38859005149473ca6da5",
+      "baseHash": "bc63f57b28f1e98755101f650a2c15b6aa263abf",
       "issue": 11041
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.264",
+  "version": "0.0.0-canary.265",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -30,17 +30,19 @@
     "@react-native-community/cli-platform-android": "14.0.0",
     "@react-native-community/cli-platform-ios": "14.0.0",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.76.0-nightly-20240909-143f1ad29",
-    "@react-native/codegen": "0.76.0-nightly-20240909-143f1ad29",
-    "@react-native/community-cli-plugin": "0.76.0-nightly-20240909-143f1ad29",
-    "@react-native/gradle-plugin": "0.76.0-nightly-20240909-143f1ad29",
-    "@react-native/js-polyfills": "0.76.0-nightly-20240909-143f1ad29",
-    "@react-native/normalize-colors": "0.76.0-nightly-20240909-143f1ad29",
-    "@react-native/virtualized-lists": "0.76.0-nightly-20240909-143f1ad29",
+    "@react-native/assets-registry": "0.77.0-nightly-20240921-1747f57c6",
+    "@react-native/codegen": "0.77.0-nightly-20240921-1747f57c6",
+    "@react-native/community-cli-plugin": "0.77.0-nightly-20240921-1747f57c6",
+    "@react-native/gradle-plugin": "0.77.0-nightly-20240921-1747f57c6",
+    "@react-native/js-polyfills": "0.77.0-nightly-20240921-1747f57c6",
+    "@react-native/normalize-colors": "0.77.0-nightly-20240921-1747f57c6",
+    "@react-native/virtualized-lists": "0.77.0-nightly-20240921-1747f57c6",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
     "art": "^0.10.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-syntax-hermes-parser": "^0.23.1",
     "base64-js": "^1.5.1",
     "chalk": "^4.0.0",
     "commander": "^12.0.0",
@@ -51,8 +53,8 @@
     "jest-environment-node": "^29.6.3",
     "jsc-android": "^250231.0.0",
     "memoize-one": "^5.0.0",
-    "metro-runtime": "^0.80.10",
-    "metro-source-map": "^0.80.10",
+    "metro-runtime": "^0.81.0-alpha.0",
+    "metro-source-map": "^0.81.0-alpha.0",
     "mkdirp": "^0.5.1",
     "nullthrows": "^1.1.1",
     "pretty-format": "^29.7.0",
@@ -74,9 +76,9 @@
     "@babel/eslint-parser": "^7.25.1",
     "@react-native/metro-config": "0.76.0-nightly-20240701-9f6cb21ed",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
-    "@rnw-scripts/eslint-config": "1.2.28",
-    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.32",
-    "@rnw-scripts/just-task": "2.3.45",
+    "@rnw-scripts/eslint-config": "1.2.29",
+    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.33",
+    "@rnw-scripts/just-task": "2.3.46",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnx-kit/jest-preset": "^0.1.17",
     "@types/node": "^18.0.0",
@@ -88,14 +90,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.76.0-nightly-20240909-143f1ad29",
-    "react-native-platform-override": "^1.9.47",
+    "react-native": "0.77.0-nightly-20240921-1747f57c6",
+    "react-native-platform-override": "^1.9.48",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.76.0-nightly-20240909-143f1ad29"
+    "react-native": "0.77.0-nightly-20240921-1747f57c6"
   },
   "beachball": {
     "defaultNpmTag": "canary",

package/src/private/animated/NativeAnimatedHelper.js

@@ -46,7 +46,7 @@ const isSingleOpBatching =
   Platform.OS === 'android' &&
   NativeAnimatedModule?.queueAndExecuteBatchedOperations != null &&
   ReactNativeFeatureFlags.animatedShouldUseSingleOp();
-let flushQueueTimeout = null;
+let flushQueueImmediate = null;
 
 const eventListenerGetValueCallbacks: {
   [number]: (value: number) => void,
@@ -142,9 +142,13 @@ const API = {
     queueOperations = true;
     if (
       ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush() &&
-      flushQueueTimeout
+      flushQueueImmediate
     ) {
-      clearTimeout(flushQueueTimeout);
+      if (ReactNativeFeatureFlags.enableAnimatedClearImmediateFix()) {
+        clearImmediate(flushQueueImmediate);
+      } else {
+        clearTimeout(flushQueueImmediate);
+      }
     }
   },
 
@@ -161,9 +165,9 @@ const API = {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
 
     if (ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush()) {
-      const prevTimeout = flushQueueTimeout;
-      clearImmediate(prevTimeout);
-      flushQueueTimeout = setImmediate(API.flushQueue);
+      const prevImmediate = flushQueueImmediate;
+      clearImmediate(prevImmediate);
+      flushQueueImmediate = setImmediate(API.flushQueue);
     } else {
       API.flushQueue();
     }
@@ -176,7 +180,7 @@ const API = {
           NativeAnimatedModule || process.env.NODE_ENV === 'test',
           'Native animated module is not available',
         );
-        flushQueueTimeout = null;
+        flushQueueImmediate = null;
 
         if (singleOpQueue.length === 0) {
           return;
@@ -198,7 +202,7 @@ const API = {
           NativeAnimatedModule || process.env.NODE_ENV === 'test',
           'Native animated module is not available',
         );
-        flushQueueTimeout = null;
+        flushQueueImmediate = null;
 
         if (queue.length === 0) {
           return;

package/src/private/animated/NativeAnimatedHelper.win32.js

@@ -46,7 +46,7 @@ const isSingleOpBatching =
   Platform.OS === 'android' &&
   NativeAnimatedModule?.queueAndExecuteBatchedOperations != null &&
   ReactNativeFeatureFlags.animatedShouldUseSingleOp();
-let flushQueueTimeout = null;
+let flushQueueImmediate = null;
 
 const eventListenerGetValueCallbacks: {
   [number]: (value: number) => void,
@@ -142,9 +142,13 @@ const API = {
     queueOperations = true;
     if (
       ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush() &&
-      flushQueueTimeout
+      flushQueueImmediate
     ) {
-      clearTimeout(flushQueueTimeout);
+      if (ReactNativeFeatureFlags.enableAnimatedClearImmediateFix()) {
+        clearImmediate(flushQueueImmediate);
+      } else {
+        clearTimeout(flushQueueImmediate);
+      }
     }
   },
 
@@ -161,9 +165,9 @@ const API = {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
 
     if (ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush()) {
-      const prevTimeout = flushQueueTimeout;
-      clearImmediate(prevTimeout);
-      flushQueueTimeout = setImmediate(API.flushQueue);
+      const prevImmediate = flushQueueImmediate;
+      clearImmediate(prevImmediate);
+      flushQueueImmediate = setImmediate(API.flushQueue);
     } else {
       API.flushQueue();
     }
@@ -178,7 +182,7 @@ const API = {
           'Native animated module is not available',
         );
         Windows] */
-        flushQueueTimeout = null;
+        flushQueueImmediate = null;
 
         if (singleOpQueue.length === 0) {
           return;
@@ -200,7 +204,7 @@ const API = {
           NativeAnimatedModule || process.env.NODE_ENV === 'test',
           'Native animated module is not available',
         );
-        flushQueueTimeout = null;
+        flushQueueImmediate = null;
 
         if (queue.length === 0) {
           return;

package/src/private/animated/useAnimatedPropsMemo.js

@@ -0,0 +1,349 @@
+/**
+ * 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-local
+ * @format
+ * @oncall react_native
+ */
+
+import type AnimatedProps from '../../../Libraries/Animated/nodes/AnimatedProps';
+import type {AnimatedPropsAllowlist} from '../../../Libraries/Animated/nodes/AnimatedProps';
+import type {AnimatedStyleAllowlist} from '../../../Libraries/Animated/nodes/AnimatedStyle';
+
+import {AnimatedEvent} from '../../../Libraries/Animated/AnimatedEvent';
+import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
+import {isPlainObject} from '../../../Libraries/Animated/nodes/AnimatedObject';
+import flattenStyle from '../../../Libraries/StyleSheet/flattenStyle';
+
+import nullthrows from 'nullthrows';
+import {useMemo, useState} from 'react';
+
+type CompositeKey = {
+  style?: {[string]: CompositeKeyComponent},
+  [string]:
+    | CompositeKeyComponent
+    | AnimatedEvent
+    | $ReadOnlyArray<mixed>
+    | $ReadOnly<{[string]: mixed}>,
+};
+
+type CompositeKeyComponent =
+  | AnimatedNode
+  | Array<CompositeKeyComponent | null>
+  | {[string]: CompositeKeyComponent};
+
+type $ReadOnlyCompositeKey = $ReadOnly<{
+  style?: $ReadOnly<{[string]: CompositeKeyComponent}>,
+  [string]:
+    | $ReadOnlyCompositeKeyComponent
+    | AnimatedEvent
+    | $ReadOnlyArray<mixed>
+    | $ReadOnly<{[string]: mixed}>,
+}>;
+
+type $ReadOnlyCompositeKeyComponent =
+  | AnimatedNode
+  | $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null>
+  | $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}>;
+
+/**
+ * A hook that returns an `AnimatedProps` object that is memoized based on the
+ * subset of `props` that are instances of `AnimatedNode` or `AnimatedEvent`.
+ */
+export function useAnimatedPropsMemo(
+  create: () => AnimatedProps,
+  // TODO: Make this two separate arguments after the experiment is over. This
+  // is only an array-like structure to make it easier to experiment with this
+  // and `useMemo`.
+  [allowlist, props]: [?AnimatedPropsAllowlist, {[string]: mixed}],
+): AnimatedProps {
+  const compositeKey = useMemo(
+    () => createCompositeKeyForProps(props, allowlist),
+    [allowlist, props],
+  );
+
+  const [state, setState] = useState<{
+    allowlist: ?AnimatedPropsAllowlist,
+    compositeKey: $ReadOnlyCompositeKey | null,
+    value: AnimatedProps,
+  }>(() => ({
+    allowlist,
+    compositeKey,
+    value: create(),
+  }));
+
+  if (
+    state.allowlist !== allowlist ||
+    !areCompositeKeysEqual(state.compositeKey, compositeKey)
+  ) {
+    setState({
+      allowlist,
+      compositeKey,
+      value: create(),
+    });
+  }
+  return state.value;
+}
+
+/**
+ * Creates a new composite key for a `props` object that can be used to detect
+ * whether a new `AnimatedProps` instance must be created.
+ *
+ * - With an allowlist, those props are searched for `AnimatedNode` instances.
+ * - Without an allowlist, `style` is searched for `AnimatedNode` instances,
+ *   but all other objects and arrays are included (not searched). We do not
+ *   search objects and arrays without an allowlist in case they are very large
+ *   data structures. We safely traverse `style` becuase it is bounded.
+ *
+ * Any `AnimatedEvent` instances at the first depth are always included.
+ *
+ * If `props` contains no `AnimatedNode` or `AnimatedEvent` instances, this
+ * returns null.
+ */
+export function createCompositeKeyForProps(
+  props: $ReadOnly<{[string]: mixed}>,
+  allowlist: ?AnimatedPropsAllowlist,
+): $ReadOnlyCompositeKey | null {
+  let compositeKey: CompositeKey | null = null;
+
+  const keys = Object.keys(props);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
+    const value = props[key];
+
+    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+      let compositeKeyComponent;
+      if (key === 'style') {
+        // $FlowFixMe[incompatible-call] - `style` is a valid argument.
+        // $FlowFixMe[incompatible-type] - `flattenStyle` returns an object.
+        const flatStyle: ?{[string]: mixed} = flattenStyle(value);
+        if (flatStyle != null) {
+          compositeKeyComponent = createCompositeKeyForObject(
+            flatStyle,
+            allowlist?.style,
+          );
+        }
+      } else if (
+        value instanceof AnimatedNode ||
+        value instanceof AnimatedEvent
+      ) {
+        compositeKeyComponent = value;
+      } else if (Array.isArray(value)) {
+        compositeKeyComponent =
+          allowlist == null ? value : createCompositeKeyForArray(value);
+      } else if (isPlainObject(value)) {
+        compositeKeyComponent =
+          allowlist == null ? value : createCompositeKeyForObject(value);
+      }
+      if (compositeKeyComponent != null) {
+        if (compositeKey == null) {
+          compositeKey = {} as CompositeKey;
+        }
+        compositeKey[key] = compositeKeyComponent;
+      }
+    }
+  }
+
+  return compositeKey;
+}
+
+/**
+ * Creates a new composite key for an array that retains all values that are or
+ * contain `AnimatedNode` instances, and `null` for the rest.
+ *
+ * If `array` contains no `AnimatedNode` instances, this returns null.
+ */
+function createCompositeKeyForArray(
+  array: $ReadOnlyArray<mixed>,
+): $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null> | null {
+  let compositeKey: Array<$ReadOnlyCompositeKeyComponent | null> | null = null;
+
+  for (let ii = 0, length = array.length; ii < length; ii++) {
+    const value = array[ii];
+
+    let compositeKeyComponent;
+    if (value instanceof AnimatedNode) {
+      compositeKeyComponent = value;
+    } else if (Array.isArray(value)) {
+      compositeKeyComponent = createCompositeKeyForArray(value);
+    } else if (isPlainObject(value)) {
+      compositeKeyComponent = createCompositeKeyForObject(value);
+    }
+    if (compositeKeyComponent != null) {
+      if (compositeKey == null) {
+        compositeKey = new Array<$ReadOnlyCompositeKeyComponent | null>(
+          array.length,
+        ).fill(null);
+      }
+      compositeKey[ii] = compositeKeyComponent;
+    }
+  }
+
+  return compositeKey;
+}
+
+/**
+ * Creates a new composite key for an object that retains only properties that
+ * are or contain `AnimatedNode` instances.
+ *
+ * When used to create composite keys for `style` props:
+ *
+ * - With an allowlist, those properties are searched.
+ * - Without an allowlist, every property is searched.
+ *
+ * If `object` contains no `AnimatedNode` instances, this returns null.
+ */
+function createCompositeKeyForObject(
+  object: $ReadOnly<{[string]: mixed}>,
+  allowlist?: ?AnimatedStyleAllowlist,
+): $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}> | null {
+  let compositeKey: {[string]: $ReadOnlyCompositeKeyComponent} | null = null;
+
+  const keys = Object.keys(object);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
+
+    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+      const value = object[key];
+
+      let compositeKeyComponent;
+      if (value instanceof AnimatedNode) {
+        compositeKeyComponent = value;
+      } else if (Array.isArray(value)) {
+        compositeKeyComponent = createCompositeKeyForArray(value);
+      } else if (isPlainObject(value)) {
+        compositeKeyComponent = createCompositeKeyForObject(value);
+      }
+      if (compositeKeyComponent != null) {
+        if (compositeKey == null) {
+          compositeKey = {} as {[string]: $ReadOnlyCompositeKeyComponent};
+        }
+        compositeKey[key] = compositeKeyComponent;
+      }
+    }
+  }
+
+  return compositeKey;
+}
+
+export function areCompositeKeysEqual(
+  maybePrev: $ReadOnlyCompositeKey | null,
+  maybeNext: $ReadOnlyCompositeKey | null,
+  allowlist: ?AnimatedPropsAllowlist,
+): boolean {
+  if (maybePrev === maybeNext) {
+    return true;
+  }
+  if (maybePrev === null || maybeNext === null) {
+    return false;
+  }
+  // Help Flow retain the type refinements of these.
+  const prev = maybePrev;
+  const next = maybeNext;
+
+  const keys = Object.keys(prev);
+  const length = keys.length;
+  if (length !== Object.keys(next).length) {
+    return false;
+  }
+  for (let ii = 0; ii < length; ii++) {
+    const key = keys[ii];
+    if (!Object.hasOwn(next, key)) {
+      return false;
+    }
+    const prevComponent = prev[key];
+    const nextComponent = next[key];
+
+    if (key === 'style') {
+      // We know style components are objects with non-mixed values.
+      if (
+        !areCompositeKeyComponentsEqual(
+          // $FlowIgnore[incompatible-cast]
+          prevComponent as $ReadOnlyCompositeKeyComponent,
+          // $FlowIgnore[incompatible-cast]
+          nextComponent as $ReadOnlyCompositeKeyComponent,
+        )
+      ) {
+        return false;
+      }
+    } else if (
+      prevComponent instanceof AnimatedNode ||
+      prevComponent instanceof AnimatedEvent
+    ) {
+      if (prevComponent !== nextComponent) {
+        return false;
+      }
+    } else {
+      // When `allowlist` is null, the components must be the same. Otherwise,
+      // we created the components using deep traversal, so deep compare them.
+      if (allowlist == null) {
+        if (prevComponent !== nextComponent) {
+          return false;
+        }
+      } else {
+        if (
+          !areCompositeKeyComponentsEqual(
+            // $FlowIgnore[incompatible-cast]
+            prevComponent as $ReadOnlyCompositeKeyComponent,
+            // $FlowIgnore[incompatible-cast]
+            nextComponent as $ReadOnlyCompositeKeyComponent,
+          )
+        ) {
+          return false;
+        }
+      }
+    }
+  }
+  return true;
+}
+
+function areCompositeKeyComponentsEqual(
+  prev: $ReadOnlyCompositeKeyComponent | null,
+  next: $ReadOnlyCompositeKeyComponent | null,
+): boolean {
+  if (prev === next) {
+    return true;
+  }
+  if (prev instanceof AnimatedNode) {
+    return prev === next;
+  }
+  if (Array.isArray(prev)) {
+    if (!Array.isArray(next)) {
+      return false;
+    }
+    const length = prev.length;
+    if (length !== next.length) {
+      return false;
+    }
+    for (let ii = 0; ii < length; ii++) {
+      if (!areCompositeKeyComponentsEqual(prev[ii], next[ii])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(prev)) {
+    if (!isPlainObject(next)) {
+      return false;
+    }
+    const keys = Object.keys(prev);
+    const length = keys.length;
+    if (length !== Object.keys(next).length) {
+      return false;
+    }
+    for (let ii = 0; ii < length; ii++) {
+      const key = keys[ii];
+      if (
+        !Object.hasOwn(nullthrows(next), key) ||
+        !areCompositeKeyComponentsEqual(prev[key], next[key])
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}

package/src/private/components/HScrollViewNativeComponents.js

@@ -21,33 +21,34 @@ import Platform from '../../../Libraries/Utilities/Platform';
 import AndroidHorizontalScrollContentViewNativeComponent from '../specs/components/AndroidHorizontalScrollContentViewNativeComponent';
 import useSyncOnScroll from './useSyncOnScroll';
 import * as React from 'react';
+import {forwardRef} from 'react';
 
 const HScrollViewNativeComponentForPlatform =
   Platform.OS === 'android'
     ? AndroidHorizontalScrollViewNativeComponent
     : ScrollViewNativeComponent;
 
+// TODO: After upgrading to React 19, remove `forwardRef` from this component.
 export const HScrollViewNativeComponent: React.AbstractComponent<
   ScrollViewNativeProps,
   TScrollViewNativeImperativeHandle,
   // $FlowExpectedError[incompatible-type] - Flow cannot model imperative handles, yet.
-> = function HScrollViewNativeComponent(props: {
-  ...ScrollViewNativeProps,
-  ref?: React.RefSetter<TScrollViewNativeImperativeHandle | null>,
-  ...
-}): React.Node {
-  const [ref, enableSyncOnScroll] = useSyncOnScroll(props.ref);
+> = forwardRef(function HScrollViewNativeComponent(
+  props: ScrollViewNativeProps,
+  ref: ?React.RefSetter<TScrollViewNativeImperativeHandle | null>,
+): React.Node {
+  const [componentRef, enableSyncOnScroll] = useSyncOnScroll(ref);
   // NOTE: When `useSyncOnScroll` triggers an update, `props` will not have
   // changed. Notably, `props.children` will be the same, allowing React to
   // bail out during reconciliation.
   return (
     <HScrollViewNativeComponentForPlatform
       {...props}
-      ref={ref}
+      ref={componentRef}
       enableSyncOnScroll={enableSyncOnScroll}
     />
   );
-};
+});
 
 export const HScrollContentViewNativeComponent: HostComponent<ViewProps> =
   Platform.OS === 'android'

package/src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE.js

@@ -12,16 +12,20 @@
 import type {ViewProps} from '../../../Libraries/Components/View/ViewPropTypes';
 import Platform from '../../../Libraries/Utilities/Platform';
 import View from '../../../Libraries/Components/View/View';
+import UIManager from '../../../Libraries/ReactNative/UIManager';
 import * as React from 'react';
-export * from '../../../src/private/specs/components/RCTSafeAreaViewNativeComponent';
-import RCTSafeAreaViewNativeComponent from '../../../src/private/specs/components/RCTSafeAreaViewNativeComponent';
 
-let exported: React.AbstractComponent<ViewProps, React.ElementRef<typeof View>>;
-
-if (Platform.OS === 'android' || Platform.OS === 'ios') {
-  exported = RCTSafeAreaViewNativeComponent;
-} else {
-  exported = View;
-}
+const exported: React.AbstractComponent<
+  ViewProps,
+  React.ElementRef<typeof View>,
+> = Platform.select({
+  ios: require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
+    .default,
+  android: UIManager.hasViewManagerConfig('RCTSafeAreaView')
+    ? require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
+        .default
+    : View,
+  default: View,
+});
 
 export default exported;