react-native 0.71.3 → 0.72.0-rc.0

package/Libraries/DevToolsSettings/DevToolsSettingsManager.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+export interface DevToolsSettingsManagerStatic {
+  reload(): void;
+  setConsolePatchSettings(newSettings: string): void;
+  getConsolePatchSettings(): string | null;
+  setProfilingSettings(newSettings: string): void;
+  getProfilingSettings(): string | null;
+}
+
+export const DevToolsSettingsManager: DevToolsSettingsManagerStatic;
+export type DevToolsSettingsManager = DevToolsSettingsManagerStatic;

package/Libraries/DevToolsSettings/DevToolsSettingsManager.ios.js

@@ -0,0 +1,49 @@
+/**
+ * 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 Settings from '../Settings/Settings';
+import DevSettings from '../Utilities/DevSettings';
+
+const CONSOLE_PATCH_SETTINGS_KEY = 'ReactDevTools::ConsolePatchSettings';
+const PROFILING_SETTINGS_KEY = 'ReactDevTools::ProfilingSettings';
+
+const DevToolsSettingsManager = {
+  setConsolePatchSettings(newConsolePatchSettings: string): void {
+    Settings.set({
+      [CONSOLE_PATCH_SETTINGS_KEY]: newConsolePatchSettings,
+    });
+  },
+  getConsolePatchSettings(): ?string {
+    const value = Settings.get(CONSOLE_PATCH_SETTINGS_KEY);
+    if (typeof value === 'string') {
+      return value;
+    }
+    return null;
+  },
+
+  setProfilingSettings(newProfilingSettings: string): void {
+    Settings.set({
+      [PROFILING_SETTINGS_KEY]: newProfilingSettings,
+    });
+  },
+  getProfilingSettings(): ?string {
+    const value = Settings.get(PROFILING_SETTINGS_KEY);
+    if (typeof value === 'string') {
+      return value;
+    }
+    return null;
+  },
+
+  reload(): void {
+    DevSettings?.reload();
+  },
+};
+
+module.exports = DevToolsSettingsManager;

package/Libraries/DevToolsSettings/NativeDevToolsSettingsManager.js

@@ -0,0 +1,24 @@
+/**
+ * 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
+ */
+
+import type {TurboModule} from '../TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+
+export interface Spec extends TurboModule {
+  +setConsolePatchSettings: (newConsolePatchSettings: string) => void;
+  +getConsolePatchSettings: () => ?string;
+  +setProfilingSettings?: (newProfilingSettings: string) => void;
+  +getProfilingSettings?: () => ?string;
+}
+
+export default (TurboModuleRegistry.get<Spec>(
+  'DevToolsSettingsManager',
+): ?Spec);

package/Libraries/EventEmitter/NativeEventEmitter.d.ts

@@ -7,9 +7,8 @@
  * @format
  */
 
-import {
+import EventEmitter, {
   EmitterSubscription,
-  EventEmitter,
 } from '../vendor/emitter/EventEmitter';
 
 /**

package/Libraries/EventEmitter/RCTDeviceEventEmitter.d.ts

@@ -7,9 +7,8 @@
  * @format
  */
 
-import {
+import EventEmitter, {
   EmitterSubscription,
-  EventEmitter,
   EventSubscriptionVendor,
 } from '../vendor/emitter/EventEmitter';
 

package/Libraries/EventEmitter/RCTDeviceEventEmitter.js

@@ -21,4 +21,12 @@ type RCTDeviceEventDefinitions = $FlowFixMe;
  *
  * NativeModules that emit events should instead subclass `NativeEventEmitter`.
  */
-export default (new EventEmitter(): IEventEmitter<RCTDeviceEventDefinitions>);
+const RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions> =
+  new EventEmitter();
+
+Object.defineProperty(global, '__rctDeviceEventEmitter', {
+  configurable: true,
+  value: RCTDeviceEventEmitter,
+});
+
+export default (RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions>);

package/Libraries/Events/EventPolyfill.js

@@ -159,7 +159,7 @@ class EventPolyfill implements IEvent {
   // data with the other in sync.
   _syntheticEvent: mixed;
 
-  constructor(type: string, eventInitDict?: Event$Init): void {
+  constructor(type: string, eventInitDict?: Event$Init) {
     this.type = type;
     this.bubbles = !!(eventInitDict?.bubbles || false);
     this.cancelable = !!(eventInitDict?.cancelable || false);

package/Libraries/FBLazyVector/BUCK

@@ -1,6 +1,6 @@
-load("//tools/build_defs/oss:rn_defs.bzl", "fb_apple_library")
+load("//tools/build_defs/oss:rn_defs.bzl", "rn_apple_library")
 
-fb_apple_library(
+rn_apple_library(
     name = "FBLazyVector",
     exported_headers = [
         "FBLazyVector/FBLazyIterator.h",

package/Libraries/FBLazyVector/FBLazyVector.podspec

@@ -22,7 +22,7 @@ Pod::Spec.new do |s|
   s.summary                = "-"  # TODO
   s.homepage               = "https://reactnative.dev/"
   s.license                = package["license"]
-  s.author                 = "Facebook, Inc. and its affiliates"
+  s.author                 = "Meta Platforms, Inc. and its affiliates"
   s.platforms              = { :ios => "12.4" }
   s.source                 = source
   s.source_files           = "**/*.{c,h,m,mm,cpp}"

package/Libraries/Image/AssetRegistry.js

@@ -10,4 +10,4 @@
 
 'use strict';
 
-module.exports = require('@react-native/assets/registry');
+module.exports = require('@react-native/assets-registry/registry');

package/Libraries/Image/AssetSourceResolver.js

@@ -18,16 +18,16 @@ export type ResolvedAssetSource = {|
   +scale: number,
 |};
 
-import type {PackagerAsset} from '@react-native/assets/registry';
+import type {PackagerAsset} from '@react-native/assets-registry/registry';
 
-const PixelRatio = require('../Utilities/PixelRatio');
+const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform');
 const {pickScale} = require('./AssetUtils');
 const {
   getAndroidResourceFolderName,
   getAndroidResourceIdentifier,
   getBasePath,
-} = require('@react-native/assets/path-support');
+} = require('@react-native/assets-registry/path-support');
 const invariant = require('invariant');
 
 /**

package/Libraries/Image/Image.android.js

@@ -152,19 +152,22 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   let style;
   let sources;
   if (Array.isArray(source)) {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([styles.base, props.style]);
     sources = source;
   } else {
+    // $FlowFixMe[incompatible-type]
     const {width = props.width, height = props.height, uri} = source;
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([{width, height}, styles.base, props.style]);
     sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
   }
 
   const {height, width, ...restProps} = props;
+
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
   const nativeProps = {
     ...restProps,

package/Libraries/Image/Image.d.ts

@@ -12,7 +12,7 @@ import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
 import {Insets} from '../../types/public/Insets';
 import {NativeMethods} from '../../types/public/ReactNativeTypes';
-import {StyleProp} from '../StyleSheet/StyleSheet';
+import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
 import {ImageStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {LayoutChangeEvent, NativeSyntheticEvent} from '../Types/CoreEventTypes';
 import {ImageResizeMode} from './ImageResizeMode';
@@ -225,6 +225,21 @@ export interface ImagePropsBase
    */
   source: ImageSourcePropType;
 
+  /**
+   * A string representing the resource identifier for the image. Similar to
+   * src from HTML.
+   *
+   * See https://reactnative.dev/docs/image#src
+   */
+  src?: string | undefined;
+
+  /**
+   * Similar to srcset from HTML.
+   *
+   * See https://reactnative.dev/docs/image#srcset
+   */
+  srcSet?: string | undefined;
+
   /**
    * similarly to `source`, this property represents the resource used to render
    * the loading indicator for the image, displayed until image is ready to be
@@ -254,6 +269,52 @@ export interface ImagePropsBase
    * See https://reactnative.dev/docs/image#alt
    */
   alt?: string | undefined;
+
+  /**
+   * Height of the image component.
+   *
+   * See https://reactnative.dev/docs/image#height
+   */
+  height?: number | undefined;
+
+  /**
+   * Width of the image component.
+   *
+   * See https://reactnative.dev/docs/image#width
+   */
+  width?: number | undefined;
+
+  /**
+   * Adds the CORS related header to the request.
+   * Similar to crossorigin from HTML.
+   *
+   * See https://reactnative.dev/docs/image#crossorigin
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
+
+  /**
+   * Changes the color of all the non-transparent pixels to the tintColor.
+   *
+   * See https://reactnative.dev/docs/image#tintcolor
+   */
+  tintColor?: ColorValue | undefined;
+
+  /**
+   * A string indicating which referrer to use when fetching the resource.
+   * Similar to referrerpolicy from HTML.
+   *
+   * See https://reactnative.dev/docs/image#referrerpolicy
+   */
+  referrerPolicy?:
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url'
+    | undefined;
 }
 
 export interface ImageProps extends ImagePropsBase {
@@ -298,7 +359,7 @@ export class Image extends ImageBase {
 }
 
 export interface ImageBackgroundProps extends ImagePropsBase {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   imageStyle?: StyleProp<ImageStyle> | undefined;
   style?: StyleProp<ViewStyle> | undefined;
   imageRef?(image: Image): void;

package/Libraries/Image/Image.ios.js

@@ -114,10 +114,13 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   let sources;
   let style: ImageStyleProp;
   if (Array.isArray(source)) {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([styles.base, props.style]) || {};
     sources = source;
   } else {
+    // $FlowFixMe[incompatible-type]
     const {width = props.width, height = props.height, uri} = source;
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([{width, height}, styles.base, props.style]) || {};
     sources = [source];
 

package/Libraries/Image/ImageBackground.js

@@ -76,6 +76,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
       ...props
     } = this.props;
 
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const flattenedStyle = flattenStyle(style);
     return (
       <View

package/Libraries/Image/ImageProps.js

@@ -93,7 +93,7 @@ export type ImageProps = {|
   'aria-label'?: ?Stringish,
 
   /**
-   * Reperesents the nativeID of the associated label. When the assistive technology focuses on the component with this props.
+   * Represents the nativeID of the associated label. When the assistive technology focuses on the component with this props.
    *
    * @platform android
    */

package/Libraries/Image/ImageViewNativeComponent.js

@@ -71,7 +71,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           internal_analyticTag: true,
           resizeMode: true,
           tintColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           borderBottomLeftRadius: true,
           borderTopLeftRadius: true,
@@ -82,10 +82,10 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           shouldNotifyLoadEvents: true,
           defaultSrc: true,
           overlayColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           borderColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           accessible: true,
           progressiveRenderingEnabled: true,
@@ -130,7 +130,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           resizeMode: true,
           source: true,
           tintColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           ...ConditionallyIgnoredEventHandlers({
             onLoadStart: true,

package/Libraries/Image/ImageViewNativeComponent.js.flow

@@ -12,10 +12,7 @@ import type {ResolvedAssetSource} from './AssetSourceResolver';
 import type {ImageProps} from './ImageProps';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import {ConditionallyIgnoredEventHandlers} from '../NativeComponent/ViewConfigIgnore';
-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import type {
   ColorValue,
   DangerouslyImpreciseStyle,

package/Libraries/Image/RCTImageCache.h

@@ -39,7 +39,7 @@
 @interface RCTImageCache : NSObject <RCTImageCache>
 
 RCT_EXTERN void RCTSetImageCacheLimits(
-    NSUInteger maxCachableDecodedImageSizeInBytes,
+    NSUInteger maxCacheableDecodedImageSizeInBytes,
     NSUInteger imageCacheTotalCostLimit);
 
 @end

package/Libraries/Image/RCTImageCache.m

@@ -18,12 +18,12 @@
 
 #import <React/RCTImageUtils.h>
 
-static NSUInteger RCTMaxCachableDecodedImageSizeInBytes = 2 * 1024 * 1024;
+static NSUInteger RCTMaxCacheableDecodedImageSizeInBytes = 2 * 1024 * 1024;
 static NSUInteger RCTImageCacheTotalCostLimit = 20 * 1024 * 1024;
 
-void RCTSetImageCacheLimits(NSUInteger maxCachableDecodedImageSizeInBytes, NSUInteger imageCacheTotalCostLimit)
+void RCTSetImageCacheLimits(NSUInteger maxCacheableDecodedImageSizeInBytes, NSUInteger imageCacheTotalCostLimit)
 {
-  RCTMaxCachableDecodedImageSizeInBytes = maxCachableDecodedImageSizeInBytes;
+  RCTMaxCacheableDecodedImageSizeInBytes = maxCacheableDecodedImageSizeInBytes;
   RCTImageCacheTotalCostLimit = imageCacheTotalCostLimit;
 }
 
@@ -73,7 +73,7 @@ static NSString *RCTCacheKeyForImage(NSString *imageTag, CGSize size, CGFloat sc
     return;
   }
   NSInteger bytes = image.reactDecodedImageBytes;
-  if (bytes <= RCTMaxCachableDecodedImageSizeInBytes) {
+  if (bytes <= RCTMaxCacheableDecodedImageSizeInBytes) {
     [self->_decodedImageCache setObject:image forKey:cacheKey cost:bytes];
   }
 }

package/Libraries/Image/RCTImageView.mm

@@ -137,7 +137,7 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
     image = [image resizableImageWithCapInsets:_capInsets resizingMode:UIImageResizingModeStretch];
   }
 
-  // Apply trilinear filtering to smooth out mis-sized images
+  // Apply trilinear filtering to smooth out missized images
   _imageView.layer.minificationFilter = kCAFilterTrilinear;
   _imageView.layer.magnificationFilter = kCAFilterTrilinear;
 

package/Libraries/Image/React-RCTImage.podspec

@@ -19,6 +19,19 @@ end
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 folly_version = '2021.07.22.00'
 
+header_search_paths = [
+  "\"$(PODS_ROOT)/RCT-Folly\"",
+  "\"${PODS_ROOT}/Headers/Public/React-Codegen/react/renderer/components\"",
+  "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Codegen/React_Codegen.framework/Headers\""
+]
+
+if ENV["USE_FRAMEWORKS"]
+  header_search_paths = header_search_paths.concat([
+    "\"$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\"",
+    "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-NativeModulesApple/React_NativeModulesApple.framework/Headers\""
+  ])
+end
+
 Pod::Spec.new do |s|
   s.name                   = "React-RCTImage"
   s.version                = version
@@ -26,7 +39,7 @@ Pod::Spec.new do |s|
   s.homepage               = "https://reactnative.dev/"
   s.documentation_url      = "https://reactnative.dev/docs/image"
   s.license                = package["license"]
-  s.author                 = "Facebook, Inc. and its affiliates"
+  s.author                 = "Meta Platforms, Inc. and its affiliates"
   s.platforms              = { :ios => "12.4" }
   s.compiler_flags         = folly_compiler_flags + ' -Wno-nullability-completeness'
   s.source                 = source
@@ -36,7 +49,7 @@ Pod::Spec.new do |s|
   s.pod_target_xcconfig    = {
                                "USE_HEADERMAP" => "YES",
                                "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
-                               "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-Codegen/react/renderer/components\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Codegen/React_Codegen.framework/Headers\""
+                               "HEADER_SEARCH_PATHS" => header_search_paths.join(' ')
                              }
 
   s.dependency "RCT-Folly", folly_version

package/Libraries/Image/RelativeImageStub.js

@@ -13,7 +13,7 @@
 // This is a stub for flow to make it understand require('./icon.png')
 // See metro/src/Bundler/index.js
 
-const AssetRegistry = require('@react-native/assets/registry');
+const AssetRegistry = require('@react-native/assets-registry/registry');
 
 module.exports = (AssetRegistry.registerAsset({
   __packager_asset: true,

package/Libraries/Image/TextInlineImageNativeComponent.js

@@ -36,7 +36,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     resizeMode: true,
     src: true,
     tintColor: {
-      process: require('../StyleSheet/processColor'),
+      process: require('../StyleSheet/processColor').default,
     },
     headers: true,
   },

package/Libraries/Image/resolveAssetSource.js

@@ -16,7 +16,7 @@ import type {ResolvedAssetSource} from './AssetSourceResolver';
 
 const AssetSourceResolver = require('./AssetSourceResolver');
 const {pickScale} = require('./AssetUtils');
-const AssetRegistry = require('@react-native/assets/registry');
+const AssetRegistry = require('@react-native/assets-registry/registry');
 
 let _customSourceTransformer, _serverURL, _scriptURL;
 

package/Libraries/Inspector/DevtoolsOverlay.js

@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type {PointerEvent} from '../Types/CoreEventTypes';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {HostRef} from './getInspectorDataForViewAtPoint';
 
@@ -50,8 +51,12 @@ export default function DevtoolsOverlay({
 
     function onAgentShowNativeHighlight(node: any) {
       clearTimeout(hideTimeoutId);
-      // Shape of `node` is different in Fabric.
-      const component = node.canonical ?? node;
+
+      // `publicInstance` => Fabric
+      // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+      // `canonical` => Legacy Fabric
+      // `node` => Legacy renderer
+      const component = node.publicInstance ?? node.canonical ?? node;
       if (!component || !component.measure) {
         return;
       }
@@ -125,11 +130,11 @@ export default function DevtoolsOverlay({
       getInspectorDataForViewAtPoint(inspectedView, x, y, viewData => {
         const {touchedViewTag, closestInstance, frame} = viewData;
         if (closestInstance != null || touchedViewTag != null) {
+          // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
+          // this makes sure it works for both architectures.
+          agent.selectNode(findNodeHandle(touchedViewTag));
           if (closestInstance != null) {
-            // Fabric
             agent.selectNode(closestInstance);
-          } else {
-            agent.selectNode(findNodeHandle(touchedViewTag));
           }
           setInspected({
             frame,
@@ -153,14 +158,14 @@ export default function DevtoolsOverlay({
   }, []);
 
   const onPointerMove = useCallback(
-    e => {
+    (e: PointerEvent) => {
       findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
     },
     [findViewForLocation],
   );
 
   const onResponderMove = useCallback(
-    e => {
+    (e: PressEvent) => {
       findViewForLocation(
         e.nativeEvent.touches[0].locationX,
         e.nativeEvent.touches[0].locationY,
@@ -169,7 +174,7 @@ export default function DevtoolsOverlay({
     [findViewForLocation],
   );
 
-  const shouldSetResponser = useCallback(
+  const shouldSetResponder = useCallback(
     (e: PressEvent): boolean => {
       onResponderMove(e);
       return true;
@@ -179,17 +184,19 @@ export default function DevtoolsOverlay({
 
   let highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
   if (isInspecting) {
-    const events = ReactNativeFeatureFlags.shouldEmitW3CPointerEvents
-      ? {
-          onPointerMove,
-          onPointerDown: onPointerMove,
-          onPointerUp: stopInspecting,
-        }
-      : {
-          onStartShouldSetResponder: shouldSetResponser,
-          onResponderMove: onResponderMove,
-          onResponderRelease: stopInspecting,
-        };
+    const events =
+      // Pointer events only work on fabric
+      ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()
+        ? {
+            onPointerMove,
+            onPointerDown: onPointerMove,
+            onPointerUp: stopInspecting,
+          }
+        : {
+            onStartShouldSetResponder: shouldSetResponder,
+            onResponderMove: onResponderMove,
+            onResponderRelease: stopInspecting,
+          };
     return (
       <View
         nativeID="devToolsInspectorOverlay"

package/Libraries/Inspector/ElementBox.js

@@ -13,13 +13,14 @@
 const View = require('../Components/View/View');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions');
+const Dimensions = require('../Utilities/Dimensions').default;
 const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
 const React = require('react');
 
 class ElementBox extends React.Component<$FlowFixMeProps> {
   render(): React.Node {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const style = flattenStyle(this.props.style) || {};
     let margin = resolveBoxStyle('margin', style);
     let padding = resolveBoxStyle('padding', style);
@@ -123,12 +124,14 @@ function resolveSizeInPlace(
 ) {
   if (style[direction] !== null && typeof style[direction] === 'string') {
     if (style[direction].indexOf('%') !== -1) {
+      // $FlowFixMe[prop-missing]
       style[direction] =
         (parseFloat(style[direction]) / 100.0) *
         Dimensions.get('window')[dimension];
     }
     if (style[direction] === 'auto') {
       // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
+      // $FlowFixMe[prop-missing]
       style[direction] = 0;
     }
   }

package/Libraries/Inspector/Inspector.js

@@ -18,7 +18,7 @@ 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');
+const Dimensions = require('../Utilities/Dimensions').default;
 const Platform = require('../Utilities/Platform');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 const InspectorOverlay = require('./InspectorOverlay');
@@ -142,12 +142,11 @@ class Inspector extends React.Component<
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      if (this.state.devtoolsAgent) {
+      const agent = this.state.devtoolsAgent;
+      if (agent) {
+        agent.selectNode(findNodeHandle(touchedViewTag));
         if (closestInstance != null) {
-          // Fabric
-          this.state.devtoolsAgent.selectNode(closestInstance);
-        } else if (touchedViewTag != null) {
-          this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+          agent.selectNode(closestInstance);
         }
       }