(cherry pick) Fix sticky header (#7708)

Cherry-pick of the #7668

---------

Co-authored-by: Tomasz Zawadzki <[email protected]>

Author: MatiPl01

apps/common-app/src/examples/StickyHeaderExample.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+const styles = StyleSheet.create({
+  stickyHeader: {
+    height: 80,
+    backgroundColor: 'navy',
+  },
+  listItem: {
+    padding: 16,
+  },
+});
+
+export default function StickyHeaderExample() {
+  const offset = useSharedValue(0);
+
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    offset.value = event.contentOffset.y;
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return { transform: [{ translateY: offset.value }] };
+  });
+
+  return (
+    <Animated.ScrollView onScroll={scrollHandler}>
+      <Animated.View style={[styles.stickyHeader, animatedStyle]} />
+      {Array.from({ length: 100 }).map((_, i) => (
+        <Text key={i} style={styles.listItem}>
+          Item {i + 1}
+        </Text>
+      ))}
+    </Animated.ScrollView>
+  );
+}

apps/common-app/src/examples/index.ts

@@ -124,6 +124,7 @@ import RestoreStateExample from './SharedElementTransitions/RestoreState';
 import TabNavigatorExample from './SharedElementTransitions/TabNavigatorExample';
 import TransitionRestartExample from './SharedElementTransitions/TransitionRestart';
 import SharedStyleExample from './SharedStyleExample';
+import StickyHeaderExample from './StickyHeaderExample';
 import StrictDOMExample from './StrictDOMExample';
 import SvgExample from './SvgExample';
 import SwipeableListExample from './SwipeableListExample';
@@ -380,6 +381,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'useScrollViewOffset',
     screen: ScrollViewOffsetExample,
   },
+  StickyHeaderExample: {
+    icon: '🔝',
+    title: 'Sticky header',
+    screen: StickyHeaderExample,
+  },
   DispatchCommandExample: {
     icon: '🫡',
     title: 'Dispatch command',

packages/react-native-reanimated/Common/cpp/reanimated/Fabric/ReanimatedCommitHook.cpp

@@ -52,7 +52,12 @@ void ReanimatedCommitHook::maybeInitializeLayoutAnimations(
 RootShadowNode::Unshared ReanimatedCommitHook::shadowTreeWillCommit(
     ShadowTree const &,
     RootShadowNode::Shared const &,
-    RootShadowNode::Unshared const &newRootShadowNode) noexcept {
+    RootShadowNode::Unshared const &newRootShadowNode
+#if REACT_NATIVE_MINOR_VERSION >= 80
+    ,
+    const ShadowTreeCommitOptions &commitOptions
+#endif
+    ) noexcept {
   maybeInitializeLayoutAnimations(newRootShadowNode->getSurfaceId());
 
   auto reaShadowNode =
@@ -89,8 +94,15 @@ RootShadowNode::Unshared ReanimatedCommitHook::shadowTreeWillCommit(
     // PropsRegistry.
     // This is very important, since if we didn't pause Reanimated commits,
     // it could lead to RN commits being delayed until the animation is finished
-    // (very bad).
+    // (very bad). We don't pause Reanimated commits for state updates coming
+    // from React Native as this would break sticky header animations.
+#if REACT_NATIVE_MINOR_VERSION >= 80
+    if (commitOptions.source == ShadowTreeCommitSource::React) {
+      propsRegistry_->pauseReanimatedCommits();
+    }
+#else
     propsRegistry_->pauseReanimatedCommits();
+#endif
   }
 
   return rootNode;

packages/react-native-reanimated/Common/cpp/reanimated/Fabric/ReanimatedCommitHook.h

@@ -32,7 +32,12 @@ class ReanimatedCommitHook
   RootShadowNode::Unshared shadowTreeWillCommit(
       ShadowTree const &shadowTree,
       RootShadowNode::Shared const &oldRootShadowNode,
-      RootShadowNode::Unshared const &newRootShadowNode) noexcept override;
+      RootShadowNode::Unshared const &newRootShadowNode
+#if REACT_NATIVE_MINOR_VERSION >= 80
+      ,
+      const ShadowTreeCommitOptions &commitOptions
+#endif
+      ) noexcept override;
 
  private:
   std::shared_ptr<PropsRegistry> propsRegistry_;