@office-iss/react-native-win32 0.84.0 → 0.85.0-preview.1

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -24,7 +24,48 @@ import processTransform from '../../StyleSheet/processTransform';
 import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
-const colorAttributes = {process: processColor};
+const nativeCSSParsing = ReactNativeFeatureFlags.enableNativeCSSParsing();
+
+/**
+ * Gated style attribute types. When native CSS parsing is enabled, the JS
+ * processor is bypassed and the raw value is sent directly to native.
+ * These are exported so that other ViewConfigs can reuse them.
+ */
+export const colorAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processColor};
+
+export const filterAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processFilter};
+
+export const boxShadowAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBoxShadow};
+
+export const backgroundImageAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundImage};
+
+export const backgroundSizeAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundSize};
+
+export const backgroundPositionAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundPosition};
+
+export const backgroundRepeatAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundRepeat};
+
+export const transformAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processTransform};
+
+export const transformOriginAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processTransformOrigin};
 
 const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
@@ -111,7 +152,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    * Shadow
    */
   elevation: true,
-  shadowColor: colorAttributes,
+  shadowColor: colorAttribute,
   shadowOffset: {diff: sizesDiffer},
   shadowOpacity: true,
   shadowRadius: true,
@@ -119,15 +160,13 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Transform
    */
-  transform: {process: processTransform},
-  transformOrigin: {process: processTransformOrigin},
+  transform: transformAttribute,
+  transformOrigin: transformOriginAttribute,
 
   /**
    * Filter
    */
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processFilter},
+  filter: filterAttribute,
 
   /**
    * MixBlendMode
@@ -142,63 +181,61 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processBoxShadow},
+  boxShadow: boxShadowAttribute,
 
   /**
    * BackgroundImage
    */
-  experimental_backgroundImage: {process: processBackgroundImage},
+  experimental_backgroundImage: backgroundImageAttribute,
 
   /**
    * BackgroundSize
    */
-  experimental_backgroundSize: {process: processBackgroundSize},
+  experimental_backgroundSize: backgroundSizeAttribute,
 
   /**
    * BackgroundPosition
    */
-  experimental_backgroundPosition: {process: processBackgroundPosition},
+  experimental_backgroundPosition: backgroundPositionAttribute,
 
   /**
    * BackgroundRepeat
    */
-  experimental_backgroundRepeat: {process: processBackgroundRepeat},
+  experimental_backgroundRepeat: backgroundRepeatAttribute,
 
   /**
    * View
    */
   backfaceVisibility: true,
-  backgroundColor: colorAttributes,
-  borderBlockColor: colorAttributes,
-  borderBlockEndColor: colorAttributes,
-  borderBlockStartColor: colorAttributes,
-  borderBottomColor: colorAttributes,
+  backgroundColor: colorAttribute,
+  borderBlockColor: colorAttribute,
+  borderBlockEndColor: colorAttribute,
+  borderBlockStartColor: colorAttribute,
+  borderBottomColor: colorAttribute,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
-  borderColor: colorAttributes,
+  borderColor: colorAttribute,
   borderCurve: true,
-  borderEndColor: colorAttributes,
+  borderEndColor: colorAttribute,
   borderEndEndRadius: true,
   borderEndStartRadius: true,
-  borderLeftColor: colorAttributes,
+  borderLeftColor: colorAttribute,
   borderRadius: true,
-  borderRightColor: colorAttributes,
-  borderStartColor: colorAttributes,
+  borderRightColor: colorAttribute,
+  borderStartColor: colorAttribute,
   borderStartEndRadius: true,
   borderStartStartRadius: true,
   borderStyle: true,
-  borderTopColor: colorAttributes,
+  borderTopColor: colorAttribute,
   borderTopEndRadius: true,
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
   cursor: true,
   opacity: true,
-  outlineColor: colorAttributes,
+  outlineColor: colorAttribute,
   outlineOffset: true,
   outlineStyle: true,
   outlineWidth: true,
@@ -207,7 +244,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Text
    */
-  color: colorAttributes,
+  color: colorAttribute,
   fontFamily: true,
   fontSize: true,
   fontStyle: true,
@@ -218,10 +255,10 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   lineHeight: true,
   textAlign: true,
   textAlignVertical: true,
-  textDecorationColor: colorAttributes,
+  textDecorationColor: colorAttribute,
   textDecorationLine: true,
   textDecorationStyle: true,
-  textShadowColor: colorAttributes,
+  textShadowColor: colorAttribute,
   textShadowOffset: true,
   textShadowRadius: true,
   textTransform: true,
@@ -232,9 +269,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Image
    */
-  overlayColor: colorAttributes,
+  overlayColor: colorAttribute,
   resizeMode: true,
-  tintColor: colorAttributes,
+  tintColor: colorAttribute,
   objectFit: true,
 };
 

package/Libraries/Components/View/ViewAccessibility.js

@@ -154,7 +154,7 @@ export type AccessibilityActionName =
   | 'escape';
 
 // the info associated with an accessibility action
-export type AccessibilityActionInfo = $ReadOnly<{
+export type AccessibilityActionInfo = Readonly<{
   name: AccessibilityActionName | string,
   label?: string,
   ...
@@ -162,7 +162,7 @@ export type AccessibilityActionInfo = $ReadOnly<{
 
 // The info included in the event sent to onAccessibilityAction
 export type AccessibilityActionEvent = NativeSyntheticEvent<
-  $ReadOnly<{actionName: string, ...}>,
+  Readonly<{actionName: string, ...}>,
 >;
 
 export type AccessibilityState = {
@@ -189,7 +189,7 @@ export type AccessibilityState = {
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{
+export type AccessibilityValue = Readonly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -211,7 +211,7 @@ export type AccessibilityValue = $ReadOnly<{
   text?: Stringish,
 }>;
 
-export type AccessibilityPropsAndroid = $ReadOnly<{
+export type AccessibilityPropsAndroid = Readonly<{
   /**
    * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
    * the text is read aloud. The value should should match the nativeID of the related element.
@@ -268,7 +268,7 @@ export type AccessibilityPropsAndroid = $ReadOnly<{
   screenReaderFocusable?: boolean,
 }>;
 
-export type AccessibilityPropsIOS = $ReadOnly<{
+export type AccessibilityPropsIOS = Readonly<{
   /**
    * Prevents view from being inverted if set to true and color inversion is turned on.
    *
@@ -338,7 +338,7 @@ export type AccessibilityPropsIOS = $ReadOnly<{
   accessibilityRespondsToUserInteraction?: ?boolean,
 }>;
 
-export type AccessibilityProps = $ReadOnly<{
+export type AccessibilityProps = Readonly<{
   ...AccessibilityPropsAndroid,
   ...AccessibilityPropsIOS,
   /**
@@ -403,7 +403,7 @@ export type AccessibilityProps = $ReadOnly<{
    * Provides an array of custom actions available for accessibility.
    *
    */
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityActions?: ?ReadonlyArray<AccessibilityActionInfo>,
 
   /**
    * alias for accessibilityState

package/Libraries/Components/View/ViewAccessibility.win32.js

@@ -165,7 +165,7 @@ export type AccessibilityActionName =
   | 'escape';
 
 // the info associated with an accessibility action
-export type AccessibilityActionInfo = $ReadOnly<{
+export type AccessibilityActionInfo = Readonly<{
   name: AccessibilityActionName | string,
   label?: string,
   ...
@@ -173,7 +173,7 @@ export type AccessibilityActionInfo = $ReadOnly<{
 
 // The info included in the event sent to onAccessibilityAction
 export type AccessibilityActionEvent = NativeSyntheticEvent<
-  $ReadOnly<{actionName: string, ...}>,
+  Readonly<{actionName: string, ...}>,
 >;
 
 export type AccessibilityState = {
@@ -202,7 +202,7 @@ export type AccessibilityState = {
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{
+export type AccessibilityValue = Readonly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -224,7 +224,7 @@ export type AccessibilityValue = $ReadOnly<{
   text?: Stringish,
 }>;
 
-export type AccessibilityPropsAndroid = $ReadOnly<{
+export type AccessibilityPropsAndroid = Readonly<{
   /**
    * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
    * the text is read aloud. The value should should match the nativeID of the related element.
@@ -273,7 +273,7 @@ export type AccessibilityPropsAndroid = $ReadOnly<{
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
 }>;
 
-export type AccessibilityPropsIOS = $ReadOnly<{
+export type AccessibilityPropsIOS = Readonly<{
   /**
    * Prevents view from being inverted if set to true and color inversion is turned on.
    *
@@ -335,7 +335,7 @@ export type AccessibilityPropsIOS = $ReadOnly<{
   accessibilityLanguage?: ?Stringish,
 }>;
 
-export type AccessibilityProps = $ReadOnly<{
+export type AccessibilityProps = Readonly<{
   ...AccessibilityPropsAndroid,
   ...AccessibilityPropsIOS,
   /**
@@ -400,7 +400,7 @@ export type AccessibilityProps = $ReadOnly<{
    * Provides an array of custom actions available for accessibility.
    *
    */
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityActions?: ?ReadonlyArray<AccessibilityActionInfo>,
 
   /**
    * alias for accessibilityState

package/Libraries/Components/View/ViewPropTypes.js

@@ -33,7 +33,7 @@ import * as React from 'react';
 export type ViewLayout = LayoutRectangle;
 export type ViewLayoutEvent = LayoutChangeEvent;
 
-type DirectEventProps = $ReadOnly<{
+type DirectEventProps = Readonly<{
   /**
    * When `accessible` is true, the system will try to invoke this function
    * when the user performs an accessibility custom action.
@@ -79,13 +79,13 @@ type DirectEventProps = $ReadOnly<{
   onAccessibilityEscape?: ?() => unknown,
 }>;
 
-type MouseEventProps = $ReadOnly<{
+type MouseEventProps = Readonly<{
   onMouseEnter?: ?(event: MouseEvent) => void,
   onMouseLeave?: ?(event: MouseEvent) => void,
 }>;
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
-type PointerEventProps = $ReadOnly<{
+type PointerEventProps = Readonly<{
   onClick?: ?(event: PointerEvent) => void,
   onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,
@@ -110,21 +110,21 @@ type PointerEventProps = $ReadOnly<{
   onLostPointerCaptureCapture?: ?(e: PointerEvent) => void,
 }>;
 
-type FocusEventProps = $ReadOnly<{
+type FocusEventProps = Readonly<{
   onBlur?: ?(event: BlurEvent) => void,
   onBlurCapture?: ?(event: BlurEvent) => void,
   onFocus?: ?(event: FocusEvent) => void,
   onFocusCapture?: ?(event: FocusEvent) => void,
 }>;
 
-type KeyEventProps = $ReadOnly<{
+type KeyEventProps = Readonly<{
   onKeyDown?: ?(event: KeyDownEvent) => void,
   onKeyDownCapture?: ?(event: KeyDownEvent) => void,
   onKeyUp?: ?(event: KeyUpEvent) => void,
   onKeyUpCapture?: ?(event: KeyUpEvent) => void,
 }>;
 
-type TouchEventProps = $ReadOnly<{
+type TouchEventProps = Readonly<{
   onTouchCancel?: ?(e: GestureResponderEvent) => void,
   onTouchCancelCapture?: ?(e: GestureResponderEvent) => void,
   onTouchEnd?: ?(e: GestureResponderEvent) => void,
@@ -140,7 +140,7 @@ type TouchEventProps = $ReadOnly<{
  * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,
  * `ScrollResponder.js` and `ResponderEventPlugin.js` for more discussion.
  */
-export type GestureResponderHandlers = $ReadOnly<{
+export type GestureResponderHandlers = Readonly<{
   /**
    * Does this view want to "claim" touch responsiveness? This is called for
    * every touch move on the `View` when it is not the responder.
@@ -257,12 +257,12 @@ export type GestureResponderHandlers = $ReadOnly<{
   onStartShouldSetResponderCapture?: ?(e: GestureResponderEvent) => boolean,
 }>;
 
-type AndroidDrawableThemeAttr = $ReadOnly<{
+type AndroidDrawableThemeAttr = Readonly<{
   type: 'ThemeAttrAndroid',
   attribute: string,
 }>;
 
-type AndroidDrawableRipple = $ReadOnly<{
+type AndroidDrawableRipple = Readonly<{
   type: 'RippleAndroid',
   color?: ?number,
   borderless?: ?boolean,
@@ -271,7 +271,7 @@ type AndroidDrawableRipple = $ReadOnly<{
 
 type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
 
-export type ViewPropsAndroid = $ReadOnly<{
+export type ViewPropsAndroid = Readonly<{
   nativeBackgroundAndroid?: ?AndroidDrawable,
   nativeForegroundAndroid?: ?AndroidDrawable,
 
@@ -356,7 +356,7 @@ export type ViewPropsAndroid = $ReadOnly<{
   onClick?: ?(event: GestureResponderEvent) => unknown,
 }>;
 
-export type TVViewPropsIOS = $ReadOnly<{
+export type TVViewPropsIOS = Readonly<{
   /**
    * *(Apple TV only)* When set to true, this view will be focusable
    * and navigable using the Apple TV remote.
@@ -401,7 +401,7 @@ export type TVViewPropsIOS = $ReadOnly<{
   tvParallaxMagnification?: number,
 }>;
 
-export type ViewPropsIOS = $ReadOnly<{
+export type ViewPropsIOS = Readonly<{
   /**
    * Whether this `View` should be rendered as a bitmap before compositing.
    *
@@ -412,7 +412,7 @@ export type ViewPropsIOS = $ReadOnly<{
   shouldRasterizeIOS?: ?boolean,
 }>;
 
-type ViewBaseProps = $ReadOnly<{
+type ViewBaseProps = Readonly<{
   children?: React.Node,
   style?: ?ViewStyleProp,
 
@@ -508,7 +508,7 @@ type ViewBaseProps = $ReadOnly<{
   experimental_accessibilityOrder?: ?Array<string>,
 }>;
 
-export type ViewProps = $ReadOnly<{
+export type ViewProps = Readonly<{
   ...DirectEventProps,
   ...GestureResponderHandlers,
   ...MouseEventProps,

package/Libraries/Components/View/ViewPropTypes.win32.js

@@ -34,7 +34,7 @@ import * as React from 'react';
 export type ViewLayout = LayoutRectangle;
 export type ViewLayoutEvent = LayoutChangeEvent;
 
-type DirectEventProps = $ReadOnly<{
+type DirectEventProps = Readonly<{
   /**
    * When `accessible` is true, the system will try to invoke this function
    * when the user performs an accessibility custom action.
@@ -80,13 +80,13 @@ type DirectEventProps = $ReadOnly<{
   onAccessibilityEscape?: ?() => unknown,
 }>;
 
-type MouseEventProps = $ReadOnly<{
+type MouseEventProps = Readonly<{
   onMouseEnter?: ?(event: MouseEvent) => void,
   onMouseLeave?: ?(event: MouseEvent) => void,
 }>;
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
-type PointerEventProps = $ReadOnly<{
+type PointerEventProps = Readonly<{
   onClick?: ?(event: PointerEvent) => void,
   onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,
@@ -111,21 +111,21 @@ type PointerEventProps = $ReadOnly<{
   onLostPointerCaptureCapture?: ?(e: PointerEvent) => void,
 }>;
 
-type FocusEventProps = $ReadOnly<{
+type FocusEventProps = Readonly<{
   onBlur?: ?(event: BlurEvent) => void,
   onBlurCapture?: ?(event: BlurEvent) => void,
   onFocus?: ?(event: FocusEvent) => void,
   onFocusCapture?: ?(event: FocusEvent) => void,
 }>;
 
-type KeyEventProps = $ReadOnly<{
+type KeyEventProps = Readonly<{
   onKeyDown?: ?(event: KeyDownEvent) => void,
   onKeyDownCapture?: ?(event: KeyDownEvent) => void,
   onKeyUp?: ?(event: KeyUpEvent) => void,
   onKeyUpCapture?: ?(event: KeyUpEvent) => void,
 }>;
 
-type TouchEventProps = $ReadOnly<{
+type TouchEventProps = Readonly<{
   onTouchCancel?: ?(e: GestureResponderEvent) => void,
   onTouchCancelCapture?: ?(e: GestureResponderEvent) => void,
   onTouchEnd?: ?(e: GestureResponderEvent) => void,
@@ -141,7 +141,7 @@ type TouchEventProps = $ReadOnly<{
  * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,
  * `ScrollResponder.js` and `ResponderEventPlugin.js` for more discussion.
  */
-export type GestureResponderHandlers = $ReadOnly<{
+export type GestureResponderHandlers = Readonly<{
   /**
    * Does this view want to "claim" touch responsiveness? This is called for
    * every touch move on the `View` when it is not the responder.
@@ -258,12 +258,12 @@ export type GestureResponderHandlers = $ReadOnly<{
   onStartShouldSetResponderCapture?: ?(e: GestureResponderEvent) => boolean,
 }>;
 
-type AndroidDrawableThemeAttr = $ReadOnly<{
+type AndroidDrawableThemeAttr = Readonly<{
   type: 'ThemeAttrAndroid',
   attribute: string,
 }>;
 
-type AndroidDrawableRipple = $ReadOnly<{
+type AndroidDrawableRipple = Readonly<{
   type: 'RippleAndroid',
   color?: ?number,
   borderless?: ?boolean,
@@ -272,7 +272,7 @@ type AndroidDrawableRipple = $ReadOnly<{
 
 type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
 
-export type ViewPropsAndroid = $ReadOnly<{
+export type ViewPropsAndroid = Readonly<{
   nativeBackgroundAndroid?: ?AndroidDrawable,
   nativeForegroundAndroid?: ?AndroidDrawable,
 
@@ -357,7 +357,7 @@ export type ViewPropsAndroid = $ReadOnly<{
   onClick?: ?(event: GestureResponderEvent) => unknown,
 }>;
 
-export type TVViewPropsIOS = $ReadOnly<{
+export type TVViewPropsIOS = Readonly<{
   /**
    * *(Apple TV only)* When set to true, this view will be focusable
    * and navigable using the Apple TV remote.
@@ -402,7 +402,7 @@ export type TVViewPropsIOS = $ReadOnly<{
   tvParallaxMagnification?: number,
 }>;
 
-export type ViewPropsIOS = $ReadOnly<{
+export type ViewPropsIOS = Readonly<{
   /**
    * Whether this `View` should be rendered as a bitmap before compositing.
    *
@@ -413,7 +413,7 @@ export type ViewPropsIOS = $ReadOnly<{
   shouldRasterizeIOS?: ?boolean,
 }>;
 
-type ViewBaseProps = $ReadOnly<{
+type ViewBaseProps = Readonly<{
   children?: React.Node,
   style?: ?ViewStyleProp,
 
@@ -533,7 +533,7 @@ type ViewBaseProps = $ReadOnly<{
 }>;
 
 // [Windows
-export type HandledKeyboardEvent = $ReadOnly<{|
+export type HandledKeyboardEvent = Readonly<{|
   altKey?: ?boolean,
   ctrlKey?: ?boolean,
   metaKey?: ?boolean,
@@ -542,7 +542,7 @@ export type HandledKeyboardEvent = $ReadOnly<{|
   handledEventPhase?: number,
 |}>;
 
-type ViewPropsWindows = $ReadOnly<{|
+type ViewPropsWindows = Readonly<{|
   /**
    * Key up event
    *
@@ -590,7 +590,7 @@ type ViewPropsWindows = $ReadOnly<{|
 |}>;
 // Windows]
 
-export type ViewProps = $ReadOnly<{
+export type ViewProps = Readonly<{
   ...DirectEventProps,
   ...GestureResponderHandlers,
   ...MouseEventProps,

package/Libraries/Core/Devtools/parseHermesStack.js

@@ -10,25 +10,25 @@
 
 'use strict';
 
-type HermesStackLocationNative = $ReadOnly<{
+type HermesStackLocationNative = Readonly<{
   type: 'NATIVE',
 }>;
 
-type HermesStackLocationSource = $ReadOnly<{
+type HermesStackLocationSource = Readonly<{
   type: 'SOURCE',
   sourceUrl: string,
   line1Based: number,
   column1Based: number,
 }>;
 
-type HermesStackLocationInternalBytecode = $ReadOnly<{
+type HermesStackLocationInternalBytecode = Readonly<{
   type: 'INTERNAL_BYTECODE',
   sourceUrl: string,
   line1Based: number,
   virtualOffset0Based: number,
 }>;
 
-type HermesStackLocationBytecode = $ReadOnly<{
+type HermesStackLocationBytecode = Readonly<{
   type: 'BYTECODE',
   sourceUrl: string,
   line1Based: number,
@@ -41,22 +41,22 @@ type HermesStackLocation =
   | HermesStackLocationInternalBytecode
   | HermesStackLocationBytecode;
 
-type HermesStackEntryFrame = $ReadOnly<{
+type HermesStackEntryFrame = Readonly<{
   type: 'FRAME',
   location: HermesStackLocation,
   functionName: string,
 }>;
 
-type HermesStackEntrySkipped = $ReadOnly<{
+type HermesStackEntrySkipped = Readonly<{
   type: 'SKIPPED',
   count: number,
 }>;
 
 type HermesStackEntry = HermesStackEntryFrame | HermesStackEntrySkipped;
 
-export type HermesParsedStack = $ReadOnly<{
+export type HermesParsedStack = Readonly<{
   message: string,
-  entries: $ReadOnlyArray<HermesStackEntry>,
+  entries: ReadonlyArray<HermesStackEntry>,
 }>;
 
 // Capturing groups:

package/Libraries/Core/Devtools/symbolicateStackTrace.js

@@ -14,7 +14,7 @@ import type {StackFrame} from '../NativeExceptionsManager';
 
 const getDevServer = require('./getDevServer').default;
 
-export type CodeFrame = $ReadOnly<{
+export type CodeFrame = Readonly<{
   content: string,
   location: ?{
     row: number,
@@ -24,7 +24,7 @@ export type CodeFrame = $ReadOnly<{
   fileName: string,
 }>;
 
-export type SymbolicatedStackTrace = $ReadOnly<{
+export type SymbolicatedStackTrace = Readonly<{
   stack: Array<StackFrame>,
   codeFrame: ?CodeFrame,
 }>;

package/Libraries/Core/ExceptionsManager.js

@@ -135,8 +135,8 @@ function reportException(
 }
 
 declare var console: {
-  error: (...data: $ReadOnlyArray<unknown>) => void,
-  _errorOriginal: (...data: $ReadOnlyArray<unknown>) => void,
+  error: (...data: ReadonlyArray<unknown>) => void,
+  _errorOriginal: (...data: ReadonlyArray<unknown>) => void,
   reportErrorsAsExceptions: boolean,
   ...
 };

package/Libraries/Core/ExtendedError.js

@@ -24,10 +24,10 @@ export type ExtendedError = Error &
       name: string,
       message: string,
       // $FlowFixMe[unclear-type]
-      stackElements?: $ReadOnlyArray<Object>,
+      stackElements?: ReadonlyArray<Object>,
       // $FlowFixMe[unclear-type]
-      stackSymbols?: $ReadOnlyArray<Object>,
+      stackSymbols?: ReadonlyArray<Object>,
       // $FlowFixMe[unclear-type]
-      stackReturnAddresses?: $ReadOnlyArray<Object>,
+      stackReturnAddresses?: ReadonlyArray<Object>,
     },
   };

package/Libraries/Core/RawEventEmitter.js

@@ -12,7 +12,7 @@ import type {IEventEmitter} from '../vendor/emitter/EventEmitter';
 
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
-export type RawEventEmitterEvent = $ReadOnly<{
+export type RawEventEmitterEvent = Readonly<{
   eventName: string,
   // We expect, but do not/cannot require, that nativeEvent is an object
   // with the properties: key, elementType (string), type (string), tag (numeric),