react-native-windows 0.66.5 → 0.67.0-preview.4

package/Libraries/Components/Popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAC1B,+CAAgF;AAGhF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,QAAQ,EAAE;QACR,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAOH,MAAM,QAAQ,GAAG,qCAAsB,CAAc,UAAU,CAAC,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAa,KAAM,SAAQ,eAAK,CAAC,SAAyC;IACjE,MAAM,CAAC,wBAAwB,CACpC,SAAsB,EACtB,SAA4B;QAE5B,mGAAmG;QACnG,IAAI,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,MAAM,EAAE;YAC5C,qEAAqE;YACrE,MAAM,SAAS,GAAkB,6BAAc,CAC7C,SAAS,CAAC,MAIqB,CAChC,CAAC;YAEF,OAAO;gBACL,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,SAAS,CAAC,MAAM;aAC5B,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,YAAY,KAAkB;QAC5B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;IACpD,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,EAAC,CAAC;QAC9B,KAAK,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAElD,OAAO,8BAAC,QAAQ,oBAAK,KAAK,IAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC;IAC5D,CAAC;CACF;AApCD,sBAoCC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {findNodeHandle, requireNativeComponent, StyleSheet} from 'react-native';\nimport {IPopupProps} from './PopupProps';\n\nconst styles = StyleSheet.create({\n  rctPopup: {\n    position: 'absolute',\n  },\n});\n\nexport interface IPopupTargetState {\n  target?: number | null;\n  targetRef?: React.ReactNode;\n}\n\nconst RCTPopup = requireNativeComponent<IPopupProps>('RCTPopup');\n\n/**\n * Renders a popup component.\n *\n * This is a controlled component that requires an `onDismiss` callback that\n * updates the `isOpen` prop in order for the component to reflect user actions.\n *\n * @keyword popup\n */\nexport class Popup extends React.Component<IPopupProps, IPopupTargetState> {\n  public static getDerivedStateFromProps(\n    nextProps: IPopupProps,\n    prevState: IPopupTargetState,\n  ): IPopupTargetState {\n    // Check if we're given a new target property; we need to resolve it to a node handle before render\n    if (prevState.targetRef !== nextProps.target) {\n      // Map the 'target' property to a node tag to use in the native layer\n      const newTarget: number | null = findNodeHandle(\n        nextProps.target as\n          | null\n          | number\n          | React.Component<IPopupProps, IPopupTargetState>\n          | React.ComponentClass<Popup>,\n      );\n\n      return {\n        target: newTarget,\n        targetRef: nextProps.target,\n      };\n    }\n\n    return prevState;\n  }\n\n  constructor(props: IPopupProps) {\n    super(props);\n    this.state = {target: undefined, targetRef: null};\n  }\n\n  public render(): JSX.Element {\n    const props = {...this.props};\n    props.style = [styles.rctPopup, this.props.style];\n\n    return <RCTPopup {...props} target={this.state.target} />;\n  }\n}\n"]}
+{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAC1B,+CAAgF;AAGhF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,QAAQ,EAAE;QACR,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAOH,MAAM,QAAQ,GAAG,IAAA,qCAAsB,EAAc,UAAU,CAAC,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAa,KAAM,SAAQ,eAAK,CAAC,SAAyC;IACjE,MAAM,CAAC,wBAAwB,CACpC,SAAsB,EACtB,SAA4B;QAE5B,mGAAmG;QACnG,IAAI,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,MAAM,EAAE;YAC5C,qEAAqE;YACrE,MAAM,SAAS,GAAkB,IAAA,6BAAc,EAC7C,SAAS,CAAC,MAIqB,CAChC,CAAC;YAEF,OAAO;gBACL,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,SAAS,CAAC,MAAM;aAC5B,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,YAAY,KAAkB;QAC5B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;IACpD,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,EAAC,CAAC;QAC9B,KAAK,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAElD,OAAO,8BAAC,QAAQ,OAAK,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAI,CAAC;IAC5D,CAAC;CACF;AApCD,sBAoCC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {findNodeHandle, requireNativeComponent, StyleSheet} from 'react-native';\nimport {IPopupProps} from './PopupProps';\n\nconst styles = StyleSheet.create({\n  rctPopup: {\n    position: 'absolute',\n  },\n});\n\nexport interface IPopupTargetState {\n  target?: number | null;\n  targetRef?: React.ReactNode;\n}\n\nconst RCTPopup = requireNativeComponent<IPopupProps>('RCTPopup');\n\n/**\n * Renders a popup component.\n *\n * This is a controlled component that requires an `onDismiss` callback that\n * updates the `isOpen` prop in order for the component to reflect user actions.\n *\n * @keyword popup\n */\nexport class Popup extends React.Component<IPopupProps, IPopupTargetState> {\n  public static getDerivedStateFromProps(\n    nextProps: IPopupProps,\n    prevState: IPopupTargetState,\n  ): IPopupTargetState {\n    // Check if we're given a new target property; we need to resolve it to a node handle before render\n    if (prevState.targetRef !== nextProps.target) {\n      // Map the 'target' property to a node tag to use in the native layer\n      const newTarget: number | null = findNodeHandle(\n        nextProps.target as\n          | null\n          | number\n          | React.Component<IPopupProps, IPopupTargetState>\n          | React.ComponentClass<Popup>,\n      );\n\n      return {\n        target: newTarget,\n        targetRef: nextProps.target,\n      };\n    }\n\n    return prevState;\n  }\n\n  constructor(props: IPopupProps) {\n    super(props);\n    this.state = {target: undefined, targetRef: null};\n  }\n\n  public render(): JSX.Element {\n    const props = {...this.props};\n    props.style = [styles.rctPopup, this.props.style];\n\n    return <RCTPopup {...props} target={this.state.target} />;\n  }\n}\n"]}

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -31,6 +31,7 @@ const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> = NativeC
       scrollPerfTag: true,
       sendMomentumEvents: true,
       showsHorizontalScrollIndicator: true,
+      snapToAlignment: true,
       snapToEnd: true,
       snapToInterval: true,
       snapToStart: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -346,17 +346,6 @@ type IOSProps = $ReadOnly<{|
    * The default value is true.
    */
   showsHorizontalScrollIndicator?: ?boolean,
-  /**
-   * When `snapToInterval` is set, `snapToAlignment` will define the relationship
-   * of the snapping to the scroll view.
-   *
-   *   - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
-   *   - `'center'` will align the snap in the center
-   *   - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
-   *
-   * @platform ios
-   */
-  snapToAlignment?: ?('start' | 'center' | 'end'),
   /**
    * The current scale of the scroll view content. The default value is 1.0.
    * @platform ios
@@ -597,6 +586,15 @@ export type Props = $ReadOnly<{|
    * for example when you want your list to have an animated hidable header.
    */
   StickyHeaderComponent?: StickyHeaderComponentType,
+  /**
+   * When `snapToInterval` is set, `snapToAlignment` will define the relationship
+   * of the snapping to the scroll view.
+   *
+   *   - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
+   *   - `'center'` will align the snap in the center
+   *   - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
+   */
+  snapToAlignment?: ?('start' | 'center' | 'end'),
   /**
    * When set, causes the scroll view to stop at multiples of the value of
    * `snapToInterval`. This can be used for paginating through children
@@ -1178,11 +1176,6 @@ class ScrollView extends React.Component<Props, State> {
         );
       }
     }
-    if (Platform.OS === 'android') {
-      if (this.props.keyboardDismissMode === 'on-drag' && this._isTouching) {
-        dismissKeyboard();
-      }
-    }
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
@@ -1299,6 +1292,14 @@ class ScrollView extends React.Component<Props, State> {
    */
   _handleScrollBeginDrag: (e: ScrollEvent) => void = (e: ScrollEvent) => {
     FrameRateLogger.beginScroll(); // TODO: track all scrolls after implementing onScrollEndAnimation
+
+    if (
+      Platform.OS === 'android' &&
+      this.props.keyboardDismissMode === 'on-drag'
+    ) {
+      dismissKeyboard();
+    }
+
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   };
 

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -4,25 +4,29 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow
  * @format
  */
 
-import type {LayoutEvent} from '../../Types/CoreEventTypes';
-import setAndForwardRef from 'react-native/Libraries/Utilities/setAndForwardRef';
-import Platform from '../../Utilities/Platform';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import Animated from '../../Animated/Animated';
+import AnimatedImplementation from '../../Animated/AnimatedImplementation';
+import AnimatedAddition from '../../Animated/nodes/AnimatedAddition';
+import AnimatedDiffClamp from '../../Animated/nodes/AnimatedDiffClamp';
+import AnimatedNode from '../../Animated/nodes/AnimatedNode';
+
 import * as React from 'react';
-import {useEffect, useMemo, useRef, useCallback} from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import Platform from '../../Utilities/Platform';
+
+import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
-const AnimatedView = Animated.View;
+const AnimatedView = AnimatedImplementation.createAnimatedComponent(View);
 
 export type Props = $ReadOnly<{
-  children?: React.Element<$FlowFixMe>,
+  children?: React.Element<any>,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutEvent) => void,
-  scrollAnimatedValue: Animated.Value,
+  scrollAnimatedValue: AnimatedImplementation.Value,
   // Will cause sticky headers to stick at the bottom of the ScrollView instead
   // of the top.
   inverted: ?boolean,
@@ -32,275 +36,287 @@ export type Props = $ReadOnly<{
   hiddenOnScroll?: ?boolean,
 }>;
 
-const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
-  Props,
-  $ReadOnly<{
-    setNextHeaderY: number => void,
-    ...$Exact<React.ElementRef<typeof AnimatedView>>,
-  }>,
-> = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
-  const {
-    inverted,
-    scrollViewHeight,
-    hiddenOnScroll,
-    scrollAnimatedValue,
-    nextHeaderLayoutY: _nextHeaderLayoutY,
-  } = props;
+type State = {
+  measured: boolean,
+  layoutY: number,
+  layoutHeight: number,
+  nextHeaderLayoutY: ?number,
+  translateY: ?number,
+  ...
+};
 
-  const [measured, setMeasured] = React.useState<boolean>(false);
-  const [layoutY, setLayoutY] = React.useState<number>(0);
-  const [layoutHeight, setLayoutHeight] = React.useState<number>(0);
-  const [translateY, setTranslateY] = React.useState<?number>(null);
-  const [nextHeaderLayoutY, setNextHeaderLayoutY] = React.useState<?number>(
-    _nextHeaderLayoutY,
-  );
-  const [isFabric, setIsFabric] = React.useState<boolean>(false);
+class ScrollViewStickyHeader extends React.Component<Props, State> {
+  state: State = {
+    measured: false,
+    layoutY: 0,
+    layoutHeight: 0,
+    nextHeaderLayoutY: this.props.nextHeaderLayoutY,
+    translateY: null,
+  };
 
-  const componentRef = React.useRef<?React.ElementRef<typeof AnimatedView>>();
-  const _setNativeRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: ref => {
-      componentRef.current = ref;
-      if (ref) {
-        ref.setNextHeaderY = value => {
-          setNextHeaderLayoutY(value);
-        };
-        setIsFabric(
-          !!(
-            // An internal transform mangles variables with leading "_" as private.
-            // eslint-disable-next-line dot-notation
-            ref['_internalInstanceHandle']?.stateNode?.canonical
-          ),
-        );
-      }
-    },
-  });
+  _translateY: ?AnimatedNode = null;
+  _shouldRecreateTranslateY: boolean = true;
+  _haveReceivedInitialZeroTranslateY: boolean = true;
+  _ref: any; // TODO T53738161: flow type this, and the whole file
 
-  const offset = useMemo(
-    () =>
-      hiddenOnScroll === true
-        ? Animated.diffClamp(
-            scrollAnimatedValue
-              .interpolate({
-                extrapolateLeft: 'clamp',
-                inputRange: [layoutY, layoutY + 1],
-                outputRange: ([0, 1]: Array<number>),
-              })
-              .interpolate({
-                inputRange: [0, 1],
-                outputRange: ([0, -1]: Array<number>),
-              }),
-            -layoutHeight,
-            0,
-          )
-        : null,
-    [scrollAnimatedValue, layoutHeight, layoutY, hiddenOnScroll],
-  );
+  // Fabric-only:
+  _timer: ?TimeoutID;
+  _animatedValueListenerId: string;
+  _animatedValueListener: (valueObject: $ReadOnly<{|value: number|}>) => void;
+  _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
 
-  const [
-    animatedTranslateY,
-    setAnimatedTranslateY,
-  ] = React.useState<Animated.Node>(() => {
-    const inputRange: Array<number> = [-1, 0];
-    const outputRange: Array<number> = [0, 0];
-    const initialTranslateY: Animated.Interpolation = scrollAnimatedValue.interpolate(
-      {
-        inputRange,
-        outputRange,
-      },
-    );
+  setNextHeaderY: (y: number) => void = (y: number): void => {
+    this._shouldRecreateTranslateY = true;
+    this.setState({nextHeaderLayoutY: y});
+  };
 
-    if (offset != null) {
-      return Animated.add(initialTranslateY, offset);
+  componentWillUnmount() {
+    if (this._translateY != null && this._animatedValueListenerId != null) {
+      this._translateY.removeListener(this._animatedValueListenerId);
+    }
+    if (this._timer) {
+      clearTimeout(this._timer);
     }
-    return initialTranslateY;
-  });
+  }
 
-  const _haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
-  const _timer = useRef<?TimeoutID>(null);
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    if (
+      nextProps.scrollViewHeight !== this.props.scrollViewHeight ||
+      nextProps.scrollAnimatedValue !== this.props.scrollAnimatedValue ||
+      nextProps.inverted !== this.props.inverted
+    ) {
+      this._shouldRecreateTranslateY = true;
+    }
+  }
 
-  useEffect(() => {
-    if (translateY !== 0 && translateY != null) {
-      _haveReceivedInitialZeroTranslateY.current = false;
+  updateTranslateListener(
+    translateY: AnimatedImplementation.Interpolation,
+    isFabric: boolean,
+    offset: AnimatedDiffClamp | null,
+  ) {
+    if (this._translateY != null && this._animatedValueListenerId != null) {
+      this._translateY.removeListener(this._animatedValueListenerId);
     }
-  }, [translateY]);
+    offset
+      ? (this._translateY = new AnimatedAddition(translateY, offset))
+      : (this._translateY = translateY);
 
-  // This is called whenever the (Interpolated) Animated Value
-  // updates, which is several times per frame during scrolling.
-  // To ensure that the Fabric ShadowTree has the most recent
-  // translate style of this node, we debounce the value and then
-  // pass it through to the underlying node during render.
-  // This is:
-  // 1. Only an issue in Fabric.
-  // 2. Worse in Android than iOS. In Android, but not iOS, you
-  //    can touch and move your finger slightly and still trigger
-  //    a "tap" event. In iOS, moving will cancel the tap in
-  //    both Fabric and non-Fabric. On Android when you move
-  //    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}) => {
-      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],
-  );
+    this._shouldRecreateTranslateY = false;
 
-  useEffect(() => {
-    const inputRange: Array<number> = [-1, 0];
-    const outputRange: Array<number> = [0, 0];
+    if (!isFabric) {
+      return;
+    }
 
-    if (measured) {
-      if (inverted === true) {
-        // The interpolation looks like:
-        // - Negative scroll: no translation
-        // - `stickStartPoint` is the point at which the header will start sticking.
-        //   It is calculated using the ScrollView viewport height so it is a the bottom.
-        // - Headers that are in the initial viewport will never stick, `stickStartPoint`
-        //   will be negative.
-        // - From 0 to `stickStartPoint` no translation. This will cause the header
-        //   to scroll normally until it reaches the top of the scroll view.
-        // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
-        //   equally to scroll. This will cause the header to stay at the top of the scroll view.
-        // - Past the collision with the next header y: no more translation. This will cause the
-        //   header to continue scrolling up and make room for the next sticky header.
-        //   In the case that there is no next header just translate equally to
-        //   scroll indefinitely.
-        if (scrollViewHeight != null) {
-          const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
-          if (stickStartPoint > 0) {
-            inputRange.push(stickStartPoint);
-            outputRange.push(0);
-            inputRange.push(stickStartPoint + 1);
-            outputRange.push(1);
-            // If the next sticky header has not loaded yet (probably windowing) or is the last
-            // we can just keep it sticked forever.
-            const collisionPoint =
-              (nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight;
-            if (collisionPoint > stickStartPoint) {
-              inputRange.push(collisionPoint, collisionPoint + 1);
-              outputRange.push(
-                collisionPoint - stickStartPoint,
-                collisionPoint - stickStartPoint,
-              );
-            }
-          }
+    if (!this._animatedValueListener) {
+      // This is called whenever the (Interpolated) Animated Value
+      // updates, which is several times per frame during scrolling.
+      // To ensure that the Fabric ShadowTree has the most recent
+      // translate style of this node, we debounce the value and then
+      // pass it through to the underlying node during render.
+      // This is:
+      // 1. Only an issue in Fabric.
+      // 2. Worse in Android than iOS. In Android, but not iOS, you
+      //    can touch and move your finger slightly and still trigger
+      //    a "tap" event. In iOS, moving will cancel the tap in
+      //    both Fabric and non-Fabric. On Android when you move
+      //    your finger, the hit-detection moves from the Android
+      //    platform to JS, so we need the ShadowTree to have knowledge
+      //    of the current position.
+      this._animatedValueListener = ({value}) => {
+        // 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 && !this._haveReceivedInitialZeroTranslateY) {
+          this._haveReceivedInitialZeroTranslateY = true;
+          return;
         }
-      } else {
-        // The interpolation looks like:
-        // - Negative scroll: no translation
-        // - From 0 to the y of the header: no translation. This will cause the header
-        //   to scroll normally until it reaches the top of the scroll view.
-        // - From header y to when the next header y hits the bottom edge of the header: translate
-        //   equally to scroll. This will cause the header to stay at the top of the scroll view.
-        // - Past the collision with the next header y: no more translation. This will cause the
-        //   header to continue scrolling up and make room for the next sticky header.
-        //   In the case that there is no next header just translate equally to
-        //   scroll indefinitely.
-        inputRange.push(layoutY);
-        outputRange.push(0);
-        // If the next sticky header has not loaded yet (probably windowing) or is the last
-        // we can just keep it sticked forever.
-        const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
-        if (collisionPoint >= layoutY) {
-          inputRange.push(collisionPoint, collisionPoint + 1);
-          outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY);
-        } else {
-          inputRange.push(layoutY + 1);
-          outputRange.push(1);
+        if (this._timer) {
+          clearTimeout(this._timer);
         }
-      }
-    }
-
-    let newAnimatedTranslateY: Animated.Node = scrollAnimatedValue.interpolate({
-      inputRange,
-      outputRange,
-    });
-
-    if (offset != null) {
-      newAnimatedTranslateY = Animated.add(newAnimatedTranslateY, offset);
+        this._timer = setTimeout(() => {
+          if (value !== this.state.translateY) {
+            this.setState({
+              translateY: value,
+            });
+          }
+        }, this._debounceTimeout);
+      };
     }
-
-    // add the event listener
-    let animatedListenerId;
-    if (isFabric) {
-      animatedListenerId = newAnimatedTranslateY.addListener(
-        animatedValueListener,
-      );
+    if (this.state.translateY !== 0 && this.state.translateY != null) {
+      this._haveReceivedInitialZeroTranslateY = false;
     }
+    this._animatedValueListenerId = translateY.addListener(
+      this._animatedValueListener,
+    );
+  }
 
-    setAnimatedTranslateY(newAnimatedTranslateY);
+  _onLayout = event => {
+    const layoutY = event.nativeEvent.layout.y;
+    const layoutHeight = event.nativeEvent.layout.height;
+    const measured = true;
 
-    // clean up the event listener and timer
-    return () => {
-      if (animatedListenerId) {
-        newAnimatedTranslateY.removeListener(animatedListenerId);
-      }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
-      }
-    };
-  }, [nextHeaderLayoutY, measured, layoutHeight, layoutY, scrollViewHeight, scrollAnimatedValue, inverted, offset, animatedValueListener, isFabric]);
+    if (
+      layoutY !== this.state.layoutY ||
+      layoutHeight !== this.state.layoutHeight ||
+      measured !== this.state.measured
+    ) {
+      this._shouldRecreateTranslateY = true;
+    }
 
-  const _onLayout = (event: LayoutEvent) => {
-    setLayoutY(event.nativeEvent.layout.y);
-    setLayoutHeight(event.nativeEvent.layout.height);
-    setMeasured(true);
+    this.setState({
+      measured,
+      layoutY,
+      layoutHeight,
+    });
 
-    props.onLayout(event);
-    const child = React.Children.only(props.children);
+    this.props.onLayout(event);
+    const child = React.Children.only(this.props.children);
     if (child.props.onLayout) {
       child.props.onLayout(event);
     }
   };
 
-  const child = React.Children.only(props.children);
+  _setComponentRef = ref => {
+    this._ref = ref;
+  };
+
+  render(): React.Node {
+    // Fabric Detection
+    const isFabric = !!(
+      // An internal transform mangles variables with leading "_" as private.
+      // eslint-disable-next-line dot-notation
+      (this._ref && this._ref['_internalInstanceHandle']?.stateNode?.canonical)
+    );
+    // Initially and in the case of updated props or layout, we
+    // recreate this interpolated value. Otherwise, we do not recreate
+    // when there are state changes.
+    if (this._shouldRecreateTranslateY) {
+      const {inverted, scrollViewHeight} = this.props;
+      const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
+      const inputRange: Array<number> = [-1, 0];
+      const outputRange: Array<number> = [0, 0];
 
-  // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
-  const passthroughAnimatedPropExplicitValues =
-    isFabric && translateY != null
-      ? {
-          style: {transform: [{translateY: translateY}]},
+      if (measured) {
+        if (inverted) {
+          // The interpolation looks like:
+          // - Negative scroll: no translation
+          // - `stickStartPoint` is the point at which the header will start sticking.
+          //   It is calculated using the ScrollView viewport height so it is a the bottom.
+          // - Headers that are in the initial viewport will never stick, `stickStartPoint`
+          //   will be negative.
+          // - From 0 to `stickStartPoint` no translation. This will cause the header
+          //   to scroll normally until it reaches the top of the scroll view.
+          // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
+          //   equally to scroll. This will cause the header to stay at the top of the scroll view.
+          // - Past the collision with the next header y: no more translation. This will cause the
+          //   header to continue scrolling up and make room for the next sticky header.
+          //   In the case that there is no next header just translate equally to
+          //   scroll indefinitely.
+          if (scrollViewHeight != null) {
+            const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
+            if (stickStartPoint > 0) {
+              inputRange.push(stickStartPoint);
+              outputRange.push(0);
+              inputRange.push(stickStartPoint + 1);
+              outputRange.push(1);
+              // If the next sticky header has not loaded yet (probably windowing) or is the last
+              // we can just keep it sticked forever.
+              const collisionPoint =
+                (nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight;
+              if (collisionPoint > stickStartPoint) {
+                inputRange.push(collisionPoint, collisionPoint + 1);
+                outputRange.push(
+                  collisionPoint - stickStartPoint,
+                  collisionPoint - stickStartPoint,
+                );
+              }
+            }
+          }
+        } else {
+          // The interpolation looks like:
+          // - Negative scroll: no translation
+          // - From 0 to the y of the header: no translation. This will cause the header
+          //   to scroll normally until it reaches the top of the scroll view.
+          // - From header y to when the next header y hits the bottom edge of the header: translate
+          //   equally to scroll. This will cause the header to stay at the top of the scroll view.
+          // - Past the collision with the next header y: no more translation. This will cause the
+          //   header to continue scrolling up and make room for the next sticky header.
+          //   In the case that there is no next header just translate equally to
+          //   scroll indefinitely.
+          inputRange.push(layoutY);
+          outputRange.push(0);
+          // If the next sticky header has not loaded yet (probably windowing) or is the last
+          // we can just keep it sticked forever.
+          const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
+          if (collisionPoint >= layoutY) {
+            inputRange.push(collisionPoint, collisionPoint + 1);
+            outputRange.push(
+              collisionPoint - layoutY,
+              collisionPoint - layoutY,
+            );
+          } else {
+            inputRange.push(layoutY + 1);
+            outputRange.push(1);
+          }
         }
-      : null;
+      }
 
-  return (
-    /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
-       included in the Animated.View flow type. */
-    <AnimatedView
-      collapsable={false}
-      nativeID={props.nativeID}
-      onLayout={_onLayout}
-      ref={_setNativeRef}
-      style={[
-        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
-      })}
-    </AnimatedView>
-  );
-});
+      this.updateTranslateListener(
+        this.props.scrollAnimatedValue.interpolate({
+          inputRange,
+          outputRange,
+        }),
+        isFabric,
+        this.props.hiddenOnScroll
+          ? new AnimatedDiffClamp(
+              this.props.scrollAnimatedValue
+                .interpolate({
+                  extrapolateLeft: 'clamp',
+                  inputRange: [layoutY, layoutY + 1],
+                  outputRange: ([0, 1]: Array<number>),
+                })
+                .interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ([0, -1]: Array<number>),
+                }),
+              -this.state.layoutHeight,
+              0,
+            )
+          : null,
+      );
+    }
+
+    const child = React.Children.only(this.props.children);
+
+    // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
+    const passthroughAnimatedPropExplicitValues =
+      isFabric && this.state.translateY != null
+        ? {
+            style: {transform: [{translateY: this.state.translateY}]},
+          }
+        : null;
+
+    return (
+      <AnimatedView
+        collapsable={false}
+        nativeID={this.props.nativeID}
+        onLayout={this._onLayout}
+        ref={this._setComponentRef}
+        style={[
+          child.props.style,
+          styles.header,
+          {transform: [{translateY: this._translateY}]},
+        ]}
+        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
+        })}
+      </AnimatedView>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   header: {
@@ -312,4 +328,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ScrollViewStickyHeaderWithForwardedRef;
+module.exports = ScrollViewStickyHeader;