react-native 0.71.4 → 0.72.0-rc.0

package/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js

@@ -0,0 +1,179 @@
+/**
+ * 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 {Overlay} from './TraceUpdateOverlayNativeComponent';
+
+import UIManager from '../../ReactNative/UIManager';
+import processColor from '../../StyleSheet/processColor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
+import View from '../View/View';
+import TraceUpdateOverlayNativeComponent, {
+  Commands,
+} from './TraceUpdateOverlayNativeComponent';
+import * as React from 'react';
+
+type AgentEvents = {
+  drawTraceUpdates: [Array<{node: TraceNode, color: string}>],
+  disableTraceUpdates: [],
+};
+
+interface Agent {
+  addListener<Event: $Keys<AgentEvents>>(
+    event: Event,
+    listener: (...AgentEvents[Event]) => void,
+  ): void;
+  removeListener(event: $Keys<AgentEvents>, listener: () => void): void;
+}
+
+type TraceNode = {
+  publicInstance?: TraceNode,
+  // TODO: remove this field when syncing the new version of the renderer from React to React Native.
+  canonical?: TraceNode,
+  measure?: (
+    (
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      left: number,
+      top: number,
+    ) => void,
+  ) => void,
+};
+
+type ReactDevToolsGlobalHook = {
+  on: (eventName: string, (agent: Agent) => void) => void,
+  off: (eventName: string, (agent: Agent) => void) => void,
+  reactDevtoolsAgent: Agent,
+};
+
+const {useEffect, useRef, useState} = React;
+const hook: ReactDevToolsGlobalHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+const isNativeComponentReady =
+  Platform.OS === 'android' &&
+  UIManager.hasViewManagerConfig('TraceUpdateOverlay');
+let devToolsAgent: ?Agent;
+
+export default function TraceUpdateOverlay(): React.Node {
+  const [overlayDisabled, setOverlayDisabled] = useState(false);
+  // This effect is designed to be explicitly shown here to avoid re-subscribe from the same
+  // overlay component.
+  useEffect(() => {
+    if (!isNativeComponentReady) {
+      return;
+    }
+
+    function attachToDevtools(agent: Agent) {
+      devToolsAgent = agent;
+      agent.addListener('drawTraceUpdates', onAgentDrawTraceUpdates);
+      agent.addListener('disableTraceUpdates', onAgentDisableTraceUpdates);
+    }
+
+    function subscribe() {
+      hook?.on('react-devtools', attachToDevtools);
+      if (hook?.reactDevtoolsAgent) {
+        attachToDevtools(hook.reactDevtoolsAgent);
+      }
+    }
+
+    function unsubscribe() {
+      hook?.off('react-devtools', attachToDevtools);
+      const agent = devToolsAgent;
+      if (agent != null) {
+        agent.removeListener('drawTraceUpdates', onAgentDrawTraceUpdates);
+        agent.removeListener('disableTraceUpdates', onAgentDisableTraceUpdates);
+        devToolsAgent = null;
+      }
+    }
+
+    function onAgentDrawTraceUpdates(
+      nodesToDraw: Array<{node: TraceNode, color: string}> = [],
+    ) {
+      // If overlay is disabled before, now it's enabled.
+      setOverlayDisabled(false);
+
+      const newFramesToDraw: Array<Promise<Overlay>> = [];
+      nodesToDraw.forEach(({node, color}) => {
+        // `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;
+        }
+        const frameToDrawPromise = new Promise<Overlay>(resolve => {
+          // The if statement here is to make flow happy
+          if (component.measure) {
+            // TODO(T145522797): We should refactor this to use `getBoundingClientRect` when Paper is no longer supported.
+            component.measure((x, y, width, height, left, top) => {
+              resolve({
+                rect: {left, top, width, height},
+                color: processColor(color),
+              });
+            });
+          }
+        });
+        newFramesToDraw.push(frameToDrawPromise);
+      });
+      Promise.all(newFramesToDraw).then(
+        results => {
+          if (nativeComponentRef.current != null) {
+            Commands.draw(
+              nativeComponentRef.current,
+              JSON.stringify(
+                results.filter(
+                  ({rect, color}) => rect.width >= 0 && rect.height >= 0,
+                ),
+              ),
+            );
+          }
+        },
+        err => {
+          console.error(`Failed to measure updated traces. Error: ${err}`);
+        },
+      );
+    }
+
+    function onAgentDisableTraceUpdates() {
+      // When trace updates are disabled from the backend, we won't receive draw events until it's enabled by the next draw. We can safely remove the overlay as it's not needed now.
+      setOverlayDisabled(true);
+    }
+
+    subscribe();
+    return unsubscribe;
+  }, []); // Only run once when the overlay initially rendered
+
+  const nativeComponentRef =
+    useRef<?React.ElementRef<typeof TraceUpdateOverlayNativeComponent>>(null);
+
+  return (
+    !overlayDisabled &&
+    isNativeComponentReady && (
+      <View pointerEvents="none" style={styles.overlay}>
+        <TraceUpdateOverlayNativeComponent
+          ref={nativeComponentRef}
+          style={styles.overlay}
+        />
+      </View>
+    )
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlayNativeComponent.js

@@ -0,0 +1,43 @@
+/**
+ * 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 {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
+import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
+import * as React from 'react';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+|}>;
+export type TraceUpdateOverlayNativeComponentType = HostComponent<NativeProps>;
+export type Overlay = {
+  rect: {left: number, top: number, width: number, height: number},
+  color: ?ProcessedColorValue,
+};
+
+interface NativeCommands {
+  +draw: (
+    viewRef: React.ElementRef<TraceUpdateOverlayNativeComponentType>,
+    // TODO(T144046177): Ideally we can pass array of Overlay, but currently
+    // Array type is not supported in RN codegen for building native commands.
+    overlays: string,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['draw'],
+});
+
+export default (codegenNativeComponent<NativeProps>(
+  'TraceUpdateOverlay',
+): HostComponent<NativeProps>);

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -46,12 +46,25 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   flexWrap: true,
   gap: true,
   height: true,
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
   justifyContent: true,
   left: true,
   margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
   marginEnd: true,
   marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
   marginRight: true,
   marginStart: true,
@@ -63,9 +76,15 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   minWidth: true,
   overflow: true,
   padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
   paddingEnd: true,
   paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
   paddingRight: true,
   paddingStart: true,
@@ -98,6 +117,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    */
   backfaceVisibility: true,
   backgroundColor: colorAttributes,
+  borderBlockColor: colorAttributes,
+  borderBlockEndColor: colorAttributes,
+  borderBlockStartColor: colorAttributes,
   borderBottomColor: colorAttributes,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
@@ -106,10 +128,14 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderColor: colorAttributes,
   borderCurve: true,
   borderEndColor: colorAttributes,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
   borderLeftColor: colorAttributes,
   borderRadius: true,
   borderRightColor: colorAttributes,
   borderStartColor: colorAttributes,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   borderStyle: true,
   borderTopColor: colorAttributes,
   borderTopEndRadius: true,

package/Libraries/Components/View/View.js

@@ -57,7 +57,6 @@ const View: React.AbstractComponent<
       nativeID,
       pointerEvents,
       role,
-      style,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -66,23 +65,43 @@ const View: React.AbstractComponent<
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 
-    const _accessibilityState = {
-      busy: ariaBusy ?? accessibilityState?.busy,
-      checked: ariaChecked ?? accessibilityState?.checked,
-      disabled: ariaDisabled ?? accessibilityState?.disabled,
-      expanded: ariaExpanded ?? accessibilityState?.expanded,
-      selected: ariaSelected ?? accessibilityState?.selected,
-    };
+    let _accessibilityState;
+    if (
+      accessibilityState != null ||
+      ariaBusy != null ||
+      ariaChecked != null ||
+      ariaDisabled != null ||
+      ariaExpanded != null ||
+      ariaSelected != null
+    ) {
+      _accessibilityState = {
+        busy: ariaBusy ?? accessibilityState?.busy,
+        checked: ariaChecked ?? accessibilityState?.checked,
+        disabled: ariaDisabled ?? accessibilityState?.disabled,
+        expanded: ariaExpanded ?? accessibilityState?.expanded,
+        selected: ariaSelected ?? accessibilityState?.selected,
+      };
+    }
+    let _accessibilityValue;
+    if (
+      accessibilityValue != null ||
+      ariaValueMax != null ||
+      ariaValueMin != null ||
+      ariaValueNow != null ||
+      ariaValueText != null
+    ) {
+      _accessibilityValue = {
+        max: ariaValueMax ?? accessibilityValue?.max,
+        min: ariaValueMin ?? accessibilityValue?.min,
+        now: ariaValueNow ?? accessibilityValue?.now,
+        text: ariaValueText ?? accessibilityValue?.text,
+      };
+    }
 
-    const _accessibilityValue = {
-      max: ariaValueMax ?? accessibilityValue?.max,
-      min: ariaValueMin ?? accessibilityValue?.min,
-      now: ariaValueNow ?? accessibilityValue?.now,
-      text: ariaValueText ?? accessibilityValue?.text,
-    };
+    // $FlowFixMe[underconstrained-implicit-instantiation]
+    let style = flattenStyle(otherProps.style);
 
-    const flattenedStyle = flattenStyle(style);
-    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+    const newPointerEvents = style?.pointerEvents || pointerEvents;
 
     return (
       <TextAncestor.Provider value={false}>

package/Libraries/Components/View/ViewAccessibility.d.ts

@@ -75,10 +75,10 @@ export interface AccessibilityProps
    */
   accessibilityValue?: AccessibilityValue | undefined;
 
-  'aria-valuemax'?: AccessibilityValue['max'];
-  'aria-valuemin'?: AccessibilityValue['min'];
-  'aria-valuenow'?: AccessibilityValue['now'];
-  'aria-valuetext'?: AccessibilityValue['text'];
+  'aria-valuemax'?: AccessibilityValue['max'] | undefined;
+  'aria-valuemin'?: AccessibilityValue['min'] | undefined;
+  'aria-valuenow'?: AccessibilityValue['now'] | undefined;
+  'aria-valuetext'?: AccessibilityValue['text'] | undefined;
   /**
    * When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.
    */
@@ -105,7 +105,7 @@ export interface AccessibilityProps
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */
-  role?: Role;
+  role?: Role | undefined;
 }
 
 export type AccessibilityActionInfo = Readonly<{
@@ -274,7 +274,7 @@ export interface AccessibilityPropsIOS {
   accessibilityViewIsModal?: boolean | undefined;
 
   /**
-   * When accessibile is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).
+   * When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).
    * @platform ios
    */
   onAccessibilityEscape?: (() => void) | undefined;

package/Libraries/Components/View/ViewAccessibility.js

@@ -16,6 +16,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 export type AccessibilityRole =
   | 'none'
   | 'button'
+  | 'dropdownlist'
   | 'togglebutton'
   | 'link'
   | 'search'
@@ -44,7 +45,15 @@ export type AccessibilityRole =
   | 'timer'
   | 'list'
   | 'toolbar'
-  | 'grid';
+  | 'grid'
+  | 'pager'
+  | 'scrollview'
+  | 'horizontalscrollview'
+  | 'viewgroup'
+  | 'webview'
+  | 'drawerlayout'
+  | 'slidingdrawer'
+  | 'iconmenu';
 
 // Role types for web
 export type Role =

package/Libraries/Components/View/ViewNativeComponent.js

@@ -45,7 +45,10 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderTopEndRadius: true,
           borderBottomStartRadius: true,
           borderBottomEndRadius: true,
-
+          borderEndEndRadius: true,
+          borderEndStartRadius: true,
+          borderStartEndRadius: true,
+          borderStartStartRadius: true,
           borderStyle: true,
           hitSlop: true,
           pointerEvents: true,
@@ -61,15 +64,36 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderStartWidth: true,
           borderEndWidth: true,
 
-          borderColor: {process: require('../../StyleSheet/processColor')},
-          borderLeftColor: {process: require('../../StyleSheet/processColor')},
-          borderRightColor: {process: require('../../StyleSheet/processColor')},
-          borderTopColor: {process: require('../../StyleSheet/processColor')},
+          borderColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderLeftColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderRightColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderTopColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           borderBottomColor: {
-            process: require('../../StyleSheet/processColor'),
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderStartColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderEndColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderBlockColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderBlockEndColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderBlockStartColor: {
+            process: require('../../StyleSheet/processColor').default,
           },
-          borderStartColor: {process: require('../../StyleSheet/processColor')},
-          borderEndColor: {process: require('../../StyleSheet/processColor')},
 
           focusable: true,
           overflow: true,

package/Libraries/Components/View/ViewPropTypes.d.ts

@@ -173,7 +173,7 @@ export interface ViewProps
     Touchable,
     PointerEvents,
     AccessibilityProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /**
    * This defines how far a touch event can start away from the view.
    * Typical interface guidelines recommend touch targets that are at least

package/Libraries/Components/View/ViewPropTypes.js

@@ -543,7 +543,7 @@ export type ViewProps = $ReadOnly<{|
   'aria-hidden'?: ?boolean,
 
   /**
-   * It reperesents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
+   * It represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
    *
    * @platform android
    */

package/Libraries/Core/Devtools/openFileInEditor.js

@@ -13,6 +13,7 @@
 const getDevServer = require('./getDevServer');
 
 function openFileInEditor(file: string, lineNumber: number) {
+  // $FlowFixMe[unused-promise]
   fetch(getDevServer().url + 'open-stack-frame', {
     method: 'POST',
     headers: {

package/Libraries/Core/Devtools/openURLInBrowser.js

@@ -13,6 +13,7 @@
 const getDevServer = require('./getDevServer');
 
 function openURLInBrowser(url: string) {
+  // $FlowFixMe[unused-promise]
   fetch(getDevServer().url + 'open-url', {
     method: 'POST',
     body: JSON.stringify({url}),

package/Libraries/Core/Devtools/parseErrorStack.js

@@ -22,7 +22,7 @@ function convertHermesStack(stack: HermesParsedStack): Array<StackFrame> {
       continue;
     }
     const {location, functionName} = entry;
-    if (location.type === 'NATIVE') {
+    if (location.type === 'NATIVE' || location.type === 'INTERNAL_BYTECODE') {
       continue;
     }
     frames.push({
@@ -48,7 +48,7 @@ function parseErrorStack(errorStack?: string): Array<StackFrame> {
     ? errorStack
     : global.HermesInternal
     ? convertHermesStack(parseHermesStack(errorStack))
-    : stacktraceParser.parse(errorStack).map(frame => ({
+    : stacktraceParser.parse(errorStack).map((frame): StackFrame => ({
         ...frame,
         column: frame.column != null ? frame.column - 1 : null,
       }));

package/Libraries/Core/Devtools/parseHermesStack.js

@@ -10,46 +10,54 @@
 
 'use strict';
 
-type HermesStackLocationNative = {|
-  +type: 'NATIVE',
-|};
+type HermesStackLocationNative = $ReadOnly<{
+  type: 'NATIVE',
+}>;
 
-type HermesStackLocationSource = {|
-  +type: 'SOURCE',
-  +sourceUrl: string,
-  +line1Based: number,
-  +column1Based: number,
-|};
+type HermesStackLocationSource = $ReadOnly<{
+  type: 'SOURCE',
+  sourceUrl: string,
+  line1Based: number,
+  column1Based: number,
+}>;
 
-type HermesStackLocationBytecode = {|
-  +type: 'BYTECODE',
-  +sourceUrl: string,
-  +line1Based: number,
-  +virtualOffset0Based: number,
-|};
+type HermesStackLocationInternalBytecode = $ReadOnly<{
+  type: 'INTERNAL_BYTECODE',
+  sourceUrl: string,
+  line1Based: number,
+  virtualOffset0Based: number,
+}>;
+
+type HermesStackLocationBytecode = $ReadOnly<{
+  type: 'BYTECODE',
+  sourceUrl: string,
+  line1Based: number,
+  virtualOffset0Based: number,
+}>;
 
 type HermesStackLocation =
   | HermesStackLocationNative
   | HermesStackLocationSource
+  | HermesStackLocationInternalBytecode
   | HermesStackLocationBytecode;
 
-type HermesStackEntryFrame = {|
-  +type: 'FRAME',
-  +location: HermesStackLocation,
-  +functionName: string,
-|};
+type HermesStackEntryFrame = $ReadOnly<{
+  type: 'FRAME',
+  location: HermesStackLocation,
+  functionName: string,
+}>;
 
-type HermesStackEntrySkipped = {|
-  +type: 'SKIPPED',
-  +count: number,
-|};
+type HermesStackEntrySkipped = $ReadOnly<{
+  type: 'SKIPPED',
+  count: number,
+}>;
 
 type HermesStackEntry = HermesStackEntryFrame | HermesStackEntrySkipped;
 
-export type HermesParsedStack = {|
-  +message: string,
-  +entries: $ReadOnlyArray<HermesStackEntry>,
-|};
+export type HermesParsedStack = $ReadOnly<{
+  message: string,
+  entries: $ReadOnlyArray<HermesStackEntry>,
+}>;
 
 // Capturing groups:
 // 1. function name
@@ -65,6 +73,11 @@ const RE_FRAME =
 // 1. count of skipped frames
 const RE_SKIPPED = /^ {4}... skipping (\d+) frames$/;
 
+function isInternalBytecodeSourceUrl(sourceUrl: string): boolean {
+  // See https://github.com/facebook/hermes/blob/3332fa020cae0bab751f648db7c94e1d687eeec7/lib/VM/Runtime.cpp#L1100
+  return sourceUrl === 'InternalBytecode.js';
+}
+
 function parseLine(line: string): ?HermesStackEntry {
   const asFrame = line.match(RE_FRAME);
   if (asFrame) {
@@ -75,12 +88,19 @@ function parseLine(line: string): ?HermesStackEntry {
         asFrame[2] === 'native'
           ? {type: 'NATIVE'}
           : asFrame[3] === 'address at '
-          ? {
-              type: 'BYTECODE',
-              sourceUrl: asFrame[4],
-              line1Based: Number.parseInt(asFrame[5], 10),
-              virtualOffset0Based: Number.parseInt(asFrame[6], 10),
-            }
+          ? isInternalBytecodeSourceUrl(asFrame[4])
+            ? {
+                type: 'INTERNAL_BYTECODE',
+                sourceUrl: asFrame[4],
+                line1Based: Number.parseInt(asFrame[5], 10),
+                virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+              }
+            : {
+                type: 'BYTECODE',
+                sourceUrl: asFrame[4],
+                line1Based: Number.parseInt(asFrame[5], 10),
+                virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+              }
           : {
               type: 'SOURCE',
               sourceUrl: asFrame[4],

package/Libraries/Core/ExceptionsManager.js

@@ -103,7 +103,7 @@ function reportException(
   }
 
   if (__DEV__) {
-    const LogBox = require('../LogBox/LogBox');
+    const LogBox = require('../LogBox/LogBox').default;
     LogBox.addException({
       ...data,
       isComponentError: !!e.isComponentError,
@@ -184,7 +184,7 @@ function reactConsoleErrorHandler(...args) {
     // Throwing an uncaught exception:
     // 1. exception thrown
     // 2. picked up by handleException
-    // 3. should be send to console.error (not console._errorOriginal, as DevTools might have patched _later_ and it needs to send it to Metro)
+    // 3. should be sent to console.error (not console._errorOriginal, as DevTools might have patched _later_ and it needs to send it to Metro)
     // 4. that _might_ bubble again to the `reactConsoleErrorHandle` defined here
     //    -> should not handle exception _again_, to avoid looping / showing twice (this code branch)
     // 5. should still bubble up to original console (which might either be console.log, or the DevTools handler in case that one patched _earlier_)