@office-iss/react-native-win32 0.0.0-canary.284 → 0.0.0-canary.285

package/src/private/animated/{useAnimatedPropsMemo.js → createAnimatedPropsMemoHook.js}

@@ -17,8 +17,9 @@ 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 * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
 import nullthrows from 'nullthrows';
-import {useMemo, useState} from 'react';
+import {useInsertionEffect, useMemo, useRef, useState} from 'react';
 
 type CompositeKey = {
   style?: {[string]: CompositeKeyComponent},
@@ -48,43 +49,94 @@ type $ReadOnlyCompositeKeyComponent =
   | $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null>
   | $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}>;
 
+type AnimatedPropsMemoHook = (
+  () => AnimatedProps,
+  props: $ReadOnly<{[string]: mixed}>,
+) => AnimatedProps;
+
 /**
- * A hook that returns an `AnimatedProps` object that is memoized based on the
- * subset of `props` that are instances of `AnimatedNode` or `AnimatedEvent`.
+ * 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 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({
+export function createAnimatedPropsMemoHook(
+  allowlist: ?AnimatedPropsAllowlist,
+): AnimatedPropsMemoHook {
+  return function useAnimatedPropsMemo(
+    create: () => AnimatedProps,
+    props: $ReadOnly<{[string]: mixed}>,
+  ): AnimatedProps {
+    // NOTE: This feature flag must be evaluated inside the hook because this
+    // module factory can be evaluated much sooner, before overrides are set.
+    const useAnimatedPropsImpl =
+      ReactNativeFeatureFlags.avoidStateUpdateInAnimatedPropsMemo()
+        ? useAnimatedPropsMemo_ref
+        : useAnimatedPropsMemo_state;
+    return useAnimatedPropsImpl(create, props);
+  };
+
+  function useAnimatedPropsMemo_ref(
+    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, allowlist)
+        ? prev
+        : {
+            compositeKey,
+            node: create(),
+          };
+
+    useInsertionEffect(() => {
+      prevRef.current = next;
+    }, [next]);
+
+    return next.node;
+  }
+
+  function useAnimatedPropsMemo_state(
+    create: () => AnimatedProps,
+    props: $ReadOnly<{[string]: mixed}>,
+  ): AnimatedProps {
+    const compositeKey = useMemo(
+      () => createCompositeKeyForProps(props, 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;
   }
-  return state.value;
 }
 
 /**

package/src/private/components/HScrollViewNativeComponents.js

@@ -17,7 +17,7 @@ import AndroidHorizontalScrollViewNativeComponent from '../../../Libraries/Compo
 import ScrollContentViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
 import ScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
 import Platform from '../../../Libraries/Utilities/Platform';
-import AndroidHorizontalScrollContentViewNativeComponent from '../specs/components/AndroidHorizontalScrollContentViewNativeComponent';
+import AndroidHorizontalScrollContentViewNativeComponent from '../specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent';
 
 export const HScrollViewNativeComponent: HostComponent<ScrollViewNativeProps> =
   Platform.OS === 'android'

package/src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE.js

@@ -20,10 +20,10 @@ const exported: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...ViewProps
 ) = Platform.select({
-  ios: require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
+  ios: require('../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent')
     .default,
   android: UIManager.hasViewManagerConfig('RCTSafeAreaView')
-    ? require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
+    ? require('../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent')
         .default
     : View,
   default: View,

package/src/private/debugging/ReactDevToolsSettingsManager.android.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import NativeReactDevToolsSettingsManager from '../specs/modules/NativeReactDevToolsSettingsManager';
+import NativeReactDevToolsSettingsManager from '../specs_DEPRECATED/modules/NativeReactDevToolsSettingsManager';
 
 module.exports = {
   setGlobalHookSettings(settings: string) {

package/src/private/debugging/ReactDevToolsSettingsManager.win32.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import NativeReactDevToolsSettingsManager from '../specs/modules/NativeReactDevToolsSettingsManager';
+import NativeReactDevToolsSettingsManager from '../specs_DEPRECATED/modules/NativeReactDevToolsSettingsManager';
 
 module.exports = {
   setGlobalHookSettings(settings: string) {

package/src/private/devmenu/DevMenu.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import NativeDevMenu from '../specs/modules/NativeDevMenu';
+import NativeDevMenu from '../specs_DEPRECATED/modules/NativeDevMenu';
 
 /**
  * The DevMenu module exposes methods for interacting with the Dev Menu in development.

package/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<811a054f0ada56d8cc1ed21c6930fc52>>
+ * @generated SignedSource<<189673854f1226119417140b4afd46e4>>
  * @flow strict
  */
 
@@ -30,11 +30,14 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   jsOnlyTestFlag: Getter<boolean>,
   animatedShouldDebounceQueueFlush: Getter<boolean>,
   animatedShouldUseSingleOp: Getter<boolean>,
+  avoidStateUpdateInAnimatedPropsMemo: Getter<boolean>,
   disableInteractionManager: Getter<boolean>,
   enableAccessToHostTreeInFabric: Getter<boolean>,
   enableAnimatedClearImmediateFix: Getter<boolean>,
+  enableDOMDocumentAPI: Getter<boolean>,
   fixVirtualizeListCollapseWindowSize: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
+  scheduleAnimatedCleanupInMicrotask: Getter<boolean>,
   shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
@@ -48,12 +51,10 @@ export type ReactNativeFeatureFlags = $ReadOnly<{
   ...ReactNativeFeatureFlagsJsOnly,
   commonTestFlag: Getter<boolean>,
   commonTestFlagWithoutNativeImplementation: Getter<boolean>,
-  completeReactInstanceCreationOnBgThreadOnAndroid: Getter<boolean>,
   disableMountItemReorderingAndroid: Getter<boolean>,
   enableAccumulatedUpdatesInRawPropsAndroid: Getter<boolean>,
   enableBridgelessArchitecture: Getter<boolean>,
   enableCppPropsIteratorSetter: Getter<boolean>,
-  enableDeletionOfUnmountedViews: Getter<boolean>,
   enableEagerRootViewAttachment: Getter<boolean>,
   enableEventEmitterRetentionDuringGesturesOnAndroid: Getter<boolean>,
   enableFabricLogs: Getter<boolean>,
@@ -78,16 +79,13 @@ export type ReactNativeFeatureFlags = $ReadOnly<{
   fixMappingOfEventPrioritiesBetweenFabricAndReact: Getter<boolean>,
   fixMountingCoordinatorReportedPendingTransactionsOnAndroid: Getter<boolean>,
   fuseboxEnabledRelease: Getter<boolean>,
-  initEagerTurboModulesOnNativeModulesQueueAndroid: Getter<boolean>,
+  fuseboxNetworkInspectionEnabled: Getter<boolean>,
   lazyAnimationCallbacks: Getter<boolean>,
-  loadVectorDrawablesOnImages: Getter<boolean>,
   traceTurboModulePromiseRejectionsOnAndroid: Getter<boolean>,
   useAlwaysAvailableJSErrorHandling: Getter<boolean>,
   useEditTextStockAndroidFocusBehavior: Getter<boolean>,
   useFabricInterop: Getter<boolean>,
-  useImmediateExecutorInAndroidBridgeless: Getter<boolean>,
   useNativeViewConfigsInBridgelessMode: Getter<boolean>,
-  useOptimisedViewPreallocationOnAndroid: Getter<boolean>,
   useOptimizedEventBatchingOnAndroid: Getter<boolean>,
   useRawPropsJsiValue: Getter<boolean>,
   useRuntimeShadowNodeReferenceUpdate: Getter<boolean>,
@@ -110,6 +108,11 @@ export const animatedShouldDebounceQueueFlush: Getter<boolean> = createJavaScrip
  */
 export const animatedShouldUseSingleOp: Getter<boolean> = createJavaScriptFlagGetter('animatedShouldUseSingleOp', false);
 
+/**
+ * Changes `useAnimatedPropsMemo` to avoid state updates to invalidate the cached `AnimatedProps`.
+ */
+export const avoidStateUpdateInAnimatedPropsMemo: Getter<boolean> = createJavaScriptFlagGetter('avoidStateUpdateInAnimatedPropsMemo', false);
+
 /**
  * Disables InteractionManager and replaces its scheduler with `setImmediate`.
  */
@@ -125,6 +128,11 @@ export const enableAccessToHostTreeInFabric: Getter<boolean> = createJavaScriptF
  */
 export const enableAnimatedClearImmediateFix: Getter<boolean> = createJavaScriptFlagGetter('enableAnimatedClearImmediateFix', true);
 
+/**
+ * Enables the DOM Document API, exposing instaces of document through `getRootNode` and `ownerDocument`, and providing access to the `documentElement` representing the root node. This flag will be short-lived, only to test the Document API specifically, and then it will be collapsed into the enableAccessToHostTreeInFabric flag.
+ */
+export const enableDOMDocumentAPI: Getter<boolean> = createJavaScriptFlagGetter('enableDOMDocumentAPI', false);
+
 /**
  * Fixing an edge case where the current window size is not properly calculated with fast scrolling. Window size collapsed to 1 element even if windowSize more than the current amount of elements
  */
@@ -135,6 +143,11 @@ export const fixVirtualizeListCollapseWindowSize: Getter<boolean> = createJavaSc
  */
 export const isLayoutAnimationEnabled: Getter<boolean> = createJavaScriptFlagGetter('isLayoutAnimationEnabled', true);
 
+/**
+ * Changes the cleanup of`AnimatedProps` to occur in a microtask instead of synchronously during effect cleanup (for unmount) or subsequent mounts (for updates).
+ */
+export const scheduleAnimatedCleanupInMicrotask: Getter<boolean> = createJavaScriptFlagGetter('scheduleAnimatedCleanupInMicrotask', false);
+
 /**
  * If the animation is within Animated.loop, we do not send state updates to React.
  */
@@ -167,11 +180,7 @@ export const commonTestFlag: Getter<boolean> = createNativeFlagGetter('commonTes
 /**
  * Common flag for testing (without native implementation). Do NOT modify.
  */
-export const commonTestFlagWithoutNativeImplementation: Getter<boolean> = createNativeFlagGetter('commonTestFlagWithoutNativeImplementation', false);
-/**
- * Do not wait for a main-thread dispatch to complete init to start executing work on the JS thread on Android
- */
-export const completeReactInstanceCreationOnBgThreadOnAndroid: Getter<boolean> = createNativeFlagGetter('completeReactInstanceCreationOnBgThreadOnAndroid', true);
+export const commonTestFlagWithoutNativeImplementation: Getter<boolean> = createNativeFlagGetter('commonTestFlagWithoutNativeImplementation', false, true);
 /**
  * Prevent FabricMountingManager from reordering mountitems, which may lead to invalid state on the UI thread
  */
@@ -188,10 +197,6 @@ export const enableBridgelessArchitecture: Getter<boolean> = createNativeFlagGet
  * Enable prop iterator setter-style construction of Props in C++ (this flag is not used in Java).
  */
 export const enableCppPropsIteratorSetter: Getter<boolean> = createNativeFlagGetter('enableCppPropsIteratorSetter', false);
-/**
- * Deletes views that were pre-allocated but never mounted on the screen.
- */
-export const enableDeletionOfUnmountedViews: Getter<boolean> = createNativeFlagGetter('enableDeletionOfUnmountedViews', false);
 /**
  * Feature flag to configure eager attachment of the root view/initialisation of the JS code.
  */
@@ -289,17 +294,13 @@ export const fixMountingCoordinatorReportedPendingTransactionsOnAndroid: Getter<
  */
 export const fuseboxEnabledRelease: Getter<boolean> = createNativeFlagGetter('fuseboxEnabledRelease', false);
 /**
- * Construct modules that requires eager init on the dedicate native modules thread
+ * Enable network inspection support in the React Native DevTools CDP backend. This flag is global and should not be changed across React Host lifetimes.
  */
-export const initEagerTurboModulesOnNativeModulesQueueAndroid: Getter<boolean> = createNativeFlagGetter('initEagerTurboModulesOnNativeModulesQueueAndroid', true);
+export const fuseboxNetworkInspectionEnabled: Getter<boolean> = createNativeFlagGetter('fuseboxNetworkInspectionEnabled', false);
 /**
  * Only enqueue Choreographer calls if there is an ongoing animation, instead of enqueueing every frame.
  */
 export const lazyAnimationCallbacks: Getter<boolean> = createNativeFlagGetter('lazyAnimationCallbacks', false);
-/**
- * Adds support for loading vector drawable assets in the Image component (only on Android)
- */
-export const loadVectorDrawablesOnImages: Getter<boolean> = createNativeFlagGetter('loadVectorDrawablesOnImages', true);
 /**
  * Enables storing js caller stack when creating promise in native module. This is useful in case of Promise rejection and tracing the cause.
  */
@@ -316,18 +317,10 @@ export const useEditTextStockAndroidFocusBehavior: Getter<boolean> = createNativ
  * Should this application enable the Fabric Interop Layer for Android? If yes, the application will behave so that it can accept non-Fabric components and render them on Fabric. This toggle is controlling extra logic such as custom event dispatching that are needed for the Fabric Interop Layer to work correctly.
  */
 export const useFabricInterop: Getter<boolean> = createNativeFlagGetter('useFabricInterop', false);
-/**
- * Invoke callbacks immediately on the ReactInstance rather than going through a background thread for synchronization
- */
-export const useImmediateExecutorInAndroidBridgeless: Getter<boolean> = createNativeFlagGetter('useImmediateExecutorInAndroidBridgeless', true);
 /**
  * When enabled, the native view configs are used in bridgeless mode.
  */
 export const useNativeViewConfigsInBridgelessMode: Getter<boolean> = createNativeFlagGetter('useNativeViewConfigsInBridgelessMode', false);
-/**
- * Moves more of the work in view preallocation to the main thread to free up JS thread.
- */
-export const useOptimisedViewPreallocationOnAndroid: Getter<boolean> = createNativeFlagGetter('useOptimisedViewPreallocationOnAndroid', false);
 /**
  * Uses an optimized mechanism for event batching on Android that does not need to wait for a Choreographer frame callback.
  */

package/src/private/featureflags/ReactNativeFeatureFlagsBase.js

@@ -62,12 +62,13 @@ type NativeFeatureFlags = $NonMaybeType<typeof NativeReactNativeFeatureFlags>;
 export function createNativeFlagGetter<K: $Keys<NativeFeatureFlags>>(
   configName: K,
   defaultValue: ReturnType<$NonMaybeType<NativeFeatureFlags[K]>>,
+  skipUnavailableNativeModuleError: boolean = false,
 ): Getter<ReturnType<$NonMaybeType<NativeFeatureFlags[K]>>> {
   return createGetter(
     configName,
     () => {
       const valueFromNative = NativeReactNativeFeatureFlags?.[configName]?.();
-      if (valueFromNative == null) {
+      if (valueFromNative == null && !skipUnavailableNativeModuleError) {
         logUnavailableNativeModuleError(configName);
       }
       return valueFromNative;

package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<bcb501bc8f71f02c82a58b898e73d9a0>>
+ * @generated SignedSource<<8a004cfe15509541b1aa045f219bbaca>>
  * @flow strict
  */
 
@@ -25,12 +25,10 @@ import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboMod
 export interface Spec extends TurboModule {
   +commonTestFlag?: () => boolean;
   +commonTestFlagWithoutNativeImplementation?: () => boolean;
-  +completeReactInstanceCreationOnBgThreadOnAndroid?: () => boolean;
   +disableMountItemReorderingAndroid?: () => boolean;
   +enableAccumulatedUpdatesInRawPropsAndroid?: () => boolean;
   +enableBridgelessArchitecture?: () => boolean;
   +enableCppPropsIteratorSetter?: () => boolean;
-  +enableDeletionOfUnmountedViews?: () => boolean;
   +enableEagerRootViewAttachment?: () => boolean;
   +enableEventEmitterRetentionDuringGesturesOnAndroid?: () => boolean;
   +enableFabricLogs?: () => boolean;
@@ -55,16 +53,13 @@ export interface Spec extends TurboModule {
   +fixMappingOfEventPrioritiesBetweenFabricAndReact?: () => boolean;
   +fixMountingCoordinatorReportedPendingTransactionsOnAndroid?: () => boolean;
   +fuseboxEnabledRelease?: () => boolean;
-  +initEagerTurboModulesOnNativeModulesQueueAndroid?: () => boolean;
+  +fuseboxNetworkInspectionEnabled?: () => boolean;
   +lazyAnimationCallbacks?: () => boolean;
-  +loadVectorDrawablesOnImages?: () => boolean;
   +traceTurboModulePromiseRejectionsOnAndroid?: () => boolean;
   +useAlwaysAvailableJSErrorHandling?: () => boolean;
   +useEditTextStockAndroidFocusBehavior?: () => boolean;
   +useFabricInterop?: () => boolean;
-  +useImmediateExecutorInAndroidBridgeless?: () => boolean;
   +useNativeViewConfigsInBridgelessMode?: () => boolean;
-  +useOptimisedViewPreallocationOnAndroid?: () => boolean;
   +useOptimizedEventBatchingOnAndroid?: () => boolean;
   +useRawPropsJsiValue?: () => boolean;
   +useRuntimeShadowNodeReferenceUpdate?: () => boolean;

package/{Libraries/Inspector → src/private/inspector}/BorderBox.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {ViewStyleProp} from '../../../Libraries/StyleSheet/StyleSheet';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../../../Libraries/Components/View/View').default;
 
 type Props = $ReadOnly<{
   children: React.Node,
@@ -41,4 +41,4 @@ function BorderBox({children, box, style}: Props): React.Node {
   return <View style={[borderStyle, style]}>{children}</View>;
 }
 
-module.exports = BorderBox;
+export default BorderBox;

package/{Libraries/Inspector → src/private/inspector}/BoxInspector.js

@@ -10,15 +10,18 @@
 
 'use strict';
 
-import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {
+  TextStyleProp,
+  ViewStyleProp,
+} from '../../../Libraries/StyleSheet/StyleSheet';
 import type {InspectedElementFrame} from './Inspector';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const resolveBoxStyle = require('./resolveBoxStyle');
+const View = require('../../../Libraries/Components/View/View').default;
+const StyleSheet = require('../../../Libraries/StyleSheet/StyleSheet');
+const Text = require('../../../Libraries/Text/Text').default;
+const resolveBoxStyle = require('./resolveBoxStyle').default;
 
 const blank = {
   top: 0,
@@ -124,4 +127,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = BoxInspector;
+export default BoxInspector;

package/{Libraries/Inspector → src/private/inspector}/ElementBox.js

@@ -10,17 +10,17 @@
 
 'use strict';
 
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {ViewStyleProp} from '../../../Libraries/StyleSheet/StyleSheet';
 import type {InspectedElementFrame} from './Inspector';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
-const flattenStyle = require('../StyleSheet/flattenStyle');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions').default;
-const BorderBox = require('./BorderBox');
-const resolveBoxStyle = require('./resolveBoxStyle');
+const View = require('../../../Libraries/Components/View/View').default;
+const flattenStyle = require('../../../Libraries/StyleSheet/flattenStyle');
+const StyleSheet = require('../../../Libraries/StyleSheet/StyleSheet');
+const Dimensions = require('../../../Libraries/Utilities/Dimensions').default;
+const BorderBox = require('./BorderBox').default;
+const resolveBoxStyle = require('./resolveBoxStyle').default;
 
 type Props = $ReadOnly<{
   frame: InspectedElementFrame,
@@ -147,4 +147,4 @@ function resolveSizeInPlace(
   }
 }
 
-module.exports = ElementBox;
+export default ElementBox;

package/{Libraries/Inspector → src/private/inspector}/ElementProperties.js

@@ -10,20 +10,22 @@
 
 'use strict';
 
-import type {InspectorData} from '../Renderer/shims/ReactNativeTypes';
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {InspectorData} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {ViewStyleProp} from '../../../Libraries/StyleSheet/StyleSheet';
 
 import React from 'react';
 
-const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
-const TouchableWithoutFeedback = require('../Components/Touchable/TouchableWithoutFeedback');
-const View = require('../Components/View/View');
-const flattenStyle = require('../StyleSheet/flattenStyle');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const mapWithSeparator = require('../Utilities/mapWithSeparator');
-const BoxInspector = require('./BoxInspector');
-const StyleInspector = require('./StyleInspector');
+const TouchableHighlight =
+  require('../../../Libraries/Components/Touchable/TouchableHighlight').default;
+const TouchableWithoutFeedback =
+  require('../../../Libraries/Components/Touchable/TouchableWithoutFeedback').default;
+const View = require('../../../Libraries/Components/View/View').default;
+const flattenStyle = require('../../../Libraries/StyleSheet/flattenStyle');
+const StyleSheet = require('../../../Libraries/StyleSheet/StyleSheet');
+const Text = require('../../../Libraries/Text/Text').default;
+const mapWithSeparator = require('../../../Libraries/Utilities/mapWithSeparator');
+const BoxInspector = require('./BoxInspector').default;
+const StyleInspector = require('./StyleInspector').default;
 
 type Props = $ReadOnly<{
   hierarchy: ?InspectorData['hierarchy'],
@@ -118,4 +120,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ElementProperties;
+export default ElementProperties;

package/{Libraries/Inspector → src/private/inspector}/Inspector.js

@@ -10,26 +10,29 @@
 
 'use strict';
 
-import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
+import type {InspectedViewRef} from '../../../Libraries/ReactNative/AppContainer-dev';
 import type {
   InspectorData,
   TouchedViewDataAtPoint,
-} from '../Renderer/shims/ReactNativeTypes';
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
-import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {ViewStyleProp} from '../../../Libraries/StyleSheet/StyleSheet';
+import type {ReactDevToolsAgent} from '../../../Libraries/Types/ReactDevToolsTypes';
 
-import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
+import SafeAreaView from '../components/SafeAreaView_INTERNAL_DO_NOT_USE';
 import React from 'react';
 
-const View = require('../Components/View/View');
-const PressabilityDebug = require('../Pressability/PressabilityDebug');
-const {findNodeHandle} = require('../ReactNative/RendererProxy');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions').default;
-const Platform = require('../Utilities/Platform');
-const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
-const InspectorOverlay = require('./InspectorOverlay');
-const InspectorPanel = require('./InspectorPanel');
+const View = require('../../../Libraries/Components/View/View').default;
+const PressabilityDebug = require('../../../Libraries/Pressability/PressabilityDebug');
+const {
+  findNodeHandle,
+} = require('../../../Libraries/ReactNative/RendererProxy');
+const StyleSheet = require('../../../Libraries/StyleSheet/StyleSheet');
+const Dimensions = require('../../../Libraries/Utilities/Dimensions').default;
+const Platform = require('../../../Libraries/Utilities/Platform');
+const getInspectorDataForViewAtPoint =
+  require('./getInspectorDataForViewAtPoint').default;
+const InspectorOverlay = require('./InspectorOverlay').default;
+const InspectorPanel = require('./InspectorPanel').default;
 
 const {useState} = React;
 
@@ -203,4 +206,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = Inspector;
+export default Inspector;

package/{Libraries/Inspector → src/private/inspector}/InspectorOverlay.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-import type {PressEvent} from '../Types/CoreEventTypes';
+import type {PressEvent} from '../../../Libraries/Types/CoreEventTypes';
 import type {InspectedElement} from './Inspector';
 
 import React from 'react';
 
-const View = require('../Components/View/View');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const ElementBox = require('./ElementBox');
+const View = require('../../../Libraries/Components/View/View').default;
+const StyleSheet = require('../../../Libraries/StyleSheet/StyleSheet');
+const ElementBox = require('./ElementBox').default;
 
 type Props = $ReadOnly<{
   inspected?: ?InspectedElement,
@@ -63,4 +63,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = InspectorOverlay;
+export default InspectorOverlay;

package/{Libraries/Inspector → src/private/inspector}/InspectorPanel.js

@@ -12,17 +12,19 @@
 
 import type {ElementsHierarchy, InspectedElement} from './Inspector';
 
-import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
+import SafeAreaView from '../../../Libraries/Components/SafeAreaView/SafeAreaView';
 import React from 'react';
 
-const ScrollView = require('../Components/ScrollView/ScrollView').default;
-const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
-const View = require('../Components/View/View');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const ElementProperties = require('./ElementProperties');
-const NetworkOverlay = require('./NetworkOverlay');
-const PerformanceOverlay = require('./PerformanceOverlay');
+const ScrollView =
+  require('../../../Libraries/Components/ScrollView/ScrollView').default;
+const TouchableHighlight =
+  require('../../../Libraries/Components/Touchable/TouchableHighlight').default;
+const View = require('../../../Libraries/Components/View/View').default;
+const StyleSheet = require('../../../Libraries/StyleSheet/StyleSheet');
+const Text = require('../../../Libraries/Text/Text').default;
+const ElementProperties = require('./ElementProperties').default;
+const NetworkOverlay = require('./NetworkOverlay').default;
+const PerformanceOverlay = require('./PerformanceOverlay').default;
 
 type Props = $ReadOnly<{
   devtoolsIsOpen: boolean,
@@ -161,4 +163,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = InspectorPanel;
+export default InspectorPanel;