react-native-windows 0.76.3 → 0.77.0-preview.1

package/Libraries/Animated/useAnimatedProps.js

@@ -8,21 +8,22 @@
  * @format
  */
 
-'use strict';
-
 import type {EventSubscription} from '../EventEmitter/NativeEventEmitter';
+import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
 
+import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
+import {useAnimatedPropsMemo} from '../../src/private/animated/useAnimatedPropsMemo';
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
-import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './nodes/AnimatedNode';
 import AnimatedProps from './nodes/AnimatedProps';
 import AnimatedValue from './nodes/AnimatedValue';
 import {
   useCallback,
   useEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useReducer,
@@ -36,34 +37,46 @@ type ReducedProps<TProps> = {
 };
 type CallbackRef<T> = T => mixed;
 
+type UpdateCallback = () => void;
+
 type AnimatedValueListeners = Array<{
   propValue: AnimatedValue,
   listenerId: string,
 }>;
 
+const useMemoOrAnimatedPropsMemo =
+  ReactNativeFeatureFlags.enableAnimatedPropsMemo()
+    ? useAnimatedPropsMemo
+    : useMemo;
+
 export default function useAnimatedProps<TProps: {...}, TInstance>(
   props: TProps,
+  allowlist?: ?AnimatedPropsAllowlist,
 ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
   const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
-  const onUpdateRef = useRef<?() => void>(null);
+  const onUpdateRef = useRef<UpdateCallback | null>(null);
   const timerRef = useRef<TimeoutID | null>(null);
 
-  // TODO: Only invalidate `node` if animated props or `style` change. In the
-  // previous implementation, we permitted `style` to override props with the
-  // same name property name as styles, so we can probably continue doing that.
-  // The ordering of other props *should* not matter.
-  const node = useMemo(
-    () => new AnimatedProps(props, () => onUpdateRef.current?.()),
-    [props],
+  const allowlistIfEnabled = ReactNativeFeatureFlags.enableAnimatedAllowlist()
+    ? allowlist
+    : null;
+
+  const node = useMemoOrAnimatedPropsMemo(
+    () =>
+      new AnimatedProps(
+        props,
+        () => onUpdateRef.current?.(),
+        allowlistIfEnabled,
+      ),
+    [allowlistIfEnabled, props],
   );
+
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
-  const useSetNativePropsInNativeAnimationsInFabric =
-    ReactNativeFeatureFlags.shouldUseSetNativePropsInNativeAnimationsInFabric();
 
   const useAnimatedPropsLifecycle =
-    ReactNativeFeatureFlags.usePassiveEffectsForAnimations()
-      ? useAnimatedPropsLifecycle_passiveEffects
+    ReactNativeFeatureFlags.useInsertionEffectsForAnimations()
+      ? useAnimatedPropsLifecycle_insertionEffects
       : useAnimatedPropsLifecycle_layoutEffects;
 
   useAnimatedPropsLifecycle(node);
@@ -104,12 +117,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           if (isFabricNode) {
             // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
             // Must not be called in Paper.
-            if (useSetNativePropsInNativeAnimationsInFabric) {
-              // $FlowFixMe[incompatible-use]
-              instance.setNativeProps(node.__getAnimatedValue());
-            } else {
-              scheduleUpdate();
-            }
+            scheduleUpdate();
           }
           return;
         }
@@ -186,23 +194,23 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         }
       };
     },
-    [
-      node,
-      useNativePropsInFabric,
-      useSetNativePropsInNativeAnimationsInFabric,
-      props,
-    ],
+    [node, useNativePropsInFabric, props],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 
-  return [reduceAnimatedProps<TProps>(node), callbackRef];
+  return [reduceAnimatedProps<TProps>(node, props), callbackRef];
 }
 
-function reduceAnimatedProps<TProps>(node: AnimatedNode): ReducedProps<TProps> {
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+  props: TProps,
+): ReducedProps<TProps> {
   // Force `collapsable` to be false so that the native view is not flattened.
   // Flattened views cannot be accurately referenced by the native driver.
   return {
-    ...node.__getValue(),
+    ...(ReactNativeFeatureFlags.enableAnimatedPropsMemo()
+      ? node.__getValueWithStaticProps(props)
+      : node.__getValue()),
     collapsable: false,
   };
 }
@@ -301,10 +309,8 @@ function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
  * uses reference counting to determine when to recursively detach its children
  * nodes. So in order to optimize this, we avoid detaching until the next attach
  * unless we are unmounting.
- *
- * NOTE: unlike `useAnimatedPropsLifecycle_layoutEffects`, this version uses passive effects to setup animation graph.
  */
-function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
+function useAnimatedPropsLifecycle_insertionEffects(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 
@@ -315,14 +321,14 @@ function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
     NativeAnimatedHelper.API.flushQueue();
   });
 
-  useEffect(() => {
+  useInsertionEffect(() => {
     isUnmountingRef.current = false;
     return () => {
       isUnmountingRef.current = true;
     };
   }, []);
 
-  useEffect(() => {
+  useInsertionEffect(() => {
     node.__attach();
     let drivenAnimationEndedListener: ?EventSubscription = null;
 

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts

@@ -7,8 +7,7 @@
  * @format
  */
 
-import type * as React from 'react';
-import {HostComponent} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {EmitterSubscription} from '../../vendor/emitter/EventEmitter';
 
 type AccessibilityChangeEventName =
@@ -17,6 +16,8 @@ type AccessibilityChangeEventName =
   | 'grayscaleChanged' // iOS-only Event
   | 'invertColorsChanged' // iOS-only Event
   | 'reduceMotionChanged'
+  | 'highTextContrastChanged' // Android-only Event
+  | 'darkerSystemColorsChanged' // iOS-only Event
   | 'screenReaderChanged'
   | 'reduceTransparencyChanged'; // iOS-only Event
 
@@ -69,6 +70,21 @@ export interface AccessibilityInfoStatic {
    */
   isReduceMotionEnabled: () => Promise<boolean>;
 
+  /**
+   *
+   * Query whether high text contrast is currently enabled.
+   *
+   * @platform android
+   */
+  isHighTextContrastEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether darker system colors is currently enabled.
+   *
+   * @platform ios
+   */
+  isDarkerSystemColorsEnabled: () => Promise<boolean>;
+
   /**
    * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
    *
@@ -148,7 +164,7 @@ export interface AccessibilityInfoStatic {
    */
   getRecommendedTimeoutMillis: (originalTimeout: number) => Promise<number>;
   sendAccessibilityEvent: (
-    handle: React.ElementRef<HostComponent<unknown>>,
+    handle: HostInstance,
     eventType: AccessibilityEventTypes,
   ) => void;
 }

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -8,9 +8,8 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
 import {sendAccessibilityEvent} from '../../ReactNative/RendererProxy';
@@ -22,6 +21,7 @@ import NativeAccessibilityManagerIOS from './NativeAccessibilityManager';
 // Events that are only supported on Android.
 type AccessibilityEventDefinitionsAndroid = {
   accessibilityServiceChanged: [boolean],
+  highTextContrastChanged: [boolean],
 };
 
 // Events that are only supported on iOS.
@@ -31,6 +31,7 @@ type AccessibilityEventDefinitionsIOS = {
   grayscaleChanged: [boolean],
   invertColorsChanged: [boolean],
   reduceTransparencyChanged: [boolean],
+  darkerSystemColorsChanged: [boolean],
 };
 
 type AccessibilityEventDefinitions = {
@@ -51,8 +52,11 @@ const EventNames: Map<
   ? new Map([
       ['change', 'touchExplorationDidChange'],
       ['reduceMotionChanged', 'reduceMotionDidChange'],
+      ['highTextContrastChanged', 'highTextContrastDidChange'],
       ['screenReaderChanged', 'touchExplorationDidChange'],
       ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
+      ['invertColorsChanged', 'invertColorDidChange'],
+      ['grayscaleChanged', 'grayscaleModeDidChange'],
     ])
   : new Map([
       ['announcementFinished', 'announcementFinished'],
@@ -63,6 +67,7 @@ const EventNames: Map<
       ['reduceMotionChanged', 'reduceMotionChanged'],
       ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
       ['screenReaderChanged', 'screenReaderChanged'],
+      ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
     ]);
 
 /**
@@ -110,7 +115,13 @@ const AccessibilityInfo = {
    */
   isGrayscaleEnabled(): Promise<boolean> {
     if (Platform.OS === 'android') {
-      return Promise.resolve(false);
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isGrayscaleEnabled != null) {
+          NativeAccessibilityInfoAndroid.isGrayscaleEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
     } else {
       return new Promise((resolve, reject) => {
         if (NativeAccessibilityManagerIOS != null) {
@@ -135,7 +146,13 @@ const AccessibilityInfo = {
    */
   isInvertColorsEnabled(): Promise<boolean> {
     if (Platform.OS === 'android') {
-      return Promise.resolve(false);
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isInvertColorsEnabled != null) {
+          NativeAccessibilityInfoAndroid.isInvertColorsEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
     } else {
       return new Promise((resolve, reject) => {
         if (NativeAccessibilityManagerIOS != null) {
@@ -179,6 +196,52 @@ const AccessibilityInfo = {
     });
   },
 
+  /**
+   * Query whether high text contrast is currently enabled. Android only.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when high text contrast is enabled and `false` otherwise.
+   */
+  isHighTextContrastEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        if (NativeAccessibilityInfoAndroid?.isHighTextContrastEnabled != null) {
+          NativeAccessibilityInfoAndroid.isHighTextContrastEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        return Promise.resolve(false);
+      }
+    });
+  },
+
+  /**
+   * Query whether dark system colors is currently enabled. iOS only.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when dark system colors is enabled and `false` otherwise.
+   */
+  isDarkerSystemColorsEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        return Promise.resolve(false);
+      } else {
+        if (
+          NativeAccessibilityManagerIOS?.getCurrentDarkerSystemColorsState !=
+          null
+        ) {
+          NativeAccessibilityManagerIOS.getCurrentDarkerSystemColorsState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
   /**
    * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
    *
@@ -319,6 +382,15 @@ const AccessibilityInfo = {
    *     - `announcement`: The string announced by the screen reader.
    *     - `success`: A boolean indicating whether the announcement was
    *       successfully made.
+   * - `darkerSystemColorsChanged`: iOS-only event. Fires when the state of the dark system colors
+   *   toggle changes. The argument to the event handler is a boolean. The boolean is `true` when
+   *   dark system colors is enabled and `false` otherwise.
+   *
+   * These events are only supported on Android:
+   *
+   * - `highTextContrastChanged`: Android-only event. Fires when the state of the high text contrast
+   *   toggle changes. The argument to the event handler is a boolean. The boolean is `true` when
+   *   high text contrast is enabled and `false` otherwise.
    *
    * See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
    */
@@ -347,7 +419,7 @@ const AccessibilityInfo = {
    * Send a named accessibility event to a HostComponent.
    */
   sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     eventType: AccessibilityEventTypes,
   ) {
     // iOS only supports 'focus' event types

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

@@ -8,20 +8,21 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
 import {sendAccessibilityEvent} from '../../ReactNative/RendererProxy';
 import Platform from '../../Utilities/Platform';
 import legacySendAccessibilityEvent from './legacySendAccessibilityEvent';
+import NativeAccessibilityInfoAndroid from './NativeAccessibilityInfo';
 import NativeAccessibilityInfo from './NativeAccessibilityInfo';
 import NativeAccessibilityManagerIOS from './NativeAccessibilityManager';
 
 // Events that are only supported on Android.
 type AccessibilityEventDefinitionsAndroid = {
   accessibilityServiceChanged: [boolean],
+  highTextContrastChanged: [boolean],
 };
 
 // Events that are only supported on iOS.
@@ -31,6 +32,7 @@ type AccessibilityEventDefinitionsIOS = {
   grayscaleChanged: [boolean],
   invertColorsChanged: [boolean],
   reduceTransparencyChanged: [boolean],
+  darkerSystemColorsChanged: [boolean],
 };
 
 type AccessibilityEventDefinitions = {
@@ -51,8 +53,11 @@ const EventNames: Map<
   ? new Map([
       ['change', 'touchExplorationDidChange'],
       ['reduceMotionChanged', 'reduceMotionDidChange'],
+      ['highTextContrastChanged', 'highTextContrastDidChange'],
       ['screenReaderChanged', 'touchExplorationDidChange'],
       ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
+      ['invertColorsChanged', 'invertColorDidChange'],
+      ['grayscaleChanged', 'grayscaleModeDidChange'],
     ])
   : Platform.OS === 'windows'
     ? new Map([
@@ -69,6 +74,7 @@ const EventNames: Map<
         ['reduceMotionChanged', 'reduceMotionChanged'],
         ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
         ['screenReaderChanged', 'screenReaderChanged'],
+        ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
       ]);
 
 /**
@@ -115,7 +121,15 @@ const AccessibilityInfo = {
    * See https://reactnative.dev/docs/accessibilityinfo#isGrayscaleEnabled
    */
   isGrayscaleEnabled(): Promise<boolean> {
-    if (Platform.OS === 'android' || Platform.OS === 'windows') {
+    if (Platform.OS === 'android') {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isGrayscaleEnabled != null) {
+          NativeAccessibilityInfoAndroid.isGrayscaleEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
+    } else if (Platform.OS === 'windows') {
       return Promise.resolve(false);
     } else {
       return new Promise((resolve, reject) => {
@@ -140,7 +154,15 @@ const AccessibilityInfo = {
    * See https://reactnative.dev/docs/accessibilityinfo#isInvertColorsEnabled
    */
   isInvertColorsEnabled(): Promise<boolean> {
-    if (Platform.OS === 'android' || Platform.OS === 'windows') {
+    if (Platform.OS === 'android') {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isInvertColorsEnabled != null) {
+          NativeAccessibilityInfoAndroid.isInvertColorsEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
+    } else if (Platform.OS === 'windows') {
       return Promise.resolve(false);
     } else {
       return new Promise((resolve, reject) => {
@@ -185,6 +207,52 @@ const AccessibilityInfo = {
     });
   },
 
+  /**
+   * Query whether high text contrast is currently enabled. Android only.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when high text contrast is enabled and `false` otherwise.
+   */
+  isHighTextContrastEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        if (NativeAccessibilityInfo?.isHighTextContrastEnabled != null) {
+          NativeAccessibilityInfo.isHighTextContrastEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        return Promise.resolve(false);
+      }
+    });
+  },
+
+  /**
+   * Query whether dark system colors is currently enabled. iOS only.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when dark system colors is enabled and `false` otherwise.
+   */
+  isDarkerSystemColorsEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        return Promise.resolve(false);
+      } else {
+        if (
+          NativeAccessibilityManagerIOS?.getCurrentDarkerSystemColorsState !=
+          null
+        ) {
+          NativeAccessibilityManagerIOS.getCurrentDarkerSystemColorsState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
   /**
    * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
    *
@@ -325,6 +393,15 @@ const AccessibilityInfo = {
    *     - `announcement`: The string announced by the screen reader.
    *     - `success`: A boolean indicating whether the announcement was
    *       successfully made.
+   * - `darkerSystemColorsChanged`: iOS-only event. Fires when the state of the dark system colors
+   *   toggle changes. The argument to the event handler is a boolean. The boolean is `true` when
+   *   dark system colors is enabled and `false` otherwise.
+   *
+   * These events are only supported on Android:
+   *
+   * - `highTextContrastChanged`: Android-only event. Fires when the state of the high text contrast
+   *   toggle changes. The argument to the event handler is a boolean. The boolean is `true` when
+   *   high text contrast is enabled and `false` otherwise.
    *
    * See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
    */
@@ -353,7 +430,7 @@ const AccessibilityInfo = {
    * Send a named accessibility event to a HostComponent.
    */
   sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     eventType: AccessibilityEventTypes,
   ) {
     // iOS only supports 'focus' event types

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -153,10 +153,10 @@ const ActivityIndicator = (
 ```
 */
 
-const ActivityIndicatorWithRef: React.AbstractComponent<
-  Props,
-  HostComponent<mixed>,
-> = React.forwardRef(ActivityIndicator);
+const ActivityIndicatorWithRef: component(
+  ref: React.RefSetter<HostComponent<empty>>,
+  ...props: Props
+) = React.forwardRef(ActivityIndicator);
 ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({

package/Libraries/Components/Button.js

@@ -283,10 +283,12 @@ type ButtonProps = $ReadOnly<{|
 const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
   Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
-const Button: React.AbstractComponent<
-  ButtonProps,
-  React.ElementRef<typeof Touchable>,
-> = React.forwardRef((props: ButtonProps, ref) => {
+type ButtonRef = React.ElementRef<typeof Touchable>;
+
+const Button: component(
+  ref: React.RefSetter<ButtonRef>,
+  ...props: ButtonProps
+) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -379,6 +381,9 @@ const Button: React.AbstractComponent<
       disabled={disabled}
       onPress={onPress}
       touchSoundDisabled={touchSoundDisabled}
+      // $FlowFixMe[incompatible-exact]
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[incompatible-type-arg]
       ref={ref}>
       <View style={buttonStyles}>
         <Text style={textStyles} disabled={disabled}>

package/Libraries/Components/Button.windows.js

@@ -23,9 +23,9 @@ import Text from '../Text/Text';
 // [Windows
 // import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
 // import TouchableOpacity from './Touchable/TouchableOpacity';
+// Windows]
 import TouchableHighlight from './Touchable/TouchableHighlight';
 import {PlatformColor} from '../StyleSheet/PlatformColorValueTypes';
-// Windows]
 import Platform from '../Utilities/Platform';
 import View from './View/View';
 import invariant from 'invariant';
@@ -164,6 +164,8 @@ type ButtonProps = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-multiselectable'?: ?boolean, // Windows
+  'aria-required'?: ?boolean, // Windows
 
   /**
    * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
@@ -290,10 +292,12 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-const Button: React.AbstractComponent<
-  ButtonProps,
-  React.ElementRef<typeof TouchableHighlight>,
-> = React.forwardRef((props: ButtonProps, ref) => {
+type ButtonRef = React.ElementRef<typeof TouchableHighlight>;
+
+const Button: component(
+  ref: React.RefSetter<ButtonRef>,
+  ...props: ButtonProps
+) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
   // Windows
   // [Windows
   const [hover, setHover] = React.useState(false);
@@ -308,6 +312,8 @@ const Button: React.AbstractComponent<
     'aria-expanded': ariaExpanded,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
+    'aria-multiselectable': ariaMultiselectable, // Windows
+    'aria-required': ariaRequired, // Windows
     importantForAccessibility,
     color,
     onPress,
@@ -343,6 +349,8 @@ const Button: React.AbstractComponent<
     disabled: ariaDisabled ?? accessibilityState?.disabled,
     expanded: ariaExpanded ?? accessibilityState?.expanded,
     selected: ariaSelected ?? accessibilityState?.selected,
+    multiselectable: ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
+    required: ariaRequired ?? accessibilityState?.required, // Windows
   };
 
   const disabled =
@@ -418,6 +426,9 @@ const Button: React.AbstractComponent<
         onMouseLeave={() => {
           if (!disabled) setHover(false);
         }}
+        // $FlowFixMe[incompatible-exact]
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-type-arg]
         ref={ref}>
         <View
           style={
@@ -489,6 +500,9 @@ const Button: React.AbstractComponent<
         disabled={disabled}
         onPress={onPress}
         touchSoundDisabled={touchSoundDisabled}
+        // $FlowFixMe[incompatible-exact]
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-type-arg]
         ref={ref}>
         <View style={buttonStyles}>
           <Text style={textStyles} disabled={disabled}>

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -5,8 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+module.exports =
+  require('../UnimplementedViews/UnimplementedView') as $FlowFixMe;

package/Libraries/Components/Glyph/Glyph.js

@@ -29,10 +29,11 @@ export type Props = $ReadOnly<{|
  * ability to be rendered with a specific color
  */
 
+// $FlowFixMe[prop-missing]
 export const Glyph: React.AbstractComponent<
   Props,
   React.ElementRef<typeof GlyphNativeComponent>,
-> = React.forwardRef(function Glyph(props, forwardedRef): React.Node {
+> = React.forwardRef(function Glyph(props: Props, forwardedRef): React.Node {
   const nativeSwitchRef = React.useRef<React.ElementRef<
     typeof GlyphNativeComponent,
   > | null>(null);