@office-iss/react-native-win32 0.0.0-canary.30 → 0.0.0-canary.300

package/src/private/animated/createAnimatedPropsHook.js

@@ -0,0 +1,318 @@
+/**
+ * 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
+ */
+
+import type {AnimatedPropsAllowlist} from '../../../Libraries/Animated/nodes/AnimatedProps';
+import type {EventSubscription} from '../../../Libraries/EventEmitter/NativeEventEmitter';
+
+import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
+import AnimatedProps from '../../../Libraries/Animated/nodes/AnimatedProps';
+import AnimatedValue from '../../../Libraries/Animated/nodes/AnimatedValue';
+import {isPublicInstance as isFabricPublicInstance} from '../../../Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import useRefEffect from '../../../Libraries/Utilities/useRefEffect';
+import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
+import {createAnimatedPropsMemoHook} from './createAnimatedPropsMemoHook';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useReducer,
+  useRef,
+} from 'react';
+
+type ReducedProps<TProps> = {
+  ...TProps,
+  collapsable: boolean,
+  ...
+};
+type CallbackRef<T> = T => mixed;
+
+export type AnimatedPropsHook = <TProps: {...}, TInstance>(
+  props: TProps,
+) => [ReducedProps<TProps>, CallbackRef<TInstance | null>];
+
+type UpdateCallback = () => void;
+
+type AnimatedValueListeners = Array<{
+  propValue: AnimatedValue,
+  listenerId: string,
+}>;
+
+export default function createAnimatedPropsHook(
+  allowlist: ?AnimatedPropsAllowlist,
+): AnimatedPropsHook {
+  const useAnimatedPropsMemo = createAnimatedPropsMemoHook(allowlist);
+
+  const useNativePropsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+
+  return function useAnimatedProps<TProps: {...}, TInstance>(
+    props: TProps,
+  ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+    const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
+    const onUpdateRef = useRef<UpdateCallback | null>(null);
+    const timerRef = useRef<TimeoutID | null>(null);
+
+    const node = useAnimatedPropsMemo(
+      () => new AnimatedProps(props, () => onUpdateRef.current?.(), allowlist),
+      props,
+    );
+
+    useEffect(() => {
+      // Animated queue flush is handled deterministically in setImmediate for the following feature flags:
+      // cxxNativeAnimatedEnabled
+      if (!NativeAnimatedHelper.shouldSignalBatch) {
+        // If multiple components call `flushQueue`, the first one will flush the
+        // queue and subsequent ones will do nothing.
+        NativeAnimatedHelper.API.flushQueue();
+      }
+      let drivenAnimationEndedListener: ?EventSubscription = null;
+      if (node.__isNative) {
+        drivenAnimationEndedListener =
+          NativeAnimatedHelper.nativeEventEmitter.addListener(
+            'onUserDrivenAnimationEnded',
+            data => {
+              node.update();
+            },
+          );
+      }
+
+      return () => {
+        drivenAnimationEndedListener?.remove();
+      };
+    });
+
+    useAnimatedPropsLifecycle(node);
+
+    // TODO: This "effect" does three things:
+    //
+    //   1) Call `setNativeView`.
+    //   2) Update `onUpdateRef`.
+    //   3) Update listeners for `AnimatedEvent` props.
+    //
+    // Ideally, each of these would be separate "effects" so that they are not
+    // unnecessarily re-run when irrelevant dependencies change. For example, we
+    // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+    // the `AnimatedEvent` props change or `instance` changes.
+    //
+    // But there is no way to transparently compose three separate callback refs,
+    // so we just combine them all into one for now.
+    const refEffect = useCallback(
+      (instance: TInstance) => {
+        // NOTE: This may be called more often than necessary (e.g. when `props`
+        // changes), but `setNativeView` already optimizes for that.
+        // $FlowFixMe[incompatible-call]
+        node.setNativeView(instance);
+
+        // NOTE: When using the JS animation driver, this callback is called on
+        // every animation frame. When using the native driver, this callback is
+        // called when the animation completes.
+        onUpdateRef.current = () => {
+          if (process.env.NODE_ENV === 'test') {
+            // Check 1: this is a test.
+            // call `scheduleUpdate` to bypass use of setNativeProps.
+            return scheduleUpdate();
+          }
+
+          const isFabricNode = isFabricInstance(instance);
+          if (node.__isNative) {
+            // Check 2: this is an animation driven by native.
+            // In native driven animations, this callback is only called once the animation completes.
+            if (
+              isFabricNode &&
+              !(
+                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
+              )
+            ) {
+              // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
+              // Must not be called in Paper.
+              scheduleUpdate();
+            }
+            return;
+          }
+
+          if (
+            typeof instance !== 'object' ||
+            typeof instance?.setNativeProps !== 'function'
+          ) {
+            // Check 3: the instance does not support setNativeProps. Call `scheduleUpdate`.
+            return scheduleUpdate();
+          }
+
+          if (!isFabricNode) {
+            // Check 4: this is a paper instance, call setNativeProps.
+            // $FlowIgnore[not-a-function] - Assume it's still a function.
+            // $FlowFixMe[incompatible-use]
+            return instance.setNativeProps(node.__getAnimatedValue());
+          }
+
+          if (!useNativePropsInFabric) {
+            // Check 5: setNativeProps are disabled.
+            return scheduleUpdate();
+          }
+
+          // This is a Fabric instance and setNativeProps is supported.
+
+          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          // $FlowFixMe[incompatible-use]
+          instance.setNativeProps(node.__getAnimatedValue());
+
+          // Keeping state of Fiber tree and Shadow tree in sync.
+          //
+          // This is done by calling `scheduleUpdate` which will trigger a commit.
+          // However, React commit is not fast enough to drive animations.
+          // This is where setNativeProps comes in handy but the state between
+          // Fiber tree and Shadow tree needs to be kept in sync.
+          // The goal is to call `scheduleUpdate` as little as possible to maintain
+          // performance but frequently enough to keep state in sync.
+          // Debounce is set to 48ms, which is 3 * the duration of a frame.
+          // 3 frames was the highest value where flickering state was not observed.
+          if (timerRef.current != null) {
+            clearTimeout(timerRef.current);
+          }
+          timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            scheduleUpdate();
+          }, 48);
+        };
+
+        const target = getEventTarget(instance);
+        const animatedValueListeners: AnimatedValueListeners = [];
+        const eventTuples = node.__getNativeAnimatedEventTuples();
+
+        for (const [propName, propValue] of eventTuples) {
+          propValue.__attach(target, propName);
+          // $FlowFixMe[incompatible-call] - the `addListenersToPropsValue` drills down the propValue.
+          addListenersToPropsValue(propValue, animatedValueListeners);
+        }
+
+        return () => {
+          onUpdateRef.current = null;
+
+          for (const [propName, propValue] of eventTuples) {
+            propValue.__detach(target, propName);
+          }
+
+          for (const {propValue, listenerId} of animatedValueListeners) {
+            propValue.removeListener(listenerId);
+          }
+        };
+      },
+      [node],
+    );
+    const callbackRef = useRefEffect<TInstance>(refEffect);
+
+    return [reduceAnimatedProps<TProps>(node, props), callbackRef];
+  };
+}
+
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+  props: TProps,
+): ReducedProps<TProps> {
+  // Force `collapsable` to be false so that the native view is not flattened.
+  // Flattened views cannot be accurately referenced by the native driver.
+  return {
+    ...node.__getValueWithStaticProps(props),
+    collapsable: false,
+  };
+}
+
+function addListenersToPropsValue(
+  propValue: AnimatedValue,
+  accumulator: AnimatedValueListeners,
+) {
+  // propValue can be a scalar value, an array or an object.
+  if (propValue instanceof AnimatedValue) {
+    const listenerId = propValue.addListener(() => {});
+    accumulator.push({propValue, listenerId});
+  } else if (Array.isArray(propValue)) {
+    // An array can be an array of scalar values, arrays of arrays, or arrays of objects
+    for (const prop of propValue) {
+      addListenersToPropsValue(prop, accumulator);
+    }
+  } else if (propValue instanceof Object) {
+    addAnimatedValuesListenersToProps(propValue, accumulator);
+  }
+}
+
+function addAnimatedValuesListenersToProps(
+  props: AnimatedNode,
+  accumulator: AnimatedValueListeners,
+) {
+  for (const propName in props) {
+    // $FlowFixMe[prop-missing] - This is an object contained in a prop, but we don't know the exact type.
+    const propValue = props[propName];
+    addListenersToPropsValue(propValue, accumulator);
+  }
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, `__detach` occurs in a microtask for these reasons:
+ *
+ *   1. Optimizes detaching and attaching `AnimatedNode` instances that rely on
+ *      reference counting to cleanup state, by causing detach to be scheduled
+ *      after any subsequent attach.
+ *   2. Avoids calling `detach` during the insertion effect phase (which
+ *      occurs during the commit phase), which may invoke completion callbacks.
+ *
+ * We should avoid invoking completion callbacks during the commit phase because
+ * callbacks may update state, which is unsupported and will force synchronous
+ * updates.
+ */
+function useAnimatedPropsLifecycle(node: AnimatedProps): void {
+  const isMounted = useRef<boolean>(false);
+
+  useInsertionEffect(() => {
+    isMounted.current = true;
+    node.__attach();
+
+    return () => {
+      isMounted.current = false;
+      queueMicrotask(() => {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        if (isMounted.current) {
+          // TODO: Stop restoring default values (unless `reset` is called).
+          node.__restoreDefaultValues();
+        }
+        node.__detach();
+      });
+    };
+  }, [node]);
+}
+
+function getEventTarget<TInstance>(instance: TInstance): TInstance {
+  return typeof instance === 'object' &&
+    typeof instance?.getScrollableNode === 'function'
+    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
+      instance.getScrollableNode()
+    : instance;
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function isFabricInstance(instance: any): boolean {
+  return (
+    isFabricPublicInstance(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
+    isFabricPublicInstance(
+      instance?.getScrollResponder?.()?.getNativeScrollRef?.(),
+    )
+  );
+}

package/src/private/animated/createAnimatedPropsMemoHook.js

@@ -0,0 +1,360 @@
+/**
+ * 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
+ */
+
+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 {useInsertionEffect, useMemo, useRef} from 'react';
+
+type CompositeKey = {
+  style?: {[string]: CompositeKeyComponent},
+  [string]:
+    | CompositeKeyComponent
+    | AnimatedEvent
+    | $ReadOnlyArray<mixed>
+    | $ReadOnly<{[string]: mixed}>,
+};
+
+type CompositeKeyComponent =
+  | AnimatedNode
+  | $ReadOnlyArray<CompositeKeyComponent | null>
+  | $ReadOnly<{[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}>;
+
+type AnimatedPropsMemoHook = (
+  () => AnimatedProps,
+  props: $ReadOnly<{[string]: mixed}>,
+) => AnimatedProps;
+
+/**
+ * Creates 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 createAnimatedPropsMemoHook(
+  allowlist: ?AnimatedPropsAllowlist,
+): AnimatedPropsMemoHook {
+  return function useAnimatedPropsMemo(
+    create: () => AnimatedProps,
+    props: $ReadOnly<{[string]: mixed}>,
+  ): AnimatedProps {
+    const compositeKey = useMemo(
+      () => createCompositeKeyForProps(props, allowlist),
+      [props],
+    );
+
+    const prevRef = useRef<?$ReadOnly<{
+      compositeKey: typeof compositeKey,
+      node: AnimatedProps,
+    }>>();
+    const prev = prevRef.current;
+
+    const next =
+      prev != null && areCompositeKeysEqual(prev.compositeKey, compositeKey)
+        ? prev
+        : {
+            compositeKey,
+            node: create(),
+          };
+
+    useInsertionEffect(() => {
+      prevRef.current = next;
+    }, [next]);
+
+    return next.node;
+  };
+}
+
+/**
+ * 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 || 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 || 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 (!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 (
+        !hasOwn(nullthrows(next), key) ||
+        !areCompositeKeyComponentsEqual(prev[key], next[key])
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
+// this shim when they do.
+// $FlowIgnore[method-unbinding]
+const _hasOwnProp = Object.prototype.hasOwnProperty;
+const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+  // $FlowIgnore[method-unbinding]
+  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE.js

@@ -0,0 +1,31 @@
+/**
+ * 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
+ */
+
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+
+import View from '../../../../Libraries/Components/View/View';
+import UIManager from '../../../../Libraries/ReactNative/UIManager';
+import Platform from '../../../../Libraries/Utilities/Platform';
+import * as React from 'react';
+
+const exported: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...ViewProps
+) = Platform.select({
+  ios: require('../../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent')
+    .default,
+  android: UIManager.hasViewManagerConfig('RCTSafeAreaView')
+    ? require('../../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent')
+        .default
+    : View,
+  default: View,
+});
+
+export default exported;