react-native-windows 0.72.14 → 0.73.0-preview.1

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -65,6 +65,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   _subscriptions: Array<EventSubscription> = [];
   viewRef: {current: React.ElementRef<typeof View> | null, ...};
   _initialFrameHeight: number = 0;
+  _bottom: number = 0;
 
   constructor(props: Props) {
     super(props);
@@ -112,14 +113,15 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   };
 
   _onLayout = async (event: ViewLayoutEvent) => {
-    const wasFrameNull = this._frame == null;
+    const oldFrame = this._frame;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {
       // save the initial frame height, before the keyboard is visible
       this._initialFrameHeight = this._frame.height;
     }
 
-    if (wasFrameNull) {
+    // update bottom height for the first time or when the height is changed
+    if (!oldFrame || oldFrame.height !== this._frame.height) {
       await this._updateBottomIfNecessary();
     }
 
@@ -128,20 +130,32 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     }
   };
 
+  // Avoid unnecessary renders if the KeyboardAvoidingView is disabled.
+  _setBottom = (value: number) => {
+    const enabled = this.props.enabled ?? true;
+    this._bottom = value;
+    if (enabled) {
+      this.setState({bottom: value});
+    }
+  };
+
   _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
-      this.setState({bottom: 0});
+      this._setBottom(0);
       return;
     }
 
     const {duration, easing, endCoordinates} = this._keyboardEvent;
     const height = await this._relativeKeyboardHeight(endCoordinates);
 
-    if (this.state.bottom === height) {
+    if (this._bottom === height) {
       return;
     }
 
-    if (duration && easing) {
+    this._setBottom(height);
+
+    const enabled = this.props.enabled ?? true;
+    if (enabled && duration && easing) {
       LayoutAnimation.configureNext({
         // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
         duration: duration > 10 ? duration : 10,
@@ -151,9 +165,15 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
         },
       });
     }
-    this.setState({bottom: height});
   };
 
+  componentDidUpdate(_: Props, prevState: State): void {
+    const enabled = this.props.enabled ?? true;
+    if (enabled && this._bottom !== prevState.bottom) {
+      this.setState({bottom: this._bottom});
+    }
+  }
+
   componentDidMount(): void {
     if (Platform.OS === 'ios') {
       this._subscriptions = [

package/Libraries/Components/Keyboard/KeyboardExt.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import { IKeyboardProps } from './KeyboardExtProps';
+/**
+ * @deprecated - Exported types should already have the keyboarding properties on them
+ */
 export declare const supportKeyboard: <P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & IKeyboardProps & {
-    children?: any;
+    children?: React.ReactNode;
 }> & React.RefAttributes<any>>;

package/Libraries/Components/Keyboard/KeyboardExt.js

@@ -10,6 +10,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.supportKeyboard = void 0;
 const react_1 = __importDefault(require("react"));
+/**
+ * @deprecated - Exported types should already have the keyboarding properties on them
+ */
 const supportKeyboard = (WrappedComponent) => {
     class SupportKeyboard extends react_1.default.Component {
         render() {

package/Libraries/Components/Keyboard/KeyboardExt.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardExt.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Keyboard/KeyboardExt.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAGnB,MAAM,eAAe,GAAG,CAC7B,gBAAwC,EACxC,EAAE;IAUF,MAAM,eAAgB,SAAQ,eAAK,CAAC,SAAgC;QAC3D,MAAM;YACX,MAAM,EAAC,YAAY,EAAE,GAAG,IAAI,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3C,OAAO,8BAAC,gBAAgB,IAAC,GAAG,EAAE,YAAY,KAAO,IAAU,GAAI,CAAC;QAClE,CAAC;KACF;IAED,OAAO,eAAK,CAAC,UAAU,CACrB,CAAC,KAA+B,EAAE,GAAmB,EAAE,EAAE;QACvD,OAAO,8BAAC,eAAe,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,CAAC;IAC3D,CAAC,CACF,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,eAAe,mBAwB1B","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {IKeyboardProps} from './KeyboardExtProps';\n\nexport const supportKeyboard = <P extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<P>,\n) => {\n  interface IForwardRefProps {\n    forwardedRef: React.Ref<any>;\n  }\n\n  // children is used to avoid error: Property 'children' does not exist on type 'IntrinsicAttributes & ViewProps &\n  // IKeyboardProps & RefAttributes<any>\n  type PropsWithoutForwardedRef = P & IKeyboardProps & {children?: any};\n  type PropsWithForwardedRef = PropsWithoutForwardedRef & IForwardRefProps;\n\n  class SupportKeyboard extends React.Component<PropsWithForwardedRef> {\n    public render(): JSX.Element {\n      const {forwardedRef, ...rest} = this.props;\n      return <WrappedComponent ref={forwardedRef} {...(rest as P)} />;\n    }\n  }\n\n  return React.forwardRef(\n    (props: PropsWithoutForwardedRef, ref: React.Ref<any>) => {\n      return <SupportKeyboard {...props} forwardedRef={ref} />;\n    },\n  );\n};\n"]}
+{"version":3,"file":"KeyboardExt.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Keyboard/KeyboardExt.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAG1B;;GAEG;AACI,MAAM,eAAe,GAAG,CAC7B,gBAAwC,EACxC,EAAE;IAUF,MAAM,eAAgB,SAAQ,eAAK,CAAC,SAAgC;QAC3D,MAAM;YACX,MAAM,EAAC,YAAY,EAAE,GAAG,IAAI,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3C,OAAO,8BAAC,gBAAgB,IAAC,GAAG,EAAE,YAAY,KAAO,IAAU,GAAI,CAAC;QAClE,CAAC;KACF;IAED,OAAO,eAAK,CAAC,UAAU,CACrB,CAAC,KAA+B,EAAE,GAAmB,EAAE,EAAE;QACvD,OAAO,8BAAC,eAAe,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,CAAC;IAC3D,CAAC,CACF,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,eAAe,mBAwB1B","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {IKeyboardProps} from './KeyboardExtProps';\n\n/**\n * @deprecated - Exported types should already have the keyboarding properties on them\n */\nexport const supportKeyboard = <P extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<P>,\n) => {\n  interface IForwardRefProps {\n    forwardedRef: React.Ref<any>;\n  }\n\n  // children is used to avoid error: Property 'children' does not exist on type 'IntrinsicAttributes & ViewProps &\n  // IKeyboardProps & RefAttributes<any>\n  type PropsWithoutForwardedRef = P & React.PropsWithChildren<IKeyboardProps>;\n  type PropsWithForwardedRef = PropsWithoutForwardedRef & IForwardRefProps;\n\n  class SupportKeyboard extends React.Component<PropsWithForwardedRef> {\n    public render(): JSX.Element {\n      const {forwardedRef, ...rest} = this.props;\n      return <WrappedComponent ref={forwardedRef} {...(rest as P)} />;\n    }\n  }\n\n  return React.forwardRef(\n    (props: PropsWithoutForwardedRef, ref: React.Ref<any>) => {\n      return <SupportKeyboard {...props} forwardedRef={ref} />;\n    },\n  );\n};\n"]}

package/Libraries/Components/Keyboard/KeyboardExtProps.d.ts

@@ -3,35 +3,10 @@
  * Licensed under the MIT License.
  * @format
  */
-import { NativeSyntheticEvent } from 'react-native';
-export declare enum EventPhase {
-    None = 0,
-    Capturing = 1,
-    AtTarget = 2,
-    Bubbling = 3
-}
-export declare enum HandledEventPhase {
-    Capturing = 1,
-    Bubbling = 3
-}
-export interface INativeKeyboardEvent {
-    altKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    shiftKey: boolean;
-    key: string;
-    code: string;
-    eventPhase: EventPhase;
-}
-export interface IHandledKeyboardEvent {
-    altKey?: boolean;
-    ctrlKey?: boolean;
-    metaKey?: boolean;
-    shiftKey?: boolean;
-    code: string;
-    handledEventPhase?: HandledEventPhase;
-}
-export type IKeyboardEvent = NativeSyntheticEvent<INativeKeyboardEvent>;
+import { IKeyboardEvent, IHandledKeyboardEvent } from '../View/ViewPropTypes';
+/**
+ * @deprecated
+ */
 export interface IKeyboardProps {
     onKeyDown?: (args: IKeyboardEvent) => void;
     onKeyDownCapture?: (args: IKeyboardEvent) => void;

package/Libraries/Components/Keyboard/KeyboardExtProps.js

@@ -5,21 +5,4 @@
  */
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HandledEventPhase = exports.EventPhase = void 0;
-// Enum already part of public API
-// eslint-disable-next-line no-restricted-syntax
-var EventPhase;
-(function (EventPhase) {
-    EventPhase[EventPhase["None"] = 0] = "None";
-    EventPhase[EventPhase["Capturing"] = 1] = "Capturing";
-    EventPhase[EventPhase["AtTarget"] = 2] = "AtTarget";
-    EventPhase[EventPhase["Bubbling"] = 3] = "Bubbling";
-})(EventPhase = exports.EventPhase || (exports.EventPhase = {}));
-// Enum already part of public API
-// eslint-disable-next-line no-restricted-syntax
-var HandledEventPhase;
-(function (HandledEventPhase) {
-    HandledEventPhase[HandledEventPhase["Capturing"] = 1] = "Capturing";
-    HandledEventPhase[HandledEventPhase["Bubbling"] = 3] = "Bubbling";
-})(HandledEventPhase = exports.HandledEventPhase || (exports.HandledEventPhase = {}));
 //# sourceMappingURL=KeyboardExtProps.js.map

package/Libraries/Components/Keyboard/KeyboardExtProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardExtProps.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Keyboard/KeyboardExtProps.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,CAAC;;;AAIb,kCAAkC;AAClC,gDAAgD;AAChD,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,2CAAQ,CAAA;IACR,qDAAS,CAAA;IACT,mDAAQ,CAAA;IACR,mDAAQ,CAAA;AACV,CAAC,EALW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAKrB;AAED,kCAAkC;AAClC,gDAAgD;AAChD,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,mEAAgC,CAAA;IAChC,iEAA8B,CAAA;AAChC,CAAC,EAHW,iBAAiB,GAAjB,yBAAiB,KAAjB,yBAAiB,QAG5B","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n\n'use strict';\n\nimport {NativeSyntheticEvent} from 'react-native';\n\n// Enum already part of public API\n// eslint-disable-next-line no-restricted-syntax\nexport enum EventPhase {\n  None = 0,\n  Capturing,\n  AtTarget,\n  Bubbling,\n}\n\n// Enum already part of public API\n// eslint-disable-next-line no-restricted-syntax\nexport enum HandledEventPhase {\n  Capturing = EventPhase.Capturing,\n  Bubbling = EventPhase.Bubbling,\n}\n\nexport interface INativeKeyboardEvent {\n  altKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  shiftKey: boolean;\n  key: string;\n  code: string;\n  eventPhase: EventPhase;\n}\n\nexport interface IHandledKeyboardEvent {\n  altKey?: boolean;\n  ctrlKey?: boolean;\n  metaKey?: boolean;\n  shiftKey?: boolean;\n  code: string;\n  handledEventPhase?: HandledEventPhase;\n}\n\nexport type IKeyboardEvent = NativeSyntheticEvent<INativeKeyboardEvent>;\n\nexport interface IKeyboardProps {\n  onKeyDown?: (args: IKeyboardEvent) => void;\n  onKeyDownCapture?: (args: IKeyboardEvent) => void;\n  onKeyUp?: (args: IKeyboardEvent) => void;\n  onKeyUpCapture?: (args: IKeyboardEvent) => void;\n\n  keyDownEvents?: IHandledKeyboardEvent[];\n  keyUpEvents?: IHandledKeyboardEvent[];\n}\n"]}
+{"version":3,"file":"KeyboardExtProps.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Keyboard/KeyboardExtProps.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,CAAC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n\n'use strict';\n\nimport {IKeyboardEvent, IHandledKeyboardEvent} from '../View/ViewPropTypes';\n\n/**\n * @deprecated\n */\nexport interface IKeyboardProps {\n  onKeyDown?: (args: IKeyboardEvent) => void;\n  onKeyDownCapture?: (args: IKeyboardEvent) => void;\n  onKeyUp?: (args: IKeyboardEvent) => void;\n  onKeyUpCapture?: (args: IKeyboardEvent) => void;\n\n  keyDownEvents?: IHandledKeyboardEvent[];\n  keyUpEvents?: IHandledKeyboardEvent[];\n}\n"]}

package/Libraries/Components/Pressable/Pressable.js

@@ -24,6 +24,7 @@ import type {
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {type RectOrSize} from '../../StyleSheet/Rect';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 import View from '../View/View';
 import useAndroidRippleForView, {
   type RippleConfig,
@@ -235,7 +236,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
   } = props;
 
   const viewRef = useRef<React.ElementRef<typeof View> | null>(null);
-  useImperativeHandle(forwardedRef, () => viewRef.current);
+  const mergedRef = useMergeRefs(forwardedRef, viewRef);
 
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
 
@@ -338,7 +339,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     <View
       {...restPropsWithDefaults}
       {...eventHandlers}
-      ref={viewRef}
+      ref={mergedRef}
       style={typeof style === 'function' ? style({pressed}) : style}
       collapsable={false}>
       {typeof children === 'function' ? children({pressed}) : children}

package/Libraries/Components/Pressable/Pressable.windows.js

@@ -28,6 +28,7 @@ import type {
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {type RectOrSize} from '../../StyleSheet/Rect';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 import View from '../View/View';
 import useAndroidRippleForView, {
   type RippleConfig,
@@ -234,7 +235,7 @@ type Props = $ReadOnly<{|
    */
   unstable_pressDelay?: ?number,
   /**
-   * Web to Native Accessibilty props
+   * Web to Native Accessibility props
    * https://github.com/facebook/react-native/issues/34424
    */
   'aria-label'?: ?string,
@@ -287,7 +288,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
   } = props;
 
   const viewRef = useRef<React.ElementRef<typeof View> | null>(null);
-  useImperativeHandle(forwardedRef, () => viewRef.current);
+  const mergedRef = useMergeRefs(forwardedRef, viewRef);
 
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
 
@@ -402,7 +403,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     <View
       {...restPropsWithDefaults}
       {...eventHandlers}
-      ref={viewRef}
+      ref={mergedRef}
       style={typeof style === 'function' ? style({pressed}) : style}>
       {typeof children === 'function' ? children({pressed}) : children}
       {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}

package/Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -71,7 +71,7 @@ export default function useAndroidRippleForView(
 
       return {
         viewProps:
-          foreground === true
+          foreground === true && Platform.Version >= 23
             ? {nativeForegroundAndroid: nativeRippleValue}
             : {nativeBackgroundAndroid: nativeRippleValue},
         onPressIn(event: PressEvent): void {

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js

@@ -0,0 +1,20 @@
+/**
+ * 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
+ * @flow strict-local
+ */
+
+'use strict';
+
+import typeof UnimplementedViewType from '../UnimplementedViews/UnimplementedView';
+import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNativeComponent';
+
+export type {ProgressBarAndroidProps} from './ProgressBarAndroid.android';
+
+module.exports = (require('../UnimplementedViews/UnimplementedView'):
+  | UnimplementedViewType
+  | ProgressBarAndroidNativeComponentType);

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.windows.js

@@ -2,7 +2,13 @@
  * Copyright (c) Microsoft Corporation.
  * Licensed under the MIT License.
  * @format
+ * @flow strict-local
  */
 'use strict';
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+import typeof UnimplementedViewType from '../UnimplementedViews/UnimplementedView';
+import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNativeComponent';
+
+module.exports = (require('../UnimplementedViews/UnimplementedView'):
+  | UnimplementedViewType
+  | ProgressBarAndroidNativeComponentType);

package/Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -14,8 +14,6 @@ import Platform from '../../Utilities/Platform';
 import View from '../View/View';
 import * as React from 'react';
 
-let exported: React.AbstractComponent<ViewProps, React.ElementRef<typeof View>>;
-
 /**
  * Renders nested content and automatically applies paddings reflect the portion
  * of the view that is not covered by navigation bars, tab bars, toolbars, and
@@ -25,10 +23,12 @@ let exported: React.AbstractComponent<ViewProps, React.ElementRef<typeof View>>;
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
  */
-if (Platform.OS === 'android') {
-  exported = View;
-} else {
-  exported = require('./RCTSafeAreaViewNativeComponent').default;
-}
+const exported: React.AbstractComponent<
+  ViewProps,
+  React.ElementRef<typeof View>,
+> = Platform.select({
+  ios: require('./RCTSafeAreaViewNativeComponent').default,
+  default: View,
+});
 
 export default exported;

package/Libraries/Components/SafeAreaView/SafeAreaView.windows.js

@@ -14,8 +14,6 @@ import Platform from '../../Utilities/Platform';
 import View from '../View/View';
 import * as React from 'react';
 
-let exported: React.AbstractComponent<ViewProps, React.ElementRef<typeof View>>;
-
 /**
  * Renders nested content and automatically applies paddings reflect the portion
  * of the view that is not covered by navigation bars, tab bars, toolbars, and
@@ -25,13 +23,12 @@ let exported: React.AbstractComponent<ViewProps, React.ElementRef<typeof View>>;
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
  */
-
-// [Windows - Added windows to if
-if (Platform.OS === 'android' || Platform.OS === 'windows') {
-  // Windows]
-  exported = View;
-} else {
-  exported = require('./RCTSafeAreaViewNativeComponent').default;
-}
+const exported: React.AbstractComponent<
+  ViewProps,
+  React.ElementRef<typeof View>,
+> = Platform.select({
+  ios: require('./RCTSafeAreaViewNativeComponent').default,
+  default: View,
+});
 
 export default exported;

package/Libraries/Components/ScrollView/ScrollView.js

@@ -1665,6 +1665,7 @@ class ScrollView extends React.Component<Props, State> {
       // $FlowFixMe[underconstrained-implicit-instantiation]
       const style = flattenStyle(this.props.style);
       const childLayoutProps = ['alignItems', 'justifyContent'].filter(
+        // $FlowFixMe[incompatible-use]
         prop => style && style[prop] !== undefined,
       );
       invariant(
@@ -1700,7 +1701,6 @@ class ScrollView extends React.Component<Props, State> {
           return (
             <StickyHeaderComponent
               key={key}
-              nativeID={'StickyHeader-' + key} /* TODO: T68258846. */
               ref={ref => this._setStickyHeaderRef(key, ref)}
               nextHeaderLayoutY={this._headerLayoutYs.get(
                 this._getKeyForIndex(nextIndex, childArray),
@@ -1837,6 +1837,7 @@ class ScrollView extends React.Component<Props, State> {
         // Note: we should split props.style on the inner and outer props
         // however, the ScrollView still needs the baseStyle to be scrollable
         // $FlowFixMe[underconstrained-implicit-instantiation]
+        // $FlowFixMe[incompatible-call]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         return React.cloneElement(
           refreshControl,
@@ -1924,6 +1925,7 @@ function Wrapper(props, ref: (mixed => mixed) | {current: mixed, ...}) {
   return <ScrollView {...props} scrollViewRef={ref} />;
 }
 Wrapper.displayName = 'ScrollView';
+// $FlowFixMe[incompatible-call]
 const ForwardedScrollView = React.forwardRef(Wrapper);
 
 // $FlowFixMe[prop-missing] Add static context to ForwardedScrollView

package/Libraries/Components/ScrollView/ScrollView.windows.js

@@ -1665,6 +1665,7 @@ class ScrollView extends React.Component<Props, State> {
       // $FlowFixMe[underconstrained-implicit-instantiation]
       const style = flattenStyle(this.props.style);
       const childLayoutProps = ['alignItems', 'justifyContent'].filter(
+        // $FlowFixMe[incompatible-use]
         prop => style && style[prop] !== undefined,
       );
       invariant(
@@ -1700,7 +1701,6 @@ class ScrollView extends React.Component<Props, State> {
           return (
             <StickyHeaderComponent
               key={key}
-              nativeID={'StickyHeader-' + key} /* TODO: T68258846. */
               ref={ref => this._setStickyHeaderRef(key, ref)}
               nextHeaderLayoutY={this._headerLayoutYs.get(
                 this._getKeyForIndex(nextIndex, childArray),
@@ -1838,6 +1838,7 @@ class ScrollView extends React.Component<Props, State> {
         // Note: we should split props.style on the inner and outer props
         // however, the ScrollView still needs the baseStyle to be scrollable
         // $FlowFixMe[underconstrained-implicit-instantiation]
+        // $FlowFixMe[incompatible-call]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         return React.cloneElement(
           refreshControl,
@@ -1925,6 +1926,7 @@ function Wrapper(props, ref: (mixed => mixed) | {current: mixed, ...}) {
   return <ScrollView {...props} scrollViewRef={ref} />;
 }
 Wrapper.displayName = 'ScrollView';
+// $FlowFixMe[incompatible-call]
 const ForwardedScrollView = React.forwardRef(Wrapper);
 
 // $FlowFixMe[prop-missing] Add static context to ForwardedScrollView

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -11,7 +11,7 @@
 import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
 import Animated from '../../Animated/Animated';
-import {isPublicInstance as isFabricPublicInstance} from '../../Renderer/public/ReactFabricPublicInstanceUtils';
+import {isPublicInstance as isFabricPublicInstance} from '../../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
@@ -58,17 +58,16 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     useState<?number>(_nextHeaderLayoutY);
   const [isFabric, setIsFabric] = useState<boolean>(false);
 
-  const callbackRef = (ref: Instance | null): void => {
+  const callbackRef = useCallback((ref: Instance | null): void => {
     if (ref == null) {
       return;
     }
-    ref.setNextHeaderY = value => {
-      setNextHeaderLayoutY(value);
-    };
+    ref.setNextHeaderY = setNextHeaderLayoutY;
     setIsFabric(isFabricPublicInstance(ref));
-  };
+  }, []);
   const ref: (React.ElementRef<typeof Animated.View> | null) => void =
     // $FlowFixMe[incompatible-type] - Ref is mutated by `callbackRef`.
+    // $FlowFixMe[incompatible-call]
     useMergeRefs<Instance | null>(callbackRef, forwardedRef);
 
   const offset = useMemo(
@@ -108,12 +107,12 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     },
   );
 
-  const _haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
-  const _timer = useRef<?TimeoutID>(null);
+  const haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
+  const translateYDebounceTimer = useRef<?TimeoutID>(null);
 
   useEffect(() => {
     if (translateY !== 0 && translateY != null) {
-      _haveReceivedInitialZeroTranslateY.current = false;
+      haveReceivedInitialZeroTranslateY.current = false;
     }
   }, [translateY]);
 
@@ -131,26 +130,22 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
   //    your finger, the hit-detection moves from the Android
   //    platform to JS, so we need the ShadowTree to have knowledge
   //    of the current position.
-  const animatedValueListener = useCallback(
-    ({value}: $FlowFixMe) => {
-      const _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
-      // When the AnimatedInterpolation is recreated, it always initializes
-      // to a value of zero and emits a value change of 0 to its listeners.
-      if (value === 0 && !_haveReceivedInitialZeroTranslateY.current) {
-        _haveReceivedInitialZeroTranslateY.current = true;
-        return;
-      }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
-      }
-      _timer.current = setTimeout(() => {
-        if (value !== translateY) {
-          setTranslateY(value);
-        }
-      }, _debounceTimeout);
-    },
-    [translateY],
-  );
+  const animatedValueListener = useCallback(({value}: $FlowFixMe) => {
+    const debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
+    // When the AnimatedInterpolation is recreated, it always initializes
+    // to a value of zero and emits a value change of 0 to its listeners.
+    if (value === 0 && !haveReceivedInitialZeroTranslateY.current) {
+      haveReceivedInitialZeroTranslateY.current = true;
+      return;
+    }
+    if (translateYDebounceTimer.current != null) {
+      clearTimeout(translateYDebounceTimer.current);
+    }
+    translateYDebounceTimer.current = setTimeout(
+      () => setTranslateY(value),
+      debounceTimeout,
+    );
+  }, []);
 
   useEffect(() => {
     const inputRange: Array<number> = [-1, 0];
@@ -242,11 +237,22 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
       if (animatedListenerId) {
         newAnimatedTranslateY.removeListener(animatedListenerId);
       }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
+      if (translateYDebounceTimer.current != null) {
+        clearTimeout(translateYDebounceTimer.current);
       }
     };
-  }, [nextHeaderLayoutY, measured, layoutHeight, layoutY, scrollViewHeight, scrollAnimatedValue, inverted, offset, animatedValueListener, isFabric]);
+  }, [
+    nextHeaderLayoutY,
+    measured,
+    layoutHeight,
+    layoutY,
+    scrollViewHeight,
+    scrollAnimatedValue,
+    inverted,
+    offset,
+    animatedValueListener,
+    isFabric,
+  ]);
 
   const _onLayout = (event: LayoutEvent) => {
     setLayoutY(event.nativeEvent.layout.y);
@@ -262,17 +268,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
 
   const child = React.Children.only<$FlowFixMe>(props.children);
 
-  // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
-  const passthroughAnimatedPropExplicitValues =
-    isFabric && translateY != null
-      ? {
-          style: {transform: [{translateY: translateY}]},
-        }
-      : null;
-
   return (
-    /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
-       included in the Animated.View flow type. */
     <Animated.View
       collapsable={false}
       nativeID={props.nativeID}
@@ -282,10 +278,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
         child.props.style,
         styles.header,
         {transform: [{translateY: animatedTranslateY}]},
-      ]}
-      passthroughAnimatedPropExplicitValues={
-        passthroughAnimatedPropExplicitValues
-      }>
+      ]}>
       {React.cloneElement(child, {
         style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout

package/Libraries/Components/Switch/Switch.js

@@ -155,6 +155,7 @@ const SwitchWithForwardedRef: React.AbstractComponent<
     typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
   > | null>(null);
 
+  // $FlowFixMe[incompatible-call]
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
   const [native, setNative] = React.useState({value: (null: ?boolean)});