react-native-windows 0.84.0-preview.9 → 0.85.0-preview.1

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -19,7 +19,7 @@ import AnimatedObject from './AnimatedObject';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
-export type AnimatedStyleAllowlist = $ReadOnly<{[string]: true}>;
+export type AnimatedStyleAllowlist = Readonly<{[string]: true}>;
 
 type FlatStyle = {[string]: unknown};
 type FlatStyleForWeb<TStyle: FlatStyle> = [unknown, TStyle];
@@ -28,7 +28,7 @@ function createAnimatedStyle(
   flatStyle: FlatStyle,
   allowlist: ?AnimatedStyleAllowlist,
   keepUnanimatedValues: boolean,
-): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: unknown}] {
+): [ReadonlyArray<string>, ReadonlyArray<AnimatedNode>, {[string]: unknown}] {
   const nodeKeys: Array<string> = [];
   const nodes: Array<AnimatedNode> = [];
   const style: {[string]: unknown} = {};
@@ -83,8 +83,8 @@ function createAnimatedStyle(
 
 export default class AnimatedStyle extends AnimatedWithChildren {
   _originalStyleForWeb: ?unknown;
-  _nodeKeys: $ReadOnlyArray<string>;
-  _nodes: $ReadOnlyArray<AnimatedNode>;
+  _nodeKeys: ReadonlyArray<string>;
+  _nodes: ReadonlyArray<AnimatedNode>;
   _style: {[string]: unknown};
 
   /**
@@ -113,8 +113,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
   }
 
   constructor(
-    nodeKeys: $ReadOnlyArray<string>,
-    nodes: $ReadOnlyArray<AnimatedNode>,
+    nodeKeys: ReadonlyArray<string>,
+    nodes: ReadonlyArray<AnimatedNode>,
     style: {[string]: unknown},
     originalStyleForWeb: ?unknown,
     config?: ?AnimatedNodeConfig,
@@ -253,6 +253,6 @@ export default class AnimatedStyle extends AnimatedWithChildren {
 // this shim when they do.
 // $FlowFixMe[method-unbinding]
 const _hasOwnProp = Object.prototype.hasOwnProperty;
-const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+const hasOwn: (obj: Readonly<{...}>, prop: string) => boolean =
   // $FlowFixMe[method-unbinding]
   Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -23,12 +23,12 @@ type Transform<T = AnimatedNode> = {
     | number
     | string
     | T
-    | $ReadOnlyArray<number | string | T>
+    | ReadonlyArray<number | string | T>
     | {[string]: number | string | T},
 };
 
 function flatAnimatedNodes(
-  transforms: $ReadOnlyArray<Transform<>>,
+  transforms: ReadonlyArray<Transform<>>,
 ): Array<AnimatedNode> {
   const nodes = [];
   for (let ii = 0, length = transforms.length; ii < length; ii++) {
@@ -47,15 +47,15 @@ function flatAnimatedNodes(
 export default class AnimatedTransform extends AnimatedWithChildren {
   // NOTE: For potentially historical reasons, some operations only operate on
   // the first level of AnimatedNode instances. This optimizes that bevavior.
-  _nodes: $ReadOnlyArray<AnimatedNode>;
+  _nodes: ReadonlyArray<AnimatedNode>;
 
-  _transforms: $ReadOnlyArray<Transform<>>;
+  _transforms: ReadonlyArray<Transform<>>;
 
   /**
    * Creates an `AnimatedTransform` if `transforms` contains `AnimatedNode`
    * instances. Otherwise, returns `null`.
    */
-  static from(transforms: $ReadOnlyArray<Transform<>>): ?AnimatedTransform {
+  static from(transforms: ReadonlyArray<Transform<>>): ?AnimatedTransform {
     const nodes = flatAnimatedNodes(
       // NOTE: This check should not be necessary, but the types are not
       // enforced as of this writing. This check should be hoisted to
@@ -69,8 +69,8 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   constructor(
-    nodes: $ReadOnlyArray<AnimatedNode>,
-    transforms: $ReadOnlyArray<Transform<>>,
+    nodes: ReadonlyArray<AnimatedNode>,
+    transforms: ReadonlyArray<Transform<>>,
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
@@ -87,15 +87,15 @@ export default class AnimatedTransform extends AnimatedWithChildren {
     super.__makeNative(platformConfig);
   }
 
-  __getValue(): $ReadOnlyArray<Transform<any>> {
+  __getValue(): ReadonlyArray<Transform<any>> {
     return mapTransforms(this._transforms, animatedNode =>
       animatedNode.__getValue(),
     );
   }
 
   __getValueWithStaticTransforms(
-    staticTransforms: $ReadOnlyArray<Object>,
-  ): $ReadOnlyArray<Object> {
+    staticTransforms: ReadonlyArray<Object>,
+  ): ReadonlyArray<Object> {
     const values = [];
     mapTransforms(this._transforms, node => {
       values.push(node.__getValue());
@@ -105,7 +105,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
     return mapTransforms(staticTransforms, () => values.shift());
   }
 
-  __getAnimatedValue(): $ReadOnlyArray<Transform<any>> {
+  __getAnimatedValue(): ReadonlyArray<Transform<any>> {
     return mapTransforms(this._transforms, animatedNode =>
       animatedNode.__getAnimatedValue(),
     );
@@ -169,9 +169,9 @@ export default class AnimatedTransform extends AnimatedWithChildren {
 }
 
 function mapTransforms<T>(
-  transforms: $ReadOnlyArray<Transform<>>,
+  transforms: ReadonlyArray<Transform<>>,
   mapFunction: AnimatedNode => T,
-): $ReadOnlyArray<Transform<T>> {
+): ReadonlyArray<Transform<T>> {
   return transforms.map(transform => {
     const result: Transform<T> = {};
     // There should be exactly one property in `transform`.

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -24,7 +24,7 @@ import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHe
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
-export type AnimatedValueConfig = $ReadOnly<{
+export type AnimatedValueConfig = Readonly<{
   ...AnimatedNodeConfig,
   useNativeDriver: boolean,
 }>;

package/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -17,7 +17,7 @@ import AnimatedValue from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import invariant from 'invariant';
 
-export type AnimatedValueXYConfig = $ReadOnly<{
+export type AnimatedValueXYConfig = Readonly<{
   ...AnimatedNodeConfig,
   useNativeDriver: boolean,
 }>;

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -65,7 +65,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
     }
   }
 
-  __getChildren(): $ReadOnlyArray<AnimatedNode> {
+  __getChildren(): ReadonlyArray<AnimatedNode> {
     return this._children;
   }
 

package/Libraries/Animated/useAnimatedColor.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type {Animated} from './Animated';
+
+export function useAnimatedColor(
+  inputValue?: Animated.AnimatedColorInputValue,
+  config?: Animated.AnimatedConfig | null | undefined,
+): Animated.AnimatedColor;

package/Libraries/Animated/useAnimatedColor.js

@@ -0,0 +1,25 @@
+/**
+ * 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 {AnimatedColorConfig, InputValue} from './nodes/AnimatedColor';
+
+import Animated from './Animated';
+import {useRef} from 'react';
+
+export default function useAnimatedColor(
+  inputValue?: InputValue,
+  config?: ?AnimatedColorConfig,
+): Animated.Color {
+  const ref = useRef<null | Animated.Color>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.Color(inputValue, config);
+  }
+  return ref.current;
+}

package/Libraries/Animated/useAnimatedValueXY.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type {Animated} from './Animated';
+
+export function useAnimatedValueXY(
+  initialValue: {x: number; y: number},
+  config?: Animated.AnimatedConfig | null | undefined,
+): Animated.ValueXY;

package/Libraries/Animated/useAnimatedValueXY.js

@@ -0,0 +1,26 @@
+/**
+ * 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 Animated from './Animated';
+import {useRef} from 'react';
+
+export default function useAnimatedValueXY(
+  initialValue: {
+    x: number,
+    y: number,
+  },
+  config?: ?Animated.AnimatedConfig,
+): Animated.ValueXY {
+  const ref = useRef<null | Animated.ValueXY>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.ValueXY(initialValue, config);
+  }
+  return ref.current;
+}

package/Libraries/AppState/AppState.js

@@ -42,7 +42,7 @@ type AppStateEventDefinitions = {
   focus: [],
 };
 
-export type AppStateEvent = $Keys<AppStateEventDefinitions>;
+export type AppStateEvent = keyof AppStateEventDefinitions;
 
 type NativeAppStateEventDefinitions = {
   appStateDidChange: [{app_state: AppStateStatus}],

package/Libraries/BatchedBridge/MessageQueue.js

@@ -52,7 +52,7 @@ class MessageQueue {
 
   _debugInfo: {[number]: [number, number], ...};
   _remoteModuleTable: {[number]: string, ...};
-  _remoteMethodTable: {[number]: $ReadOnlyArray<string>, ...};
+  _remoteMethodTable: {[number]: ReadonlyArray<string>, ...};
 
   __spy: ?(data: SpyData) => void;
 
@@ -347,7 +347,7 @@ class MessageQueue {
   createDebugLookup(
     moduleID: number,
     name: string,
-    methods: ?$ReadOnlyArray<string>,
+    methods: ?ReadonlyArray<string>,
   ) {
     if (__DEV__) {
       this._remoteModuleTable[moduleID] = name;
@@ -372,7 +372,7 @@ class MessageQueue {
     } else {
       try {
         fn();
-      } catch (error) {
+      } catch (error: unknown) {
         ErrorUtils.reportFatalError(error);
       }
     }

package/Libraries/BatchedBridge/NativeModules.js

@@ -18,9 +18,9 @@ const invariant = require('invariant');
 export type ModuleConfig = [
   string /* name */,
   ?{...} /* constants */,
-  ?$ReadOnlyArray<string> /* functions */,
-  ?$ReadOnlyArray<number> /* promise method IDs */,
-  ?$ReadOnlyArray<number> /* sync method IDs */,
+  ?ReadonlyArray<string> /* functions */,
+  ?ReadonlyArray<number> /* promise method IDs */,
+  ?ReadonlyArray<number> /* sync method IDs */,
 ];
 
 export type MethodType = 'async' | 'promise' | 'sync';
@@ -50,7 +50,7 @@ function genModule(
     return {name: moduleName};
   }
 
-  const module: {[string]: mixed} = {};
+  const module: {[string]: unknown} = {};
   methods &&
     methods.forEach((methodName, methodID) => {
       const isPromise =
@@ -99,7 +99,7 @@ function loadModule(name: string, moduleID: number): ?{...} {
 function genMethod(moduleID: number, methodID: number, type: MethodType) {
   let fn = null;
   if (type === 'promise') {
-    fn = function promiseMethodWrapper(...args: Array<mixed>) {
+    fn = function promiseMethodWrapper(...args: Array<unknown>) {
       // In case we reject, capture a useful stack trace here.
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
@@ -122,7 +122,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
       });
     };
   } else {
-    fn = function nonPromiseMethodWrapper(...args: Array<mixed>) {
+    fn = function nonPromiseMethodWrapper(...args: Array<unknown>) {
       const lastArg = args.length > 0 ? args[args.length - 1] : null;
       const secondLastArg = args.length > 1 ? args[args.length - 2] : null;
       const hasSuccessCallback = typeof lastArg === 'function';
@@ -133,9 +133,11 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
           'Cannot have a non-function arg after a function arg.',
         );
       // $FlowFixMe[incompatible-type]
-      const onSuccess: ?(mixed) => void = hasSuccessCallback ? lastArg : null;
-      // $FlowFixMe[incompatible-type]
-      const onFail: ?(mixed) => void = hasErrorCallback ? secondLastArg : null;
+      const onSuccess: ?(unknown) => void = hasSuccessCallback ? lastArg : null;
+      const onFail: ?(unknown) => void = hasErrorCallback
+        ? // $FlowFixMe[incompatible-type]
+          secondLastArg
+        : null;
       // $FlowFixMe[unsafe-addition]
       const callbackCount = hasSuccessCallback + hasErrorCallback;
       const newArgs = args.slice(0, args.length - callbackCount);
@@ -163,7 +165,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
   return fn;
 }
 
-function arrayContains<T>(array: $ReadOnlyArray<T>, value: T): boolean {
+function arrayContains<T>(array: ReadonlyArray<T>, value: T): boolean {
   return array.indexOf(value) !== -1;
 }
 

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -42,33 +42,35 @@ type AccessibilityEventDefinitions = {
   screenReaderChanged: [boolean],
 };
 
-type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
+type AccessibilityEventTypes =
+  | 'click'
+  | 'focus'
+  | 'viewHoverEnter'
+  | 'windowStateChange';
 
 // Mapping of public event names to platform-specific event names.
-const EventNames: Map<
-  $Keys<AccessibilityEventDefinitions>,
-  string,
-> = Platform.OS === 'android'
-  ? new Map([
-      ['change', 'touchExplorationDidChange'],
-      ['reduceMotionChanged', 'reduceMotionDidChange'],
-      ['highTextContrastChanged', 'highTextContrastDidChange'],
-      ['screenReaderChanged', 'touchExplorationDidChange'],
-      ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
-      ['invertColorsChanged', 'invertColorDidChange'],
-      ['grayscaleChanged', 'grayscaleModeDidChange'],
-    ])
-  : new Map([
-      ['announcementFinished', 'announcementFinished'],
-      ['boldTextChanged', 'boldTextChanged'],
-      ['change', 'screenReaderChanged'],
-      ['grayscaleChanged', 'grayscaleChanged'],
-      ['invertColorsChanged', 'invertColorsChanged'],
-      ['reduceMotionChanged', 'reduceMotionChanged'],
-      ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
-      ['screenReaderChanged', 'screenReaderChanged'],
-      ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
-    ]);
+const EventNames: Map<keyof AccessibilityEventDefinitions, string> =
+  Platform.OS === 'android'
+    ? new Map([
+        ['change', 'touchExplorationDidChange'],
+        ['reduceMotionChanged', 'reduceMotionDidChange'],
+        ['highTextContrastChanged', 'highTextContrastDidChange'],
+        ['screenReaderChanged', 'touchExplorationDidChange'],
+        ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
+        ['invertColorsChanged', 'invertColorDidChange'],
+        ['grayscaleChanged', 'grayscaleModeDidChange'],
+      ])
+    : new Map([
+        ['announcementFinished', 'announcementFinished'],
+        ['boldTextChanged', 'boldTextChanged'],
+        ['change', 'screenReaderChanged'],
+        ['grayscaleChanged', 'grayscaleChanged'],
+        ['invertColorsChanged', 'invertColorsChanged'],
+        ['reduceMotionChanged', 'reduceMotionChanged'],
+        ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
+        ['screenReaderChanged', 'screenReaderChanged'],
+        ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
+      ]);
 
 /**
  * Sometimes it's useful to know whether or not the device has a screen reader
@@ -422,7 +424,7 @@ const AccessibilityInfo = {
    *
    * See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
    */
-  addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
+  addEventListener<K: keyof AccessibilityEventDefinitions>(
     eventName: K,
     // $FlowFixMe[incompatible-type] - Flow bug with unions and generics (T128099423)
     handler: (...AccessibilityEventDefinitions[K]) => void,
@@ -438,6 +440,8 @@ const AccessibilityInfo = {
    * Set accessibility focus to a React component.
    *
    * See https://reactnative.dev/docs/accessibilityinfo#setaccessibilityfocus
+   *
+   * @deprecated Use `sendAccessibilityEvent` with eventType `focus` instead.
    */
   setAccessibilityFocus(reactTag: number): void {
     legacySendAccessibilityEvent(reactTag, 'focus');

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.windows.js

@@ -43,39 +43,41 @@ type AccessibilityEventDefinitions = {
   screenReaderChanged: [boolean],
 };
 
-type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
+type AccessibilityEventTypes =
+  | 'click'
+  | 'focus'
+  | 'viewHoverEnter'
+  | 'windowStateChange';
 
 // Mapping of public event names to platform-specific event names.
-const EventNames: Map<
-  $Keys<AccessibilityEventDefinitions>,
-  string,
-> = Platform.OS === 'android'
-  ? new Map([
-      ['change', 'touchExplorationDidChange'],
-      ['reduceMotionChanged', 'reduceMotionDidChange'],
-      ['highTextContrastChanged', 'highTextContrastDidChange'],
-      ['screenReaderChanged', 'touchExplorationDidChange'],
-      ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
-      ['invertColorsChanged', 'invertColorDidChange'],
-      ['grayscaleChanged', 'grayscaleModeDidChange'],
-    ])
-  : Platform.OS === 'windows'
+const EventNames: Map<keyof AccessibilityEventDefinitions, string> =
+  Platform.OS === 'android'
     ? new Map([
-        ['change', 'TOUCH_EXPLORATION_EVENT'],
-        ['reduceMotionChanged', 'REDUCE_MOTION_EVENT'],
-        ['screenReaderChanged', 'TOUCH_EXPLORATION_EVENT'],
+        ['change', 'touchExplorationDidChange'],
+        ['reduceMotionChanged', 'reduceMotionDidChange'],
+        ['highTextContrastChanged', 'highTextContrastDidChange'],
+        ['screenReaderChanged', 'touchExplorationDidChange'],
+        ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
+        ['invertColorsChanged', 'invertColorDidChange'],
+        ['grayscaleChanged', 'grayscaleModeDidChange'],
       ])
-    : new Map([
-        ['announcementFinished', 'announcementFinished'],
-        ['boldTextChanged', 'boldTextChanged'],
-        ['change', 'screenReaderChanged'],
-        ['grayscaleChanged', 'grayscaleChanged'],
-        ['invertColorsChanged', 'invertColorsChanged'],
-        ['reduceMotionChanged', 'reduceMotionChanged'],
-        ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
-        ['screenReaderChanged', 'screenReaderChanged'],
-        ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
-      ]);
+    : Platform.OS === 'windows'
+      ? new Map([
+          ['change', 'TOUCH_EXPLORATION_EVENT'],
+          ['reduceMotionChanged', 'REDUCE_MOTION_EVENT'],
+          ['screenReaderChanged', 'TOUCH_EXPLORATION_EVENT'],
+        ])
+      : new Map([
+          ['announcementFinished', 'announcementFinished'],
+          ['boldTextChanged', 'boldTextChanged'],
+          ['change', 'screenReaderChanged'],
+          ['grayscaleChanged', 'grayscaleChanged'],
+          ['invertColorsChanged', 'invertColorsChanged'],
+          ['reduceMotionChanged', 'reduceMotionChanged'],
+          ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
+          ['screenReaderChanged', 'screenReaderChanged'],
+          ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
+        ]);
 
 /**
  * Sometimes it's useful to know whether or not the device has a screen reader
@@ -433,7 +435,7 @@ const AccessibilityInfo = {
    *
    * See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
    */
-  addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
+  addEventListener<K: keyof AccessibilityEventDefinitions>(
     eventName: K,
     // $FlowFixMe[incompatible-type] - Flow bug with unions and generics (T128099423)
     handler: (...AccessibilityEventDefinitions[K]) => void,
@@ -449,6 +451,8 @@ const AccessibilityInfo = {
    * Set accessibility focus to a React component.
    *
    * See https://reactnative.dev/docs/accessibilityinfo#setaccessibilityfocus
+   *
+   * @deprecated Use `sendAccessibilityEvent` with eventType `focus` instead.
    */
   setAccessibilityFocus(reactTag: number): void {
     legacySendAccessibilityEvent(reactTag, 'focus');

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -26,7 +26,7 @@ const GRAY = '#999999';
 
 type IndicatorSize = number | 'small' | 'large';
 
-type ActivityIndicatorIOSProps = $ReadOnly<{
+type ActivityIndicatorIOSProps = Readonly<{
   /**
     Whether the indicator should hide when not animating.
 
@@ -34,7 +34,7 @@ type ActivityIndicatorIOSProps = $ReadOnly<{
   */
   hidesWhenStopped?: ?boolean,
 }>;
-export type ActivityIndicatorProps = $ReadOnly<{
+export type ActivityIndicatorProps = Readonly<{
   ...ViewProps,
   ...ActivityIndicatorIOSProps,
 

package/Libraries/Components/Button.js

@@ -27,7 +27,7 @@ import View from './View/View';
 import invariant from 'invariant';
 import * as React from 'react';
 
-export type ButtonProps = $ReadOnly<{
+export type ButtonProps = Readonly<{
   /**
     Text to display inside the button. On Android the given title will be
     converted to the uppercased form.
@@ -147,7 +147,7 @@ export type ButtonProps = $ReadOnly<{
    * Accessibility props.
    */
   accessible?: ?boolean,
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityActions?: ?ReadonlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => unknown,
   accessibilityState?: ?AccessibilityState,
 

package/Libraries/Components/Button.windows.js

@@ -32,7 +32,7 @@ import View from './View/View';
 import invariant from 'invariant';
 import * as React from 'react';
 
-export type ButtonProps = $ReadOnly<{
+export type ButtonProps = Readonly<{
   /**
     Text to display inside the button. On Android the given title will be
     converted to the uppercased form.
@@ -152,7 +152,7 @@ export type ButtonProps = $ReadOnly<{
    * Accessibility props.
    */
   accessible?: ?boolean,
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityActions?: ?ReadonlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => unknown,
   onAccessibilityTap?: ?() => void, // Windows
   accessibilityState?: ?AccessibilityState,

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroidTypes.js

@@ -22,12 +22,12 @@ import * as React from 'react';
 export type DrawerStates = 'Idle' | 'Dragging' | 'Settling';
 
 export type DrawerSlideEvent = NativeSyntheticEvent<
-  $ReadOnly<{
+  Readonly<{
     offset: number,
   }>,
 >;
 
-export type DrawerLayoutAndroidProps = $ReadOnly<{
+export type DrawerLayoutAndroidProps = Readonly<{
   ...ViewProps,
 
   /**

package/Libraries/Components/Keyboard/Keyboard.js

@@ -16,7 +16,7 @@ import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
 
-export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
+export type KeyboardEventName = keyof KeyboardEventDefinitions;
 
 export type KeyboardEventEasing =
   | 'easeIn'
@@ -25,7 +25,7 @@ export type KeyboardEventEasing =
   | 'linear'
   | 'keyboard';
 
-export type KeyboardMetrics = $ReadOnly<{
+export type KeyboardMetrics = Readonly<{
   screenX: number,
   screenY: number,
   width: number,
@@ -40,13 +40,13 @@ type BaseKeyboardEvent = {
   endCoordinates: KeyboardMetrics,
 };
 
-export type AndroidKeyboardEvent = $ReadOnly<{
+export type AndroidKeyboardEvent = Readonly<{
   ...BaseKeyboardEvent,
   duration: 0,
   easing: 'keyboard',
 }>;
 
-export type IOSKeyboardEvent = $ReadOnly<{
+export type IOSKeyboardEvent = Readonly<{
   ...BaseKeyboardEvent,
   startCoordinates: KeyboardMetrics,
   isEventFromThisApp: boolean,
@@ -146,7 +146,7 @@ class KeyboardImpl {
    *
    * @param {function} callback function to be called when the event fires.
    */
-  addListener<K: $Keys<KeyboardEventDefinitions>>(
+  addListener<K: keyof KeyboardEventDefinitions>(
     eventType: K,
     listener: (...KeyboardEventDefinitions[K]) => unknown,
     context?: unknown,
@@ -159,7 +159,7 @@ class KeyboardImpl {
    *
    * @param {string} eventType The native event string listeners are watching which will be removed.
    */
-  removeAllListeners<K: $Keys<KeyboardEventDefinitions>>(eventType: ?K): void {
+  removeAllListeners<K: keyof KeyboardEventDefinitions>(eventType: ?K): void {
     this._emitter.removeAllListeners(eventType);
   }
 

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -26,7 +26,7 @@ import Keyboard from './Keyboard';
 import * as React from 'react';
 import {createRef} from 'react';
 
-export type KeyboardAvoidingViewProps = $ReadOnly<{
+export type KeyboardAvoidingViewProps = Readonly<{
   ...ViewProps,
 
   /**