From 67ffb85e8d5501034632bf4669a2a493daa83da7 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 10 Dec 2024 09:28:40 +0100
Subject: [PATCH 1/2] Add reproduction

---
 apps/src/tests/TestAnimation.tsx | 104 +++++++++++++++++++++++++++++++
 apps/src/tests/index.ts          |   1 +
 2 files changed, 105 insertions(+)
 create mode 100644 apps/src/tests/TestAnimation.tsx

diff --git a/apps/src/tests/TestAnimation.tsx b/apps/src/tests/TestAnimation.tsx
new file mode 100644
index 000000000..e4058c5df
--- /dev/null
+++ b/apps/src/tests/TestAnimation.tsx
@@ -0,0 +1,104 @@
+import { NavigationContainer, RouteProp } from '@react-navigation/native';
+import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
+import React from 'react';
+import { View } from 'react-native';
+import { Button, Square } from '../shared';
+
+type ParamList = {
+  Home: undefined;
+  Second: undefined;
+  Third: undefined;
+  Fourth: undefined;
+  Fifth: undefined;
+}
+
+type RoutePropBase<RouteName extends keyof ParamList> = {
+  navigation: NativeStackNavigationProp<ParamList>,
+  route: RouteProp<ParamList, RouteName>;
+}
+
+const Stack = createNativeStackNavigator<ParamList>();
+
+function Contents(): React.ReactNode {
+  return (
+    <View>
+      <Square size={200} color="lightblue" />
+    </View>
+  );
+}
+
+function Home({ navigation }: RoutePropBase<'Home'>): React.ReactNode {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'lightgreen', justifyContent: 'center', alignItems: 'center' }}>
+      <View style={{ width: '100%', height: 20, backgroundColor: 'red' }} />
+      <Button title="Go Second" onPress={() => navigation.navigate('Second')} />
+      <Contents />
+    </View>
+  );
+}
+
+
+function Second({ navigation }: RoutePropBase<'Second'>): React.ReactNode {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'lightseagreen', justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Go Third" onPress={() => navigation.navigate('Third')} />
+      <Button title="Go back" onPress={() => navigation.popTo('Home')} />
+      <Contents />
+    </View>
+  );
+}
+
+function Third({ navigation }: RoutePropBase<'Third'>): React.ReactNode {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'lightcoral', justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Go Fourth" onPress={() => navigation.navigate('Fourth')} />
+      <Button title="Go back" onPress={() => navigation.popTo('Second')} />
+      <Contents />
+    </View>
+  );
+}
+
+function Fourth({ navigation }: RoutePropBase<'Fourth'>): React.ReactNode {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'orange', justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Go Fifth" onPress={() => navigation.navigate('Fifth')} />
+      <Button title="Go back" onPress={() => navigation.popTo('Second')} />
+      <Contents />
+    </View>
+  );
+}
+
+function Fifth({ navigation }: RoutePropBase<'Fifth'>): React.ReactNode {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'pink', justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Go back" onPress={() => navigation.popTo('Fourth')} />
+      <Contents />
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{
+        fullScreenGestureEnabled: true,
+        animation: 'simple_push',
+        //animationMatchesGesture: true,
+      }}>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen name="Second" component={Second} options={{
+          headerShown: true,
+        }}/>
+        <Stack.Screen name="Third" component={Third} options={{
+          headerShown: true,
+        }} />
+        <Stack.Screen name="Fourth" component={Fourth} options={{
+          headerShown: false,
+        }} />
+        <Stack.Screen name="Fifth" component={Fifth} options={{
+          headerShown: true,
+        }} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index e4a41b12e..896e932eb 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -127,4 +127,5 @@ export { default as TestModalNavigation } from './TestModalNavigation';
 export { default as TestMemoryLeak } from './TestMemoryLeak';
 export { default as TestFormSheet } from './TestFormSheet';
 export { default as TestAndroidTransitions } from './TestAndroidTransitions';
+export { default as TestAnimation } from './TestAnimation';
 

From 0cf148e518047a9ccd8ef6062ae836f68db41b5a Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 10 Dec 2024 09:41:55 +0100
Subject: [PATCH 2/2] Do not override `interruptibleAnimatorForTransition:`
 preventing content jump

**important**: however at the same time we restore v3 header animation!
---
 ios/RNSScreenStackAnimator.mm | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ios/RNSScreenStackAnimator.mm b/ios/RNSScreenStackAnimator.mm
index 410a46128..65a99f284 100644
--- a/ios/RNSScreenStackAnimator.mm
+++ b/ios/RNSScreenStackAnimator.mm
@@ -70,11 +70,11 @@ - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)t
   return _transitionDuration;
 }
 
-- (id<UIViewImplicitlyAnimating>)interruptibleAnimatorForTransition:
-    (id<UIViewControllerContextTransitioning>)transitionContext
-{
-  return _inFlightAnimator;
-}
+//- (id<UIViewImplicitlyAnimating>)interruptibleAnimatorForTransition:
+//    (id<UIViewControllerContextTransitioning>)transitionContext
+//{
+//  return _inFlightAnimator;
+//}
 
 - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
 {