@office-iss/react-native-win32 0.0.0-canary.270 → 0.0.0-canary.271

package/Libraries/Animated/animations/TimingAnimation.js

@@ -4,12 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {RgbaValue} from '../nodes/AnimatedColor';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
@@ -17,7 +15,6 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import Animation from './Animation';
 
@@ -26,11 +23,11 @@ export type TimingAnimationConfig = $ReadOnly<{
   toValue:
     | number
     | AnimatedValue
-    | {
+    | $ReadOnly<{
         x: number,
         y: number,
         ...
-      }
+      }>
     | AnimatedValueXY
     | RgbaValue
     | AnimatedColor
@@ -38,6 +35,7 @@ export type TimingAnimationConfig = $ReadOnly<{
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
+  ...
 }>;
 
 export type TimingAnimationConfigSingle = $ReadOnly<{
@@ -46,6 +44,7 @@ export type TimingAnimationConfigSingle = $ReadOnly<{
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
+  ...
 }>;
 
 let _easeInOut;
@@ -65,25 +64,28 @@ export default class TimingAnimation extends Animation {
   _delay: number;
   _easing: (value: number) => number;
   _onUpdate: (value: number) => void;
-  _animationFrame: any;
-  _timeout: any;
-  _useNativeDriver: boolean;
+  _animationFrame: ?AnimationFrameID;
+  _timeout: ?TimeoutID;
   _platformConfig: ?PlatformConfig;
 
   constructor(config: TimingAnimationConfigSingle) {
-    super();
+    super(config);
+
     this._toValue = config.toValue;
     this._easing = config.easing ?? easeInOut();
     this._duration = config.duration ?? 500;
     this._delay = config.delay ?? 0;
-    this.__iterations = config.iterations ?? 1;
-    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
-    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
-    this.__isLooping = config.isLooping;
   }
 
-  __getNativeAnimationConfig(): any {
+  __getNativeAnimationConfig(): $ReadOnly<{
+    type: 'frames',
+    frames: $ReadOnlyArray<number>,
+    toValue: number,
+    iterations: number,
+    platformConfig: ?PlatformConfig,
+    ...
+  }> {
     const frameDuration = 1000.0 / 60.0;
     const frames = [];
     const numFrames = Math.round(this._duration / frameDuration);
@@ -107,35 +109,24 @@ export default class TimingAnimation extends Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    this.__active = true;
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
     this._fromValue = fromValue;
     this._onUpdate = onUpdate;
-    this.__onEnd = onEnd;
 
     const start = () => {
-      if (!this._useNativeDriver && animatedValue.__isNative === true) {
-        throw new Error(
-          'Attempting to run JS driven animation on animated node ' +
-            'that has been moved to "native" earlier by starting an ' +
-            'animation with `useNativeDriver: true`',
-        );
-      }
+      this._startTime = Date.now();
 
-      // Animations that sometimes have 0 duration and sometimes do not
-      // still need to use the native driver when duration is 0 so as to
-      // not cause intermixed JS and native animations.
-      if (this._duration === 0 && !this._useNativeDriver) {
-        this._onUpdate(this._toValue);
-        this.__debouncedOnEnd({finished: true});
-      } else {
-        this._startTime = Date.now();
-        if (this._useNativeDriver) {
-          this.__startNativeAnimation(animatedValue);
+      const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+      if (!useNativeDriver) {
+        // Animations that sometimes have 0 duration and sometimes do not
+        // still need to use the native driver when duration is 0 so as to
+        // not cause intermixed JS and native animations.
+        if (this._duration === 0) {
+          this._onUpdate(this._toValue);
+          this.__notifyAnimationEnd({finished: true});
         } else {
-          this._animationFrame = requestAnimationFrame(
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            this.onUpdate.bind(this),
-          );
+          this._animationFrame = requestAnimationFrame(() => this.onUpdate());
         }
       }
     };
@@ -156,7 +147,7 @@ export default class TimingAnimation extends Animation {
           this._fromValue + this._easing(1) * (this._toValue - this._fromValue),
         );
       }
-      this.__debouncedOnEnd({finished: true});
+      this.__notifyAnimationEnd({finished: true});
       return;
     }
 
@@ -173,9 +164,10 @@ export default class TimingAnimation extends Animation {
 
   stop(): void {
     super.stop();
-    this.__active = false;
     clearTimeout(this._timeout);
-    global.cancelAnimationFrame(this._animationFrame);
-    this.__debouncedOnEnd({finished: false});
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
   }
 }

package/Libraries/Animated/createAnimatedComponent.js

@@ -27,11 +27,24 @@ export type AnimatedProps<Props: {...}> = {
       }>)]: any,
 };
 
+// We could use a mapped type here to introduce acceptable Animated variants
+// of properties, instead of doing so in the core StyleSheetTypes
+// Inexact Props are not supported, they'll be made exact here.
+export type StrictAnimatedProps<Props: {...}> = $ReadOnly<{
+  ...$Exact<Props>,
+  passthroughAnimatedPropExplicitValues?: ?Props,
+}>;
+
 export type AnimatedComponentType<
   Props: {...},
   +Instance = mixed,
 > = React.AbstractComponent<AnimatedProps<Props>, Instance>;
 
+export type StrictAnimatedComponentType<
+  Props: {...},
+  +Instance = mixed,
+> = React.AbstractComponent<StrictAnimatedProps<Props>, Instance>;
+
 export default function createAnimatedComponent<TProps: {...}, TInstance>(
   Component: React.AbstractComponent<TProps, TInstance>,
 ): AnimatedComponentType<TProps, TInstance> {
@@ -44,40 +57,41 @@ export function unstable_createAnimatedComponentWithAllowlist<
 >(
   Component: React.AbstractComponent<TProps, TInstance>,
   allowlist: ?AnimatedPropsAllowlist,
-): AnimatedComponentType<TProps, TInstance> {
-  const AnimatedComponent = React.forwardRef<AnimatedProps<TProps>, TInstance>(
-    (props, forwardedRef) => {
-      const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
-        // $FlowFixMe[incompatible-call]
-        props,
-        allowlist,
-      );
-      const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
+): StrictAnimatedComponentType<TProps, TInstance> {
+  const AnimatedComponent = React.forwardRef<
+    StrictAnimatedProps<TProps>,
+    TInstance,
+  >((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      // $FlowFixMe[incompatible-call]
+      props,
+      allowlist,
+    );
+    const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
 
-      // Some components require explicit passthrough values for animation
-      // to work properly. For example, if an animated component is
-      // transformed and Pressable, onPress will not work after transform
-      // without these passthrough values.
-      // $FlowFixMe[prop-missing]
-      const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
-      const mergedStyle = useMemo(
-        () => composeStyles(style, passthroughStyle),
-        [passthroughStyle, style],
-      );
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
+    const mergedStyle = useMemo(
+      () => composeStyles(style, passthroughStyle),
+      [passthroughStyle, style],
+    );
 
-      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
-      // spread after `reducedProps` but before `style`.
-      return (
-        <Component
-          {...reducedProps}
-          {...passthroughAnimatedPropExplicitValues}
-          style={mergedStyle}
-          ref={ref}
-        />
-      );
-    },
-  );
+    // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+    // spread after `reducedProps` but before `style`.
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughAnimatedPropExplicitValues}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  });
 
   AnimatedComponent.displayName = `Animated(${
     Component.displayName || 'Anonymous'

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -212,11 +212,14 @@ export default class AnimatedProps extends AnimatedNode {
 
   __connectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = findNodeHandle(this.#animatedView);
-    invariant(
-      nativeViewTag != null,
-      'Unable to locate attached view in the native tree',
-    );
+    let nativeViewTag: ?number = findNodeHandle(this.#animatedView);
+    if (nativeViewTag == null) {
+      if (process.env.NODE_ENV === 'test') {
+        nativeViewTag = -1;
+      } else {
+        throw new Error('Unable to locate attached view in the native tree');
+      }
+    }
     NativeAnimatedHelper.API.connectAnimatedNodeToView(
       this.__getNativeTag(),
       nativeViewTag,
@@ -225,11 +228,14 @@ export default class AnimatedProps extends AnimatedNode {
 
   __disconnectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = findNodeHandle(this.#animatedView);
-    invariant(
-      nativeViewTag != null,
-      'Unable to locate attached view in the native tree',
-    );
+    let nativeViewTag: ?number = findNodeHandle(this.#animatedView);
+    if (nativeViewTag == null) {
+      if (process.env.NODE_ENV === 'test') {
+        nativeViewTag = -1;
+      } else {
+        throw new Error('Unable to locate attached view in the native tree');
+      }
+    }
     NativeAnimatedHelper.API.disconnectAnimatedNodeFromView(
       this.__getNativeTag(),
       nativeViewTag,

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -135,6 +135,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
       }
     }
 
+    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
+     * Platform.flow.js */
     return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
   }
 
@@ -172,6 +174,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
       }
     }
 
+    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
+     * Platform.flow.js */
     return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
   }
 

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.
    *
@@ -152,7 +168,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,6 +52,7 @@ const EventNames: Map<
   ? new Map([
       ['change', 'touchExplorationDidChange'],
       ['reduceMotionChanged', 'reduceMotionDidChange'],
+      ['highTextContrastChanged', 'highTextContrastDidChange'],
       ['screenReaderChanged', 'touchExplorationDidChange'],
       ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
     ])
@@ -63,6 +65,7 @@ const EventNames: Map<
       ['reduceMotionChanged', 'reduceMotionChanged'],
       ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
       ['screenReaderChanged', 'screenReaderChanged'],
+      ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
     ]);
 
 /**
@@ -179,6 +182,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 +368,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 +405,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,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';
@@ -23,6 +22,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.
@@ -32,6 +32,7 @@ type AccessibilityEventDefinitionsIOS = {
   grayscaleChanged: [boolean],
   invertColorsChanged: [boolean],
   reduceTransparencyChanged: [boolean],
+  darkerSystemColorsChanged: [boolean],
 };
 
 type AccessibilityEventDefinitions = {
@@ -52,6 +53,7 @@ const EventNames: Map<
   ? new Map([
       ['change', 'touchExplorationDidChange'],
       ['reduceMotionChanged', 'reduceMotionDidChange'],
+      ['highTextContrastChanged', 'highTextContrastDidChange'],
       ['screenReaderChanged', 'touchExplorationDidChange'],
       ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
     ])
@@ -70,6 +72,7 @@ const EventNames: Map<
         ['reduceMotionChanged', 'reduceMotionChanged'],
         ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
         ['screenReaderChanged', 'screenReaderChanged'],
+        ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
       ]);
 
 /**
@@ -192,6 +195,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 +387,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 +424,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/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,

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,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -12,7 +12,7 @@ import type {
   TScrollViewNativeComponentInstance,
   TScrollViewNativeImperativeHandle,
 } from '../../../src/private/components/useSyncOnScroll';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
@@ -961,12 +961,12 @@ class ScrollView extends React.Component<Props, State> {
    * @param {bool} preventNegativeScrolling Whether to allow pulling the content
    *        down to make it meet the keyboard's top. Default is false.
    */
-  scrollResponderScrollNativeHandleToKeyboard: <T>(
-    nodeHandle: number | React.ElementRef<HostComponent<T>>,
+  scrollResponderScrollNativeHandleToKeyboard: (
+    nodeHandle: number | HostInstance,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean,
-  ) => void = <T>(
-    nodeHandle: number | React.ElementRef<HostComponent<T>>,
+  ) => void = (
+    nodeHandle: number | HostInstance,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean,
   ) => {