@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.1

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.win32.js

@@ -8,21 +8,22 @@
  * @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 NativeAccessibilityInfo from './NativeAccessibilityInfo';
+import NativeAccessibilityInfoAndroid from './NativeAccessibilityInfo';
 import NativeAccessibilityInfoWin32 from './NativeAccessibilityInfoWin32';
 import NativeAccessibilityManagerIOS from './NativeAccessibilityManager';
 
 // Events that are only supported on Android.
 type AccessibilityEventDefinitionsAndroid = {
   accessibilityServiceChanged: [boolean],
+  highTextContrastChanged: [boolean],
 };
 
 // Events that are only supported on iOS.
@@ -32,6 +33,7 @@ type AccessibilityEventDefinitionsIOS = {
   grayscaleChanged: [boolean],
   invertColorsChanged: [boolean],
   reduceTransparencyChanged: [boolean],
+  darkerSystemColorsChanged: [boolean],
 };
 
 type AccessibilityEventDefinitions = {
@@ -52,8 +54,11 @@ const EventNames: Map<
   ? new Map([
       ['change', 'touchExplorationDidChange'],
       ['reduceMotionChanged', 'reduceMotionDidChange'],
+      ['highTextContrastChanged', 'highTextContrastDidChange'],
       ['screenReaderChanged', 'touchExplorationDidChange'],
       ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
+      ['invertColorsChanged', 'invertColorDidChange'],
+      ['grayscaleChanged', 'grayscaleModeDidChange'],
     ])
   : Platform.OS === 'win32'
     ? new Map([
@@ -70,6 +75,7 @@ const EventNames: Map<
         ['reduceMotionChanged', 'reduceMotionChanged'],
         ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
         ['screenReaderChanged', 'screenReaderChanged'],
+        ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
       ]);
 
 /**
@@ -116,7 +122,15 @@ const AccessibilityInfo = {
    * See https://reactnative.dev/docs/accessibilityinfo#isGrayscaleEnabled
    */
   isGrayscaleEnabled(): Promise<boolean> {
-    if (Platform.OS === 'android' || Platform.OS === 'win32') {
+    if (Platform.OS === 'android') {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isGrayscaleEnabled != null) {
+          NativeAccessibilityInfoAndroid.isGrayscaleEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
+    } else if (Platform.OS === 'win32') {
       return Promise.resolve(false);
     } else {
       return new Promise((resolve, reject) => {
@@ -141,7 +155,15 @@ const AccessibilityInfo = {
    * See https://reactnative.dev/docs/accessibilityinfo#isInvertColorsEnabled
    */
   isInvertColorsEnabled(): Promise<boolean> {
-    if (Platform.OS === 'android' || Platform.OS === 'win32') {
+    if (Platform.OS === 'android') {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isInvertColorsEnabled != null) {
+          NativeAccessibilityInfoAndroid.isInvertColorsEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
+    } else if (Platform.OS === 'win32') {
       return Promise.resolve(false);
     } else {
       return new Promise((resolve, reject) => {
@@ -192,6 +214,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.
    *
@@ -338,6 +406,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
    */
@@ -366,7 +443,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.win32.js

@@ -283,10 +283,15 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-const Button: React.AbstractComponent<
-  ButtonProps,
-  React.ElementRef<typeof TouchableNativeFeedback | typeof TouchableOpacity>,
-> = React.forwardRef((props: ButtonProps, ref) => {
+const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
+  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+type ButtonRef = React.ElementRef<typeof Touchable>;
+
+const Button: component(
+  ref: React.RefSetter<ButtonRef>,
+  ...props: ButtonProps
+) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
   // Win32
   const {
     accessibilityLabel,
@@ -387,6 +392,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/Keyboard/KeyboardAvoidingView.js

@@ -116,6 +116,8 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   };
 
   _onLayout = async (event: ViewLayoutEvent) => {
+    event.persist();
+
     const oldFrame = this._frame;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {
@@ -191,6 +193,11 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   }
 
   componentDidMount(): void {
+    if (!Keyboard.isVisible()) {
+      this._keyboardEvent = null;
+      this._setBottom(0);
+    }
+
     if (Platform.OS === 'ios') {
       this._subscriptions = [
         Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),

package/Libraries/Components/Pressable/Pressable.js

@@ -363,7 +363,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
 const MemoedPressable = React.memo(React.forwardRef(Pressable));
 MemoedPressable.displayName = 'Pressable';
 
-export default (MemoedPressable: React.AbstractComponent<
-  Props,
-  React.ElementRef<typeof View>,
->);
+export default (MemoedPressable: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: Props
+));

package/Libraries/Components/Pressable/Pressable.win32.js

@@ -431,7 +431,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
 const MemoedPressable = React.memo(React.forwardRef(Pressable));
 MemoedPressable.displayName = 'Pressable';
 
-export default (MemoedPressable: React.AbstractComponent<
-  Props,
-  React.ElementRef<typeof View>,
->);
+export default (MemoedPressable: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: Props
+));

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -78,15 +78,23 @@ export type ProgressBarAndroidProps = $ReadOnly<{|
  * },
  * ```
  */
-const ProgressBarAndroid = (
+const ProgressBarAndroidWithForwardedRef: component(
+  ref: React.RefSetter<
+    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
+  >,
+  ...props: ProgressBarAndroidProps
+) = React.forwardRef(function ProgressBarAndroid(
   {
+    // $FlowFixMe[incompatible-type]
     styleAttr = 'Normal',
     indeterminate = true,
     animating = true,
     ...restProps
   }: ProgressBarAndroidProps,
-  forwardedRef: ?React.Ref<typeof ProgressBarAndroidNativeComponent>,
-) => {
+  forwardedRef: ?React.RefSetter<
+    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
+  >,
+) {
   return (
     <ProgressBarAndroidNativeComponent
       styleAttr={styleAttr}
@@ -96,12 +104,10 @@ const ProgressBarAndroid = (
       ref={forwardedRef}
     />
   );
-};
-
-const ProgressBarAndroidToExport = React.forwardRef(ProgressBarAndroid);
+});
 
 module.exports =
   /* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
    * error found when Flow v0.89 was deployed. To see the error, delete this
    * comment and run Flow. */
-  (ProgressBarAndroidToExport: typeof ProgressBarAndroidNativeComponent);
+  (ProgressBarAndroidWithForwardedRef: typeof ProgressBarAndroidNativeComponent);

package/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -14,8 +14,9 @@ import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
 import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
 import * as React from 'react';
 
-const RCTRefreshControl: HostComponent<mixed> =
-  requireNativeComponent<mixed>('RCTRefreshControl');
+const RCTRefreshControl: HostComponent<{}> = requireNativeComponent<{}>(
+  'RCTRefreshControl',
+);
 
 class RefreshControlMock extends React.Component<{...}> {
   static latestRef: ?RefreshControlMock;

package/Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -23,10 +23,10 @@ import * as React from 'react';
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
  */
-const exported: React.AbstractComponent<
-  ViewProps,
-  React.ElementRef<typeof View>,
-> = Platform.select({
+const exported: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: ViewProps
+) = Platform.select({
   ios: require('./RCTSafeAreaViewNativeComponent').default,
   default: View,
 });

package/Libraries/Components/SafeAreaView/SafeAreaView.win32.js

@@ -23,10 +23,10 @@ import * as React from 'react';
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
  */
-const exported: React.AbstractComponent<
-  ViewProps,
-  React.ElementRef<typeof View>,
-> = Platform.select({
+const exported: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: ViewProps
+) = Platform.select({
   ios: require('./RCTSafeAreaViewNativeComponent').default,
   default: View,
 });

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -31,7 +31,6 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     pagingEnabled: true,
     persistentScrollbar: true,
     horizontal: true,
-    enableSyncOnScroll: true,
     scrollEnabled: true,
     scrollEventThrottle: true,
     scrollPerfTag: true,