From eedbb0fa16066fb093e758ed15b5601058776193 Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Mon, 4 Nov 2024 22:53:38 +0100
Subject: [PATCH 1/8] refactor: move ScreenGestureDetector to ScreenStack
 (#2449)

## Description

This PR moves logic required by Custom Screen Transition to
react-native-screens from react-navigation (see
https://github.com/react-navigation/react-navigation/pull/11943).
Instead of wrapping ScreenStack in NativeStack in react-navigation, we
would add it to ScreenStack.

## Testing

See Example App > Swipe Back Animation (changes from react-navigation
required:
https://github.com/react-navigation/react-navigation/pull/12204)

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [x] Ensured that CI passes
---
 src/components/ScreenStack.tsx                | 108 +++++++++++++++---
 src/contexts.tsx                              |   6 +
 .../GestureDetectorProvider.tsx               |   4 +-
 src/gesture-handler/ScreenGestureDetector.tsx |   8 +-
 src/index.tsx                                 |   5 -
 src/native-stack/types.tsx                    |   4 +
 src/native-stack/views/NativeStackView.tsx    |  54 +++------
 src/types.tsx                                 |  71 +++++++++++-
 8 files changed, 190 insertions(+), 70 deletions(-)
 create mode 100644 src/contexts.tsx

diff --git a/src/components/ScreenStack.tsx b/src/components/ScreenStack.tsx
index d1eb86b0cd..205c402a36 100644
--- a/src/components/ScreenStack.tsx
+++ b/src/components/ScreenStack.tsx
@@ -1,9 +1,16 @@
 'use client';
 
-import React from 'react';
-import { ScreenStackProps } from '../types';
+import React, { PropsWithChildren } from 'react';
+import {
+  GestureDetectorBridge,
+  GestureProviderProps,
+  GoBackGesture,
+  ScreenStackProps,
+} from '../types';
+import { GHContext } from '../contexts';
 import { freezeEnabled } from '../core';
 import DelayedFreeze from './helpers/DelayedFreeze';
+import warnOnce from 'warn-once';
 
 // Native components
 import ScreenStackNativeComponent, {
@@ -14,10 +21,58 @@ function isFabric() {
   return 'nativeFabricUIManager' in global;
 }
 
+const assertGHProvider = (
+  ScreenGestureDetector: (
+    props: PropsWithChildren<GestureProviderProps>,
+  ) => React.JSX.Element,
+  goBackGesture: GoBackGesture | undefined,
+) => {
+  const isGestureDetectorProviderNotDetected =
+    ScreenGestureDetector.name !== 'GHWrapper' && goBackGesture !== undefined;
+
+  warnOnce(
+    isGestureDetectorProviderNotDetected,
+    'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.',
+  );
+};
+
+const assertCustomScreenTransitionsProps = (
+  screensRefs: ScreenStackProps['screensRefs'],
+  currentScreenId: ScreenStackProps['currentScreenId'],
+  goBackGesture: ScreenStackProps['goBackGesture'],
+) => {
+  const isGestureDetectorNotConfiguredProperly =
+    goBackGesture !== undefined &&
+    screensRefs === undefined &&
+    currentScreenId === undefined;
+
+  warnOnce(
+    isGestureDetectorNotConfiguredProperly,
+    'Custom Screen Transition require screensRefs and currentScreenId to be provided.',
+  );
+};
+
 function ScreenStack(props: ScreenStackProps) {
-  const { children, gestureDetectorBridge, ...rest } = props;
+  const {
+    goBackGesture,
+    screensRefs,
+    currentScreenId,
+    transitionAnimation,
+    screenEdgeGesture,
+    onFinishTransitioning,
+    children,
+    ...rest
+  } = props;
+
   const ref = React.useRef(null);
   const size = React.Children.count(children);
+  const ScreenGestureDetector = React.useContext(GHContext);
+  const gestureDetectorBridge = React.useRef<GestureDetectorBridge>({
+    stackUseEffectCallback: _stackRef => {
+      // this method will be overriden in GestureDetector
+    },
+  });
+
   // freezes all screens except the top one
   const childrenWithFreeze = React.Children.map(children, (child, index) => {
     // @ts-expect-error it's either SceneView in v6 or RouteView in v5
@@ -40,24 +95,39 @@ function ScreenStack(props: ScreenStackProps) {
   });
 
   React.useEffect(() => {
-    if (gestureDetectorBridge) {
-      gestureDetectorBridge.current.stackUseEffectCallback(ref);
-    }
+    gestureDetectorBridge.current.stackUseEffectCallback(ref);
   });
+
+  assertGHProvider(ScreenGestureDetector, goBackGesture);
+
+  assertCustomScreenTransitionsProps(
+    screensRefs,
+    currentScreenId,
+    goBackGesture,
+  );
+
   return (
-    <ScreenStackNativeComponent
-      {...rest}
-      /**
-       * This messy override is to conform NativeProps used by codegen and
-       * our Public API. To see reasoning go to this PR:
-       * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
-       */
-      onFinishTransitioning={
-        props.onFinishTransitioning as NativeProps['onFinishTransitioning']
-      }
-      ref={ref}>
-      {childrenWithFreeze}
-    </ScreenStackNativeComponent>
+    <ScreenGestureDetector
+      gestureDetectorBridge={gestureDetectorBridge}
+      goBackGesture={goBackGesture}
+      transitionAnimation={transitionAnimation}
+      screenEdgeGesture={screenEdgeGesture ?? false}
+      screensRefs={screensRefs}
+      currentScreenId={currentScreenId}>
+      <ScreenStackNativeComponent
+        {...rest}
+        /**
+         * This messy override is to conform NativeProps used by codegen and
+         * our Public API. To see reasoning go to this PR:
+         * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
+         */
+        onFinishTransitioning={
+          onFinishTransitioning as NativeProps['onFinishTransitioning']
+        }
+        ref={ref}>
+        {childrenWithFreeze}
+      </ScreenStackNativeComponent>
+    </ScreenGestureDetector>
   );
 }
 
diff --git a/src/contexts.tsx b/src/contexts.tsx
new file mode 100644
index 0000000000..2b95c20a22
--- /dev/null
+++ b/src/contexts.tsx
@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+import { GestureProviderProps } from './types';
+
+export const GHContext = React.createContext(
+  (props: PropsWithChildren<GestureProviderProps>) => <>{props.children}</>,
+);
diff --git a/src/gesture-handler/GestureDetectorProvider.tsx b/src/gesture-handler/GestureDetectorProvider.tsx
index eb19172a92..8aab787885 100644
--- a/src/gesture-handler/GestureDetectorProvider.tsx
+++ b/src/gesture-handler/GestureDetectorProvider.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { GHContext } from '../native-stack/contexts/GHContext';
+import { GestureProviderProps } from '../types';
+import { GHContext } from '../contexts';
 import ScreenGestureDetector from './ScreenGestureDetector';
-import type { GestureProviderProps } from '../native-stack/types';
 
 function GHWrapper(props: GestureProviderProps) {
   return <ScreenGestureDetector {...props} />;
diff --git a/src/gesture-handler/ScreenGestureDetector.tsx b/src/gesture-handler/ScreenGestureDetector.tsx
index b5e8670426..dc4c7c3816 100644
--- a/src/gesture-handler/ScreenGestureDetector.tsx
+++ b/src/gesture-handler/ScreenGestureDetector.tsx
@@ -14,7 +14,6 @@ import {
   makeMutable,
   runOnUI,
 } from 'react-native-reanimated';
-import type { GestureProviderProps } from 'src/native-stack/types';
 import { getShadowNodeWrapperAndTagFromRef, isFabric } from './fabricUtils';
 import { RNScreensTurboModule } from './RNScreensTurboModule';
 import { DefaultEvent, DefaultScreenDimensions } from './defaults';
@@ -23,6 +22,7 @@ import {
   checkIfTransitionCancelled,
   getAnimationForTransition,
 } from './constraints';
+import { GestureProviderProps } from '../types';
 
 const EmptyGestureHandler = Gesture.Fling();
 
@@ -33,7 +33,7 @@ const ScreenGestureDetector = ({
   screenEdgeGesture,
   transitionAnimation: customTransitionAnimation,
   screensRefs,
-  currentRouteKey,
+  currentScreenId,
 }: GestureProviderProps) => {
   const sharedEvent = useSharedValue(DefaultEvent);
   const startingGesturePosition = useSharedValue(DefaultEvent);
@@ -73,7 +73,7 @@ const ScreenGestureDetector = ({
   };
 
   useEffect(() => {
-    if (!IS_FABRIC || !goBackGesture) {
+    if (!IS_FABRIC || !goBackGesture || screensRefs === undefined) {
       return;
     }
     const screenTagToNodeWrapper: Record<string, Record<string, unknown>> = {};
@@ -87,7 +87,7 @@ const ScreenGestureDetector = ({
       }
     }
     screenTagToNodeWrapperUI.value = screenTagToNodeWrapper;
-  }, [currentRouteKey, goBackGesture]);
+  }, [currentScreenId, goBackGesture]);
 
   function computeProgress(
     event: GestureUpdateEvent<PanGestureHandlerEventPayload>,
diff --git a/src/index.tsx b/src/index.tsx
index 76fd648d29..0403427f1f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -41,11 +41,6 @@ export { default as FullWindowOverlay } from './components/FullWindowOverlay';
 export { default as ScreenFooter } from './components/ScreenFooter';
 export { default as ScreenContentWrapper } from './components/ScreenContentWrapper';
 
-/**
- * Contexts
- */
-export { GHContext } from './native-stack/contexts/GHContext';
-
 /**
  * Utils
  */
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index 5f319d108e..da7a020a31 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -564,6 +564,10 @@ export type NativeStackDescriptorMap = {
   [key: string]: NativeStackDescriptor;
 };
 
+/**
+ * Those below copied to src/types.ts should be removed with next minor and native-stack v5 removal
+ */
+
 /**
  * copy from GestureHandler to avoid strong dependency
  * @deprecated NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index 6ffe4a20a3..6066541cfd 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -11,10 +11,9 @@ import {
 // eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import warnOnce from 'warn-once';
-import { StackPresentationTypes, GestureDetectorBridge } from '../../types';
+import { StackPresentationTypes } from '../../types';
 import ScreenStack from '../../components/ScreenStack';
 import ScreenContentWrapper from '../../components/ScreenContentWrapper';
-import { GHContext } from '../contexts/GHContext';
 import { ScreenContext } from '../../components/Screen';
 import {
   ParamListBase,
@@ -477,53 +476,32 @@ function NativeStackViewInner({
   const currentRouteKey = routes[state.index].key;
   const { goBackGesture, transitionAnimation, screenEdgeGesture } =
     descriptors[currentRouteKey].options;
-  const gestureDetectorBridge = React.useRef<GestureDetectorBridge>({
-    stackUseEffectCallback: _stackRef => {
-      // this method will be override in GestureDetector
-    },
-  });
   type RefHolder = Record<
     string,
     React.MutableRefObject<React.Ref<React.Component>>
   >;
   const screensRefs = React.useRef<RefHolder>({});
-  const ScreenGestureDetector = React.useContext(GHContext);
-
-  React.useEffect(() => {
-    if (
-      ScreenGestureDetector.name !== 'GHWrapper' &&
-      goBackGesture !== undefined
-    ) {
-      console.warn(
-        'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.',
-      );
-    }
-  }, [ScreenGestureDetector.name, goBackGesture]);
 
   return (
-    <ScreenGestureDetector
-      gestureDetectorBridge={gestureDetectorBridge}
+    <ScreenStack
+      style={styles.container}
       goBackGesture={goBackGesture}
       transitionAnimation={transitionAnimation}
       screenEdgeGesture={screenEdgeGesture ?? false}
       screensRefs={screensRefs}
-      currentRouteKey={currentRouteKey}>
-      <ScreenStack
-        style={styles.container}
-        gestureDetectorBridge={gestureDetectorBridge}>
-        {routes.map((route, index) => (
-          <RouteView
-            key={route.key}
-            descriptors={descriptors}
-            route={route}
-            index={index}
-            navigation={navigation}
-            stateKey={key}
-            screensRefs={screensRefs}
-          />
-        ))}
-      </ScreenStack>
-    </ScreenGestureDetector>
+      currentScreenId={currentRouteKey}>
+      {routes.map((route, index) => (
+        <RouteView
+          key={route.key}
+          descriptors={descriptors}
+          route={route}
+          index={index}
+          navigation={navigation}
+          stateKey={key}
+          screensRefs={screensRefs}
+        />
+      ))}
+    </ScreenStack>
   );
 }
 
diff --git a/src/types.tsx b/src/types.tsx
index 162ada4161..f746b6ba28 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -487,13 +487,12 @@ export interface GestureDetectorBridge {
   ) => void;
 }
 
-export interface ScreenStackProps extends ViewProps {
+export interface ScreenStackProps extends ViewProps, GestureProps {
   children?: React.ReactNode;
   /**
    * A callback that gets called when the current screen finishes its transition.
    */
   onFinishTransitioning?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-  gestureDetectorBridge?: React.MutableRefObject<GestureDetectorBridge>;
   ref?: React.MutableRefObject<React.Ref<View>>;
 }
 
@@ -799,3 +798,71 @@ export interface SearchBarProps {
    */
   shouldShowHintSearchIcon?: boolean;
 }
+
+/**
+ * Custom Screen Transition
+ */
+
+/**
+ * copy from GestureHandler to avoid strong dependency
+ */
+export type PanGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  translationX: number;
+  translationY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+/**
+ * copy from Reanimated to avoid strong dependency
+ */
+export type GoBackGesture =
+  | 'swipeRight'
+  | 'swipeLeft'
+  | 'swipeUp'
+  | 'swipeDown'
+  | 'verticalSwipe'
+  | 'horizontalSwipe'
+  | 'twoDimensionalSwipe';
+
+export interface MeasuredDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+export type AnimatedScreenTransition = {
+  topScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions,
+  ) => Record<string, unknown>;
+  belowTopScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions,
+  ) => Record<string, unknown>;
+};
+
+export type ScreensRefsHolder = Record<
+  string,
+  React.MutableRefObject<React.Ref<React.Component>>
+>;
+
+export interface GestureProps {
+  screensRefs?: React.MutableRefObject<ScreensRefsHolder>;
+  currentScreenId?: string;
+  goBackGesture?: GoBackGesture;
+  transitionAnimation?: AnimatedScreenTransition;
+  screenEdgeGesture?: boolean;
+}
+
+export interface GestureProviderProps extends GestureProps {
+  children?: React.ReactNode;
+  gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;
+}

From 5a2e4ebab50f2774b3810d7ce34ae176f2419be5 Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:10:17 +0100
Subject: [PATCH 2/8] refactor!: use context instead of screenRefs (#2476)

## Description

This PR replaces passing screenRefs into using context. This avoids
unnecessary logic on react-navigation side.

## Changes

Create Context that holds screen refs and add this ref in
ScreenStackItem instead of doing same on react-navigation part. See the
changes there:
https://github.com/react-navigation/react-navigation/pull/12225

## Testing

See Example App > Swipe Back Animation (changes from react-navigation
required:
https://github.com/react-navigation/react-navigation/pull/12225)
OR
react-navigation: TestScreenAnimation.tsx
native-stack v5: TestScreenAnimationV5.tsx

|native-stack v5|react-navigation|
|-|-|
|<video
src="https://github.com/user-attachments/assets/0af1422c-4e61-4c7c-ba6d-1c6a852d4e13"
/>|<video
src="https://github.com/user-attachments/assets/03af7230-198f-4081-ba6d-2b78325ebaa7"
/>|

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes
---
 apps/src/tests/TestScreenAnimationV5.tsx   | 87 ++++++++++++++++++++++
 apps/src/tests/index.ts                    |  1 +
 src/components/ScreenStack.tsx             | 54 ++++++++------
 src/components/ScreenStackItem.tsx         | 28 ++++++-
 src/contexts.tsx                           |  5 +-
 src/gesture-handler/fabricUtils.ts         | 10 ++-
 src/native-stack/views/NativeStackView.tsx | 12 +--
 src/types.tsx                              |  5 +-
 8 files changed, 161 insertions(+), 41 deletions(-)
 create mode 100644 apps/src/tests/TestScreenAnimationV5.tsx

diff --git a/apps/src/tests/TestScreenAnimationV5.tsx b/apps/src/tests/TestScreenAnimationV5.tsx
new file mode 100644
index 0000000000..28339bdbed
--- /dev/null
+++ b/apps/src/tests/TestScreenAnimationV5.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { View, StyleSheet, Button } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import {
+  NativeStackNavigationProp,
+  createNativeStackNavigator,
+} from 'react-native-screens/native-stack'
+import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
+
+type StackParamList = {
+  ScreenA: undefined;
+  ScreenB: undefined;
+  ScreenC: undefined;
+};
+
+interface MainScreenProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenA'>;
+}
+
+const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'moccasin' }}>
+    <Button
+      title="Go ScreenB"
+      onPress={() => {
+        navigation.navigate('ScreenB');
+      }}
+    />
+    <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
+  </View>
+);
+
+interface ScreenBProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenB'>;
+}
+
+const ScreenB = ({ navigation }: ScreenBProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
+    <Button title="Go ScreenC" onPress={() => navigation.navigate('ScreenC')} />
+    <Button title="Go back" onPress={() => navigation.goBack()} />
+  </View>
+);
+
+interface ScreenCProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenC'>;
+}
+
+const ScreenC = ({ navigation }: ScreenCProps): JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'blue' }}>
+    <Button title="Go back" onPress={() => navigation.goBack()} />
+  </View>
+);
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+const App = (): JSX.Element => (
+  <GestureHandlerRootView style={{ flex: 1 }}>
+    <NavigationContainer>
+      <GestureDetectorProvider>
+        <Stack.Navigator
+          screenOptions={{
+            headerBackVisible: false,
+            animation: 'none',
+          }}>
+          <Stack.Screen name="ScreenA" component={MainScreen} />
+          <Stack.Screen
+            name="ScreenB"
+            component={ScreenB}
+            options={{
+              goBackGesture: 'twoDimensionalSwipe',
+            }}
+          />
+          <Stack.Screen name="ScreenC" component={ScreenC} />
+        </Stack.Navigator>
+      </GestureDetectorProvider>
+    </NavigationContainer>
+  </GestureHandlerRootView>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+});
+
+export default App;
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index fa45d8ee7f..8a924deffc 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -117,6 +117,7 @@ export { default as Test2332 } from './Test2332';
 export { default as Test2379 } from './Test2379';
 export { default as Test2395 } from './Test2395';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
+export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';
 export { default as TestPreload } from './TestPreload';
 export { default as TestActivityStateProgression } from './TestActivityStateProgression';
diff --git a/src/components/ScreenStack.tsx b/src/components/ScreenStack.tsx
index 205c402a36..f730bb0d3d 100644
--- a/src/components/ScreenStack.tsx
+++ b/src/components/ScreenStack.tsx
@@ -3,11 +3,12 @@
 import React, { PropsWithChildren } from 'react';
 import {
   GestureDetectorBridge,
+  ScreensRefsHolder,
   GestureProviderProps,
   GoBackGesture,
   ScreenStackProps,
 } from '../types';
-import { GHContext } from '../contexts';
+import { GHContext, RNSScreensRefContext } from '../contexts';
 import { freezeEnabled } from '../core';
 import DelayedFreeze from './helpers/DelayedFreeze';
 import warnOnce from 'warn-once';
@@ -43,7 +44,7 @@ const assertCustomScreenTransitionsProps = (
 ) => {
   const isGestureDetectorNotConfiguredProperly =
     goBackGesture !== undefined &&
-    screensRefs === undefined &&
+    screensRefs === null &&
     currentScreenId === undefined;
 
   warnOnce(
@@ -55,7 +56,7 @@ const assertCustomScreenTransitionsProps = (
 function ScreenStack(props: ScreenStackProps) {
   const {
     goBackGesture,
-    screensRefs,
+    screensRefs: passedScreenRefs, // TODO: For compatibility with v5, remove once v5 is removed
     currentScreenId,
     transitionAnimation,
     screenEdgeGesture,
@@ -64,6 +65,9 @@ function ScreenStack(props: ScreenStackProps) {
     ...rest
   } = props;
 
+  const screensRefs = React.useRef<ScreensRefsHolder>(
+    passedScreenRefs?.current ?? {},
+  );
   const ref = React.useRef(null);
   const size = React.Children.count(children);
   const ScreenGestureDetector = React.useContext(GHContext);
@@ -107,27 +111,29 @@ function ScreenStack(props: ScreenStackProps) {
   );
 
   return (
-    <ScreenGestureDetector
-      gestureDetectorBridge={gestureDetectorBridge}
-      goBackGesture={goBackGesture}
-      transitionAnimation={transitionAnimation}
-      screenEdgeGesture={screenEdgeGesture ?? false}
-      screensRefs={screensRefs}
-      currentScreenId={currentScreenId}>
-      <ScreenStackNativeComponent
-        {...rest}
-        /**
-         * This messy override is to conform NativeProps used by codegen and
-         * our Public API. To see reasoning go to this PR:
-         * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
-         */
-        onFinishTransitioning={
-          onFinishTransitioning as NativeProps['onFinishTransitioning']
-        }
-        ref={ref}>
-        {childrenWithFreeze}
-      </ScreenStackNativeComponent>
-    </ScreenGestureDetector>
+    <RNSScreensRefContext.Provider value={screensRefs}>
+      <ScreenGestureDetector
+        gestureDetectorBridge={gestureDetectorBridge}
+        goBackGesture={goBackGesture}
+        transitionAnimation={transitionAnimation}
+        screenEdgeGesture={screenEdgeGesture ?? false}
+        screensRefs={screensRefs}
+        currentScreenId={currentScreenId}>
+        <ScreenStackNativeComponent
+          {...rest}
+          /**
+           * This messy override is to conform NativeProps used by codegen and
+           * our Public API. To see reasoning go to this PR:
+           * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
+           */
+          onFinishTransitioning={
+            onFinishTransitioning as NativeProps['onFinishTransitioning']
+          }
+          ref={ref}>
+          {childrenWithFreeze}
+        </ScreenStackNativeComponent>
+      </ScreenGestureDetector>
+    </RNSScreensRefContext.Provider>
   );
 }
 
diff --git a/src/components/ScreenStackItem.tsx b/src/components/ScreenStackItem.tsx
index 76c8e74d8a..570ffb799c 100644
--- a/src/components/ScreenStackItem.tsx
+++ b/src/components/ScreenStackItem.tsx
@@ -13,11 +13,13 @@ import { ScreenProps, ScreenStackHeaderConfigProps } from '../types';
 import { ScreenStackHeaderConfig } from './ScreenStackHeaderConfig';
 import Screen from './Screen';
 import ScreenStack from './ScreenStack';
+import { RNSScreensRefContext } from '../contexts';
 
 type Props = Omit<
   ScreenProps,
   'enabled' | 'isNativeStack' | 'hasLargeHeader'
 > & {
+  screenId: string;
   headerConfig?: ScreenStackHeaderConfigProps;
   contentStyle?: StyleProp<ViewStyle>;
 };
@@ -30,10 +32,16 @@ function ScreenStackItem(
     stackPresentation,
     contentStyle,
     style,
+    screenId,
     ...rest
   }: Props,
   ref: React.ForwardedRef<View>,
 ) {
+  const currentScreenRef = React.useRef<View | null>(null);
+  const screenRefs = React.useContext(RNSScreensRefContext);
+
+  React.useImperativeHandle(ref, () => currentScreenRef.current!);
+
   const isHeaderInModal =
     Platform.OS === 'android'
       ? false
@@ -95,7 +103,25 @@ function ScreenStackItem(
 
   return (
     <Screen
-      ref={ref}
+      ref={node => {
+        currentScreenRef.current = node;
+
+        if (screenRefs === null) {
+          console.warn(
+            'Looks like RNSScreensRefContext is missing. Make sure the ScreenStack component is wrapped in it',
+          );
+          return;
+        }
+
+        const currentRefs = screenRefs.current;
+
+        if (node === null) {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          delete currentRefs[screenId];
+        } else {
+          currentRefs[screenId] = { current: node };
+        }
+      }}
       enabled
       isNativeStack
       activityState={activityState}
diff --git a/src/contexts.tsx b/src/contexts.tsx
index 2b95c20a22..9dfa1069fb 100644
--- a/src/contexts.tsx
+++ b/src/contexts.tsx
@@ -1,6 +1,9 @@
 import React, { PropsWithChildren } from 'react';
-import { GestureProviderProps } from './types';
+import { GestureProviderProps, ScreensRefsHolder } from './types';
 
 export const GHContext = React.createContext(
   (props: PropsWithChildren<GestureProviderProps>) => <>{props.children}</>,
 );
+
+export const RNSScreensRefContext =
+  React.createContext<React.MutableRefObject<ScreensRefsHolder> | null>(null);
diff --git a/src/gesture-handler/fabricUtils.ts b/src/gesture-handler/fabricUtils.ts
index 269ed5ceea..cb45164ad5 100644
--- a/src/gesture-handler/fabricUtils.ts
+++ b/src/gesture-handler/fabricUtils.ts
@@ -1,4 +1,7 @@
 'use strict';
+
+import { View } from 'react-native';
+
 /* eslint-disable */
 
 type LocalGlobal = typeof global & Record<string, unknown>;
@@ -18,9 +21,10 @@ let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
 };
 
 // Taken and modifies from reanimated
-export function getShadowNodeWrapperAndTagFromRef(
-  ref: React.Ref<React.Component>,
-): { shadowNodeWrapper: ShadowNodeWrapper; tag: number } {
+export function getShadowNodeWrapperAndTagFromRef(ref: View | null): {
+  shadowNodeWrapper: ShadowNodeWrapper;
+  tag: number;
+} {
   // load findHostInstance_DEPRECATED lazily because it may not be available before render
   if (findHostInstance_DEPRECATED === undefined) {
     try {
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index 6066541cfd..2276ec4e0b 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -11,7 +11,7 @@ import {
 // eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import warnOnce from 'warn-once';
-import { StackPresentationTypes } from '../../types';
+import { StackPresentationTypes, ScreensRefsHolder } from '../../types';
 import ScreenStack from '../../components/ScreenStack';
 import ScreenContentWrapper from '../../components/ScreenContentWrapper';
 import { ScreenContext } from '../../components/Screen';
@@ -32,7 +32,6 @@ import {
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
-  ScreensRefsHolder,
 } from '../types';
 import HeaderConfig from './HeaderConfig';
 import SafeAreaProviderCompat from '../utils/SafeAreaProviderCompat';
@@ -184,7 +183,7 @@ const RouteView = ({
   index: number;
   navigation: NativeStackNavigationHelpers;
   stateKey: string;
-  screensRefs: ScreensRefsHolder;
+  screensRefs: React.MutableRefObject<ScreensRefsHolder>;
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
 
@@ -476,11 +475,8 @@ function NativeStackViewInner({
   const currentRouteKey = routes[state.index].key;
   const { goBackGesture, transitionAnimation, screenEdgeGesture } =
     descriptors[currentRouteKey].options;
-  type RefHolder = Record<
-    string,
-    React.MutableRefObject<React.Ref<React.Component>>
-  >;
-  const screensRefs = React.useRef<RefHolder>({});
+
+  const screensRefs = React.useRef<ScreensRefsHolder>({});
 
   return (
     <ScreenStack
diff --git a/src/types.tsx b/src/types.tsx
index f746b6ba28..ae5a9dc645 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -849,10 +849,7 @@ export type AnimatedScreenTransition = {
   ) => Record<string, unknown>;
 };
 
-export type ScreensRefsHolder = Record<
-  string,
-  React.MutableRefObject<React.Ref<React.Component>>
->;
+export type ScreensRefsHolder = Record<string, React.RefObject<View>>;
 
 export interface GestureProps {
   screensRefs?: React.MutableRefObject<ScreensRefsHolder>;

From 3ddf47cecfe4f0ad209ec36a121170ca5366a00f Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 5 Nov 2024 11:21:58 +0100
Subject: [PATCH 3/8] Release 4.0.0-beta.17

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f0554f2e02..a60f6f3733 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.17",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",

From dffcc5f76b68fba4eebd2b519dc9a155db93e5bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Du=C5=BCy?=
 <91994767+alduzy@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:58:53 +0100
Subject: [PATCH 4/8] chore: compatibility table README update (#2479)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This PR updates the compatibility table in `README` with support for
React Native 0.76.

I updated the table and added a brief description for Paper architecture
since it's not the default for RN 0.76+.

## Tests

I ran the following tests in order to see if the compatibility changed
since the last check.

### Paper

- RN `0.72` builds and run with screens `3.35.0` ✅
    - iOS ✅
    - Android ✅
- RN `0.76` builds and run with screens `3.33.0` ✅
    - iOS ✅
    - Android ✅

### Fabric

- RN `0.75` builds and run with screens `3.35.0` ✅
    - iOS ✅
    - Android ✅
- RN `0.76` builds and run with screens `3.33.0` ❌
    - iOS ✅
    - Android ❌

## Checklist

- [x] Updated documentation: <!-- For adding new props to native-stack
-->
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
---
 README.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7425c24601..5aca363a98 100644
--- a/README.md
+++ b/README.md
@@ -106,9 +106,13 @@ Screens are already integrated with the React Native's most popular navigation l
 
 ## Supported react-native version
 
+### Support for Paper
+
+Paper is the default rendering system for React Native versions prior to 0.76.
+
 | library version | react-native version |
 | --------------- | -------------------- |
-| 3.33.0+         | 0.72.0+
+| 3.33.0+         | 0.72.0+              |
 | 3.32.0+         | 0.71.0+              |
 | 3.30.0+         | 0.68.0+              |
 | 3.14.0+         | 0.64.0+              |
@@ -123,6 +127,7 @@ Here's a table with summary of supported `react-native` versions when Fabric is
 
 | library version | react-native version |
 | --------------- | -------------------- |
+| 3.35.0+         | 0.76.0+              |
 | 3.33.0+         | 0.75.0+              |
 | 3.32.0+         | 0.74.0+              |
 | 3.28.0+         | 0.73.0+              |

From 46c843e7da9050ae1e3bc509822645f6496a7cc8 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacper.kafara@swmansion.com>
Date: Wed, 6 Nov 2024 09:21:46 +0100
Subject: [PATCH 5/8] feat(iOS)!: change default of
 `fullScreenSwipeShadowEnabled` to true (#2481)

## Description

This PR changes default value for `fullScreenSwipeShadowEnabled` prop to
`true` - meaning that the shadow will be present by default
in `simple_push` animation on iOS (this is the platform default).

> [!important]
> When changing this value I've noticed that the
`fullScreenSwipeShadowEnabled` does something different
> than it suggests in type documentation & our
GUIDE_FOR_LIBRARY_AUTHORS. Namely, it does effect `simple_push`
animation
> in every scenario, not only in full screen swipe gesture interactive
transition. I think we should change the name
> of the prop eventually.

## Changes

Updated all the docs & code.

## Test code and steps to reproduce

I've played around with `Test1072`. Just set stack animation to simple
push.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Updated documentation: <!-- For adding new props to native-stack
-->
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes
---
 .../react/viewmanagers/RNSScreenManagerDelegate.java      | 2 +-
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md                       | 4 ++--
 ios/RNSScreen.mm                                          | 1 +
 native-stack/README.md                                    | 4 ++--
 src/fabric/ModalScreenNativeComponent.ts                  | 2 +-
 src/fabric/ScreenNativeComponent.ts                       | 2 +-
 src/native-stack/types.tsx                                | 4 ++--
 src/native-stack/views/NativeStackView.tsx                | 2 +-
 src/types.tsx                                             | 8 ++++----
 9 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
index d73de5dda3..884a93ad49 100644
--- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
+++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
@@ -52,7 +52,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setFullScreenSwipeEnabled(view, value == null ? false : (boolean) value);
         break;
       case "fullScreenSwipeShadowEnabled":
-        mViewManager.setFullScreenSwipeShadowEnabled(view, value == null ? false : (boolean) value);
+        mViewManager.setFullScreenSwipeShadowEnabled(view, value == null ? true : (boolean) value);
         break;
       case "homeIndicatorHidden":
         mViewManager.setHomeIndicatorHidden(view, value == null ? false : (boolean) value);
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index d4635f0283..3056cf935a 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -60,7 +60,7 @@ Boolean indicating whether the swipe gesture should work on whole screen. Swipin
 
 Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
 doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
-default iOS shadow. Defaults to `false`.
+default iOS shadow. Defaults to `true`.
 
 ### `gestureEnabled` (iOS only)
 
@@ -223,7 +223,7 @@ Allows for the customization of how the given screen should appear/disappear whe
 - `"fade"` – fades screen in or out
 - `fade_from_bottom` – performs a fade from bottom animation
 - `"flip"` – flips the screen, requires `stackPresentation: "modal"` (iOS only)
-- `"simple_push"` – performs a default animation, but without shadow and native header transition (iOS only)
+- `"simple_push"` – performs a default animation, but without native header transition (iOS only)
 - `"slide_from_bottom"` - slide in the new screen from bottom to top
 - `"slide_from_right"` - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
 - `"slide_from_left"` - slide in the new screen from left to right
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index acc15a63cb..d834a98a96 100644
--- a/ios/RNSScreen.mm
+++ b/ios/RNSScreen.mm
@@ -119,6 +119,7 @@ - (void)initCommonProps
   _hasOrientationSet = NO;
   _hasHomeIndicatorHiddenSet = NO;
   _activityState = RNSActivityStateUndefined;
+  _fullScreenSwipeShadowEnabled = YES;
 #if !TARGET_OS_TV
   _sheetExpandsWhenScrolledToEdge = YES;
 #endif // !TARGET_OS_TV
diff --git a/native-stack/README.md b/native-stack/README.md
index b8ab002b25..4ebd61d325 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -96,7 +96,7 @@ Boolean indicating whether the swipe gesture should work on whole screen. Swipin
 
 Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
 doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
-default iOS shadow. Defaults to `false`.
+default iOS shadow. Defaults to `true`.
 
 #### `gestureEnabled` (iOS only)
 
@@ -325,7 +325,7 @@ How the given screen should appear/disappear when pushed or popped at the top of
 - `fade` - fades screen in or out.
 - `fade_from_bottom` – performs a fade from bottom animation
 - `flip` – flips the screen, requires stackPresentation: `modal` (iOS only)
-- `simple_push` – performs a default animation, but without shadow and native header transition (iOS only)
+- `simple_push` – performs a default animation, but without native header transition (iOS only)
 - `slide_from_bottom` – performs a slide from bottom animation
 - `slide_from_right` - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
 - `slide_from_left` - slide in the new screen from left to right
diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts
index 16cd62b5e4..6f968db091 100644
--- a/src/fabric/ModalScreenNativeComponent.ts
+++ b/src/fabric/ModalScreenNativeComponent.ts
@@ -86,7 +86,7 @@ export interface NativeProps extends ViewProps {
   sheetElevation?: WithDefault<Int32, 24>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
-  fullScreenSwipeShadowEnabled?: boolean;
+  fullScreenSwipeShadowEnabled?: WithDefault<boolean, true>;
   homeIndicatorHidden?: boolean;
   preventNativeDismiss?: boolean;
   gestureEnabled?: WithDefault<boolean, true>;
diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts
index 1eb9071ac3..80832f2944 100644
--- a/src/fabric/ScreenNativeComponent.ts
+++ b/src/fabric/ScreenNativeComponent.ts
@@ -86,7 +86,7 @@ export interface NativeProps extends ViewProps {
   sheetElevation?: WithDefault<Int32, 24>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
-  fullScreenSwipeShadowEnabled?: boolean;
+  fullScreenSwipeShadowEnabled?: WithDefault<boolean, true>;
   homeIndicatorHidden?: boolean;
   preventNativeDismiss?: boolean;
   gestureEnabled?: WithDefault<boolean, true>;
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index da7a020a31..d0b5726570 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -164,7 +164,7 @@ export type NativeStackNavigationOptions = {
   /**
    * Whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
    * doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
-   * default iOS shadow. Defaults to `false`.
+   * default iOS shadow. Defaults to `true`.
    *
    * This does not affect the behavior of transitions that don't use gestures, enabled by `fullScreenGestureEnabled` prop.
    *
@@ -456,7 +456,7 @@ export type NativeStackNavigationOptions = {
    * - "fade" – fades screen in or out
    * - "fade_from_bottom" – performs a fade from bottom animation
    * - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
-   * - "simple_push" – performs a default animation, but without shadow and native header transition (iOS only)
+   * - "simple_push" – performs a default animation, but without native header transition (iOS only)
    * - "slide_from_bottom" – performs a slide from bottom animation
    * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
    * - "slide_from_left" - slide in the new screen from left to right
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index 2276ec4e0b..b9f706734d 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -188,7 +188,7 @@ const RouteView = ({
   const { options, render: renderScene } = descriptors[route.key];
 
   const {
-    fullScreenSwipeShadowEnabled = false,
+    fullScreenSwipeShadowEnabled = true,
     gestureEnabled,
     headerShown,
     hideKeyboardOnSwipe,
diff --git a/src/types.tsx b/src/types.tsx
index ae5a9dc645..d4162c23bf 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -135,9 +135,9 @@ export interface ScreenProps extends ViewProps {
    */
   fullScreenSwipeEnabled?: boolean;
   /**
-   * Whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
-   * doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the
-   * default iOS shadow. Defaults to `false`.
+   * Whether the full screen dismiss gesture has shadow under view during transition.
+   * When enabled, a custom shadow view is added during the transition which tries to mimic the
+   * default iOS shadow. Defaults to `true`.
    *
    * This does not affect the behavior of transitions that don't use gestures, enabled by `fullScreenGestureEnabled` prop.
    *
@@ -392,7 +392,7 @@ export interface ScreenProps extends ViewProps {
    * - "fade" – fades screen in or out
    * - "fade_from_bottom" – performs a fade from bottom animation
    * - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
-   * - "simple_push" – performs a default animation, but without shadow and native header transition (iOS only)
+   * - "simple_push" – performs a default animation, but without native header transition (iOS only)
    * - `slide_from_bottom` – performs a slide from bottom animation
    * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
    * - "slide_from_left" - slide in the new screen from left to right

From 960873aa03b9e22136d2f7b3b272e407011568d2 Mon Sep 17 00:00:00 2001
From: Tymoteusz Boba <Tymoteusz.Boba@gmail.com>
Date: Wed, 6 Nov 2024 11:40:15 +0100
Subject: [PATCH 6/8] chore(README): Redact caution of migrating JS API of
 native stack (#2480)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Because `react-native-screens/native-stack` isn't moved to
`@react-navigation/native` 😄 I've changed the caution about moving the
dependency into the correct one. Also, I've redacted the sentence, so
for me it looks better now.

## Changes

- Fixed `@react-navigation/native-stack` to `@react-navigation/native`
in README.
- Redacted caution

---------

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5aca363a98..093c7980fe 100644
--- a/README.md
+++ b/README.md
@@ -139,7 +139,7 @@ Here's a table with summary of supported `react-native` versions when Fabric is
 ## Usage with [react-navigation](https://github.com/react-navigation/react-navigation)
 
 > [!CAUTION]
-> NativeStack has been moved from react-native-screens/native-stack to @react-navigation/native since version v6. With react-native-screens v4 native stack v5 (react-native-screens/native-stack) is deprecated and marked for removal in the upcoming minor release, react-native-screens v4 will support only @react-navigation/native-stack v7.
+> JS API of the native stack has been moved from `react-native-screens/native-stack` to `@react-navigation/native-stack` since version v6. Currently, native stack v5 (imported from `react-native-screens/native-stack`) is deprecated and will be removed in the upcoming **minor** release. `react-native-screens` v4 will support only `@react-navigation/native-stack` v7.
 
 Screens support is built into [react-navigation](https://github.com/react-navigation/react-navigation) starting from version [2.14.0](https://github.com/react-navigation/react-navigation/releases/tag/2.14.0) for all the different navigator types (stack, tab, drawer, etc).
 

From 375b7eeb5b7d52529f5cc1e79bcc02b7ce0d1789 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacper.kafara@swmansion.com>
Date: Wed, 6 Nov 2024 17:08:08 +0100
Subject: [PATCH 7/8] feat(iOS)!: change default animation curve & duration
 (#2477)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

> [!note]
> A big chunk of discussion for these changes is under initial PR by
@kirillzyusko, please see:
https://github.com/software-mansion/react-native-screens/pull/2413

Associated PR in `react-navigation`:

* https://github.com/react-navigation/react-navigation/pull/12233

Recently in
https://github.com/software-mansion/react-native-screens/pull/2413
@kirillzyusko noticed that our iOS animations (in particular
`simple_push` and `slide_from_left`) do not resemble native slide-in
animation as much as we wish and as we claim in our type definitions /
guide for library authors.

The approach suggested by @kirillzyusko in #2413 is as follows:

We add new prop (draft name) `animationInterpolation`; when specified it
allows to set `Interpolation.DEFAULT` which would use default
`UISpringTimingParameters` used by default by UIKit.

This solution has advantage of enabling easy extension in form of
exposing more timing animation curves.

At the same time it comes with disadvantage: setting default system
params (spring animation) disables ability to specify animation
duration, effectively disabling our `transitionDuration` prop (exposed
as `animationDuration` by react-navigation).

I don't want that ☝🏻 I want too keep `animationDuration` working as is,
therefore we need to approximate default spring timing curve as closely
as possible using damping ratio (initializer with damping ratio allows
for control over final transition duration).

According to Matt Neuburg's "Programming iOS 14" the params for default
spring are as follows:

- mass = 3,
- stiffness = 1000,
- damping = 500

We can compute damping ratio as: damping / (2 * sqrt(stiffness * mass))
=> giving us approximately 4,56 (overdamping) <- and this is what we'll
use now.

> [!important]
> Important side-effect of the refactor is the fact that
`animationDuration` now impacts duration of the completion animation
**after the gesture has been cancelled** during interactive dismissal.
I've decided on keeping this behaviour, but it has both pros and cons.
Any feedback on this would be welcome. See video below (animation
duration set to 2000ms).


https://github.com/user-attachments/assets/a13b2e5d-7b90-4597-a33a-956f2f393cd9


## Changes

The default animation time change applies to all animations. Maybe we
should consider applying it only to animations for which we use new
spring'y timing curves.

The animation curve change applies to `simple_push`, `slide_from_left`,
`slide_from_right`. The rest of animations kept EaseInOut curve.

## Test code and steps to reproduce

I've played around on test `Test1072`.

## Before / After

|Animation|Before|After|
|----------|------------|-------|
|`simple_push`|<video width="454" alt="image" src="">|<video width="452"
alt="image"
src="https://github.com/user-attachments/assets/4fb45c2f-d77b-4737-b5ee-8b406b90c15f">|
|`fade`|<video width="454" alt="image" src="">|<video width="454"
alt="image"
src="https://github.com/user-attachments/assets/59114dd5-bc45-4933-ab02-869b35e1725c">|
|`slide_from_bottom`|<video width="454" alt="image" src="">|<video
width="454" alt="image"
src="https://github.com/user-attachments/assets/4580fe9f-112d-4ead-8377-68c1caaf6d46">|











## Improvement possibilities

> [!note]
> 1. fade_from_bottom works ugly - it looks like the screen underneath
disappears immediately - we should look into it
> 2. add possibility of describing custom transition curves (new API
idea), or at least expose some presets
> 3. add prop to control "completion transition duraction"


## Checklist

- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes
---
 .../RNSScreenManagerDelegate.java             |   2 +-
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md           |   2 +-
 ios/RNSPercentDrivenInteractiveTransition.h   |  12 +
 ios/RNSPercentDrivenInteractiveTransition.mm  |  69 ++++
 ios/RNSScreenStack.mm                         |  13 +-
 ios/RNSScreenStackAnimator.h                  |  14 +-
 ios/RNSScreenStackAnimator.mm                 | 363 +++++++++++-------
 native-stack/README.md                        |   2 +-
 src/fabric/ModalScreenNativeComponent.ts      |   2 +-
 src/fabric/ScreenNativeComponent.ts           |   2 +-
 src/native-stack/types.tsx                    |   2 +-
 src/types.tsx                                 |   2 +-
 12 files changed, 343 insertions(+), 142 deletions(-)
 create mode 100644 ios/RNSPercentDrivenInteractiveTransition.h
 create mode 100644 ios/RNSPercentDrivenInteractiveTransition.mm

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
index 884a93ad49..db5b5271a7 100644
--- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
+++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
@@ -91,7 +91,7 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStackAnimation(view, (String) value);
         break;
       case "transitionDuration":
-        mViewManager.setTransitionDuration(view, value == null ? 350 : ((Double) value).intValue());
+        mViewManager.setTransitionDuration(view, value == null ? 500 : ((Double) value).intValue());
         break;
       case "replaceAnimation":
         mViewManager.setReplaceAnimation(view, (String) value);
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index 3056cf935a..a9f15ac454 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -297,7 +297,7 @@ When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAni
 
 ### `transitionDuration` (iOS only)
 
-Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `500`.
 
 The duration of `default` and `flip` transitions isn't customizable.
 
diff --git a/ios/RNSPercentDrivenInteractiveTransition.h b/ios/RNSPercentDrivenInteractiveTransition.h
new file mode 100644
index 0000000000..e47401e450
--- /dev/null
+++ b/ios/RNSPercentDrivenInteractiveTransition.h
@@ -0,0 +1,12 @@
+#import <UIKit/UIKit.h>
+#import "RNSScreenStackAnimator.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNSPercentDrivenInteractiveTransition : UIPercentDrivenInteractiveTransition
+
+@property (nonatomic, nullable) RNSScreenStackAnimator *animationController;
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/ios/RNSPercentDrivenInteractiveTransition.mm b/ios/RNSPercentDrivenInteractiveTransition.mm
new file mode 100644
index 0000000000..459aa289d0
--- /dev/null
+++ b/ios/RNSPercentDrivenInteractiveTransition.mm
@@ -0,0 +1,69 @@
+#import "RNSPercentDrivenInteractiveTransition.h"
+
+@implementation RNSPercentDrivenInteractiveTransition {
+  RNSScreenStackAnimator *_animationController;
+}
+
+#pragma mark - UIViewControllerInteractiveTransitioning
+
+- (void)startInteractiveTransition:(id<UIViewControllerContextTransitioning>)transitionContext
+{
+  [super startInteractiveTransition:transitionContext];
+}
+
+#pragma mark - UIPercentDrivenInteractiveTransition
+
+// `updateInteractiveTransition`, `finishInteractiveTransition`,
+// `cancelInteractiveTransition` are forwared by superclass to
+// corresponding methods in transition context. In case
+// of "classical CA driven animations", such as UIView animation blocks
+// or direct utilization of CoreAnimation API, context drives the animation,
+// however in case of UIViewPropertyAnimator it does not. We need
+// to drive animation manually and this is exactly what happens below.
+
+- (void)updateInteractiveTransition:(CGFloat)percentComplete
+{
+  if (_animationController != nil) {
+    [_animationController.inFlightAnimator setFractionComplete:percentComplete];
+  }
+  [super updateInteractiveTransition:percentComplete];
+}
+
+- (void)finishInteractiveTransition
+{
+  [self finalizeInteractiveTransitionWithAnimationWasCancelled:NO];
+  [super finishInteractiveTransition];
+}
+
+- (void)cancelInteractiveTransition
+{
+  [self finalizeInteractiveTransitionWithAnimationWasCancelled:YES];
+  [super cancelInteractiveTransition];
+}
+
+#pragma mark - Helpers
+
+- (void)finalizeInteractiveTransitionWithAnimationWasCancelled:(BOOL)cancelled
+{
+  if (_animationController == nil) {
+    return;
+  }
+
+  UIViewPropertyAnimator *_Nullable animator = _animationController.inFlightAnimator;
+  if (animator == nil) {
+    return;
+  }
+
+  BOOL shouldReverseAnimation = cancelled;
+
+  id<UITimingCurveProvider> timingParams = [_animationController timingParamsForAnimationCompletion];
+
+  [animator pauseAnimation];
+  [animator setReversed:shouldReverseAnimation];
+  [animator continueAnimationWithTimingParameters:timingParams durationFactor:(1 - animator.fractionComplete)];
+
+  // System retains it & we don't need it anymore.
+  _animationController = nil;
+}
+
+@end
diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index cc26600522..0d0d6c4d38 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -20,6 +20,7 @@
 #import "RCTTouchHandler+RNSUtility.h"
 #endif // RCT_NEW_ARCH_ENABLED
 
+#import "RNSPercentDrivenInteractiveTransition.h"
 #import "RNSScreen.h"
 #import "RNSScreenStack.h"
 #import "RNSScreenStackAnimator.h"
@@ -149,7 +150,7 @@ @implementation RNSScreenStackView {
   NSMutableArray<RNSScreenView *> *_reactSubviews;
   BOOL _invalidated;
   BOOL _isFullWidthSwiping;
-  UIPercentDrivenInteractiveTransition *_interactionController;
+  RNSPercentDrivenInteractiveTransition *_interactionController;
   __weak RNSScreenStackManager *_manager;
   BOOL _updateScheduled;
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -869,7 +870,7 @@ - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
 
   switch (gestureRecognizer.state) {
     case UIGestureRecognizerStateBegan: {
-      _interactionController = [UIPercentDrivenInteractiveTransition new];
+      _interactionController = [RNSPercentDrivenInteractiveTransition new];
       [_controller popViewControllerAnimated:YES];
       break;
     }
@@ -916,7 +917,7 @@ - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
   if (_interactionController == nil && fromView.reactSuperview) {
     BOOL shouldCancelDismiss = [self shouldCancelDismissFromView:fromView toView:toView];
     if (shouldCancelDismiss) {
-      _interactionController = [UIPercentDrivenInteractiveTransition new];
+      _interactionController = [RNSPercentDrivenInteractiveTransition new];
       dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.01 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
         [self->_interactionController cancelInteractiveTransition];
         self->_interactionController = nil;
@@ -929,6 +930,10 @@ - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
       });
     }
   }
+
+  if (_interactionController != nil) {
+    [_interactionController setAnimationController:animationController];
+  }
   return _interactionController;
 }
 
@@ -1111,7 +1116,7 @@ - (void)startScreenTransition
 {
   if (_interactionController == nil) {
     _customAnimation = YES;
-    _interactionController = [UIPercentDrivenInteractiveTransition new];
+    _interactionController = [RNSPercentDrivenInteractiveTransition new];
     [_controller popViewControllerAnimated:YES];
   }
 }
diff --git a/ios/RNSScreenStackAnimator.h b/ios/RNSScreenStackAnimator.h
index f96eae7756..d9c4c67ec9 100644
--- a/ios/RNSScreenStackAnimator.h
+++ b/ios/RNSScreenStackAnimator.h
@@ -2,7 +2,19 @@
 
 @interface RNSScreenStackAnimator : NSObject <UIViewControllerAnimatedTransitioning>
 
-- (instancetype)initWithOperation:(UINavigationControllerOperation)operation;
+/// This property is filled whenever there is an ongoing animation and cleared on animation end.
+@property (nonatomic, strong, nullable, readonly) UIViewPropertyAnimator *inFlightAnimator;
+
+- (nonnull instancetype)initWithOperation:(UINavigationControllerOperation)operation;
+
+/// In case of interactive / interruptible transition (e.g. swipe back gesture) this method should return
+/// timing parameters expected by animator to be used for animation completion (e.g. when user's
+/// gesture had ended).
+///
+/// @return timing curve provider expected to be used for animation completion or nil,
+/// when there is no interactive transition running.
+- (nullable id<UITimingCurveProvider>)timingParamsForAnimationCompletion;
+
 + (BOOL)isCustomAnimation:(RNSScreenStackAnimation)animation;
 
 @end
diff --git a/ios/RNSScreenStackAnimator.mm b/ios/RNSScreenStackAnimator.mm
index abb2cf69fd..410a461285 100644
--- a/ios/RNSScreenStackAnimator.mm
+++ b/ios/RNSScreenStackAnimator.mm
@@ -3,30 +3,48 @@
 
 #import "RNSScreen.h"
 
-// proportions to default transition duration
-static const float RNSSlideOpenTransitionDurationProportion = 1;
-static const float RNSFadeOpenTransitionDurationProportion = 0.2 / 0.35;
-static const float RNSSlideCloseTransitionDurationProportion = 0.25 / 0.35;
-static const float RNSFadeCloseTransitionDurationProportion = 0.15 / 0.35;
-static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
-// same value is used in other projects using similar approach for transistions
+#pragma mark - Constants
+
+// Default duration for transitions in seconds. Note, that this enforces the default
+// only on Paper. On Fabric the transition duration coming from JS layer
+// is never null, thus it defaults to the value set in component codegen spec.
+static constexpr NSTimeInterval RNSDefaultTransitionDuration = 0.5;
+
+// Proportions for diffrent phases of more complex animations.
+// The reference duration differs from default transition duration,
+// because we've changed the default duration & we want to keep proportions
+// in tact. Unit = seconds.
+static constexpr NSTimeInterval RNSTransitionDurationForProportion = 0.35;
+
+static constexpr float RNSSlideOpenTransitionDurationProportion = 1;
+static constexpr float RNSFadeOpenTransitionDurationProportion = 0.2 / RNSTransitionDurationForProportion;
+static constexpr float RNSSlideCloseTransitionDurationProportion = 0.25 / RNSTransitionDurationForProportion;
+static constexpr float RNSFadeCloseTransitionDurationProportion = 0.15 / RNSTransitionDurationForProportion;
+static constexpr float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / RNSTransitionDurationForProportion;
+
+// Value used for dimming view attached for tranistion time.
+// Same value is used in other projects using similar approach for transistions
 // and it looks the most similar to the value used by Apple
 static constexpr float RNSShadowViewMaxAlpha = 0.1;
 
 @implementation RNSScreenStackAnimator {
   UINavigationControllerOperation _operation;
   NSTimeInterval _transitionDuration;
+  UIViewPropertyAnimator *_Nullable _inFlightAnimator;
 }
 
 - (instancetype)initWithOperation:(UINavigationControllerOperation)operation
 {
   if (self = [super init]) {
     _operation = operation;
-    _transitionDuration = 0.35; // default duration in seconds
+    _transitionDuration = RNSDefaultTransitionDuration; // default duration in seconds
+    _inFlightAnimator = nil;
   }
   return self;
 }
 
+#pragma mark - UIViewControllerAnimatedTransitioning
+
 - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
 {
   RNSScreenView *screen;
@@ -52,6 +70,12 @@ - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)t
   return _transitionDuration;
 }
 
+- (id<UIViewImplicitlyAnimating>)interruptibleAnimatorForTransition:
+    (id<UIViewControllerContextTransitioning>)transitionContext
+{
+  return _inFlightAnimator;
+}
+
 - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
 {
   UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
@@ -97,6 +121,13 @@ - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionCo
   }
 }
 
+- (void)animationEnded:(BOOL)transitionCompleted
+{
+  _inFlightAnimator = nil;
+}
+
+#pragma mark - Animation implementations
+
 - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
                          transitionContext:(id<UIViewControllerContextTransitioning>)transitionContext
                                       toVC:(UIViewController *)toViewController
@@ -128,22 +159,28 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
       shadowView.alpha = 0.0;
     }
 
-    [UIView animateWithDuration:[self transitionDuration:transitionContext]
-        animations:^{
-          fromViewController.view.transform = leftTransform;
-          toViewController.view.transform = CGAffineTransformIdentity;
-          if (shadowView) {
-            shadowView.alpha = RNSShadowViewMaxAlpha;
-          }
-        }
-        completion:^(BOOL finished) {
-          if (shadowView) {
-            [shadowView removeFromSuperview];
-          }
-          fromViewController.view.transform = CGAffineTransformIdentity;
-          toViewController.view.transform = CGAffineTransformIdentity;
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
+    UIViewPropertyAnimator *animator =
+        [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                        timingParameters:[RNSScreenStackAnimator defaultSpringTimingParametersApprox]];
+
+    [animator addAnimations:^{
+      fromViewController.view.transform = leftTransform;
+      toViewController.view.transform = CGAffineTransformIdentity;
+      if (shadowView) {
+        shadowView.alpha = RNSShadowViewMaxAlpha;
+      }
+    }];
+
+    [animator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      if (shadowView) {
+        [shadowView removeFromSuperview];
+      }
+      fromViewController.view.transform = CGAffineTransformIdentity;
+      toViewController.view.transform = CGAffineTransformIdentity;
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    }];
+    _inFlightAnimator = animator;
+    [animator startAnimation];
   } else if (_operation == UINavigationControllerOperationPop) {
     toViewController.view.transform = leftTransform;
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
@@ -159,7 +196,8 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
         shadowView.alpha = 0.0;
       }
     };
-    void (^completionBlock)(BOOL) = ^(BOOL finished) {
+
+    void (^completionBlock)(UIViewAnimatingPosition) = ^(UIViewAnimatingPosition finalPosition) {
       if (shadowView) {
         [shadowView removeFromSuperview];
       }
@@ -169,16 +207,24 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
     };
 
     if (!transitionContext.isInteractive) {
-      [UIView animateWithDuration:[self transitionDuration:transitionContext]
-                       animations:animationBlock
-                       completion:completionBlock];
+      UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc]
+          initWithDuration:[self transitionDuration:transitionContext]
+          timingParameters:[RNSScreenStackAnimator defaultSpringTimingParametersApprox]];
+
+      [animator addAnimations:animationBlock];
+      [animator addCompletion:completionBlock];
+      _inFlightAnimator = animator;
+      [animator startAnimation];
     } else {
       // we don't want the EaseInOut option when swiping to dismiss the view, it is the same in default animation option
-      [UIView animateWithDuration:[self transitionDuration:transitionContext]
-                            delay:0.0
-                          options:UIViewAnimationOptionCurveLinear
-                       animations:animationBlock
-                       completion:completionBlock];
+      UIViewPropertyAnimator *animator =
+          [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                                     curve:UIViewAnimationCurveLinear
+                                                animations:animationBlock];
+
+      [animator addCompletion:completionBlock];
+      [animator setUserInteractionEnabled:YES];
+      _inFlightAnimator = animator;
     }
   }
 }
@@ -202,16 +248,22 @@ - (void)animateSlideFromLeftWithTransitionContext:(id<UIViewControllerContextTra
   if (_operation == UINavigationControllerOperationPush) {
     toViewController.view.transform = rightTransform;
     [[transitionContext containerView] addSubview:toViewController.view];
-    [UIView animateWithDuration:[self transitionDuration:transitionContext]
-        animations:^{
-          fromViewController.view.transform = leftTransform;
-          toViewController.view.transform = CGAffineTransformIdentity;
-        }
-        completion:^(BOOL finished) {
-          fromViewController.view.transform = CGAffineTransformIdentity;
-          toViewController.view.transform = CGAffineTransformIdentity;
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
+
+    UIViewPropertyAnimator *animator =
+        [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                        timingParameters:[RNSScreenStackAnimator defaultSpringTimingParametersApprox]];
+
+    [animator addAnimations:^{
+      fromViewController.view.transform = leftTransform;
+      toViewController.view.transform = CGAffineTransformIdentity;
+    }];
+    [animator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      fromViewController.view.transform = CGAffineTransformIdentity;
+      toViewController.view.transform = CGAffineTransformIdentity;
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    }];
+    _inFlightAnimator = animator;
+    [animator startAnimation];
   } else if (_operation == UINavigationControllerOperationPop) {
     toViewController.view.transform = leftTransform;
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
@@ -220,23 +272,30 @@ - (void)animateSlideFromLeftWithTransitionContext:(id<UIViewControllerContextTra
       toViewController.view.transform = CGAffineTransformIdentity;
       fromViewController.view.transform = rightTransform;
     };
-    void (^completionBlock)(BOOL) = ^(BOOL finished) {
+    void (^completionBlock)(UIViewAnimatingPosition) = ^(UIViewAnimatingPosition finalPosition) {
       fromViewController.view.transform = CGAffineTransformIdentity;
       toViewController.view.transform = CGAffineTransformIdentity;
       [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
     };
 
     if (!transitionContext.isInteractive) {
-      [UIView animateWithDuration:[self transitionDuration:transitionContext]
-                       animations:animationBlock
-                       completion:completionBlock];
+      UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc]
+          initWithDuration:[self transitionDuration:transitionContext]
+          timingParameters:[RNSScreenStackAnimator defaultSpringTimingParametersApprox]];
+
+      [animator addAnimations:animationBlock];
+      [animator addCompletion:completionBlock];
+      _inFlightAnimator = animator;
+      [animator startAnimation];
     } else {
       // we don't want the EaseInOut option when swiping to dismiss the view, it is the same in default animation option
-      [UIView animateWithDuration:[self transitionDuration:transitionContext]
-                            delay:0.0
-                          options:UIViewAnimationOptionCurveLinear
-                       animations:animationBlock
-                       completion:completionBlock];
+      UIViewPropertyAnimator *animator =
+          [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                                     curve:UIViewAnimationCurveLinear
+                                                animations:animationBlock];
+      [animator addCompletion:completionBlock];
+      [animator setUserInteractionEnabled:YES];
+      _inFlightAnimator = animator;
     }
   }
 }
@@ -250,26 +309,30 @@ - (void)animateFadeWithTransitionContext:(id<UIViewControllerContextTransitionin
   if (_operation == UINavigationControllerOperationPush) {
     [[transitionContext containerView] addSubview:toViewController.view];
     toViewController.view.alpha = 0.0;
-    [UIView animateWithDuration:[self transitionDuration:transitionContext]
-        animations:^{
-          toViewController.view.alpha = 1.0;
-        }
-        completion:^(BOOL finished) {
-          toViewController.view.alpha = 1.0;
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
+    auto animator = [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                                               curve:UIViewAnimationCurveEaseInOut
+                                                          animations:^{
+                                                            toViewController.view.alpha = 1.0;
+                                                          }];
+    [animator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      toViewController.view.alpha = 1.0;
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    }];
+    _inFlightAnimator = animator;
+    [animator startAnimation];
   } else if (_operation == UINavigationControllerOperationPop) {
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
-
-    [UIView animateWithDuration:[self transitionDuration:transitionContext]
-        animations:^{
-          fromViewController.view.alpha = 0.0;
-        }
-        completion:^(BOOL finished) {
-          fromViewController.view.alpha = 1.0;
-
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
+    auto animator = [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                                               curve:UIViewAnimationCurveEaseInOut
+                                                          animations:^{
+                                                            fromViewController.view.alpha = 0.0;
+                                                          }];
+    [animator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      fromViewController.view.alpha = 1.0;
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    }];
+    _inFlightAnimator = animator;
+    [animator startAnimation];
   }
 }
 
@@ -283,16 +346,21 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
   if (_operation == UINavigationControllerOperationPush) {
     toViewController.view.transform = topBottomTransform;
     [[transitionContext containerView] addSubview:toViewController.view];
-    [UIView animateWithDuration:[self transitionDuration:transitionContext]
-        animations:^{
-          fromViewController.view.transform = CGAffineTransformIdentity;
-          toViewController.view.transform = CGAffineTransformIdentity;
-        }
-        completion:^(BOOL finished) {
-          fromViewController.view.transform = CGAffineTransformIdentity;
-          toViewController.view.transform = CGAffineTransformIdentity;
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
+
+    auto animator = [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                                               curve:UIViewAnimationCurveEaseInOut
+                                                          animations:^{
+                                                            fromViewController.view.transform =
+                                                                CGAffineTransformIdentity;
+                                                            toViewController.view.transform = CGAffineTransformIdentity;
+                                                          }];
+    [animator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      fromViewController.view.transform = CGAffineTransformIdentity;
+      toViewController.view.transform = CGAffineTransformIdentity;
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    }];
+    _inFlightAnimator = animator;
+    [animator startAnimation];
   } else if (_operation == UINavigationControllerOperationPop) {
     toViewController.view.transform = CGAffineTransformIdentity;
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
@@ -301,23 +369,26 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
       toViewController.view.transform = CGAffineTransformIdentity;
       fromViewController.view.transform = topBottomTransform;
     };
-    void (^completionBlock)(BOOL) = ^(BOOL finished) {
+    void (^completionBlock)(UIViewAnimatingPosition) = ^(UIViewAnimatingPosition finalPosition) {
       fromViewController.view.transform = CGAffineTransformIdentity;
       toViewController.view.transform = CGAffineTransformIdentity;
       [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
     };
 
     if (!transitionContext.isInteractive) {
-      [UIView animateWithDuration:[self transitionDuration:transitionContext]
-                       animations:animationBlock
-                       completion:completionBlock];
+      auto animator = [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                                                 curve:UIViewAnimationCurveEaseInOut
+                                                            animations:animationBlock];
+      [animator addCompletion:completionBlock];
+      _inFlightAnimator = animator;
+      [animator startAnimation];
     } else {
       // we don't want the EaseInOut option when swiping to dismiss the view, it is the same in default animation option
-      [UIView animateWithDuration:[self transitionDuration:transitionContext]
-                            delay:0.0
-                          options:UIViewAnimationOptionCurveLinear
-                       animations:animationBlock
-                       completion:completionBlock];
+      auto animator = [[UIViewPropertyAnimator alloc] initWithDuration:[self transitionDuration:transitionContext]
+                                                                 curve:UIViewAnimationCurveLinear
+                                                            animations:animationBlock];
+      [animator addCompletion:completionBlock];
+      _inFlightAnimator = animator;
     }
   }
 }
@@ -329,7 +400,7 @@ - (void)animateFadeFromBottomWithTransitionContext:(id<UIViewControllerContextTr
   CGAffineTransform topBottomTransform =
       CGAffineTransformMakeTranslation(0, 0.08 * transitionContext.containerView.bounds.size.height);
 
-  const float transitionDuration = [self transitionDuration:transitionContext];
+  const float baseTransitionDuration = [self transitionDuration:transitionContext];
 
   if (_operation == UINavigationControllerOperationPush) {
     toViewController.view.transform = topBottomTransform;
@@ -338,52 +409,59 @@ - (void)animateFadeFromBottomWithTransitionContext:(id<UIViewControllerContextTr
 
     // Android Nougat open animation
     // http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
-    [UIView animateWithDuration:transitionDuration * RNSSlideOpenTransitionDurationProportion // defaults to 0.35 s
-        delay:0
-        options:UIViewAnimationOptionCurveEaseOut
-        animations:^{
-          fromViewController.view.transform = CGAffineTransformIdentity;
-          toViewController.view.transform = CGAffineTransformIdentity;
-        }
-        completion:^(BOOL finished) {
-          fromViewController.view.transform = CGAffineTransformIdentity;
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
-    [UIView animateWithDuration:transitionDuration * RNSFadeOpenTransitionDurationProportion // defaults to 0.2 s
-                          delay:0
-                        options:UIViewAnimationOptionCurveEaseOut
-                     animations:^{
-                       toViewController.view.alpha = 1.0;
-                     }
-                     completion:nil];
-
+    auto slideAnimator = [[UIViewPropertyAnimator alloc]
+        initWithDuration:baseTransitionDuration * RNSSlideOpenTransitionDurationProportion
+                   curve:UIViewAnimationCurveEaseOut
+              animations:^{
+                fromViewController.view.transform = CGAffineTransformIdentity;
+                toViewController.view.transform = CGAffineTransformIdentity;
+              }];
+    [slideAnimator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      fromViewController.view.transform = CGAffineTransformIdentity;
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    }];
+
+    auto fadeAnimator = [[UIViewPropertyAnimator alloc]
+        initWithDuration:baseTransitionDuration * RNSFadeOpenTransitionDurationProportion
+                   curve:UIViewAnimationCurveEaseOut
+              animations:^{
+                toViewController.view.alpha = 1.0;
+              }];
+
+    _inFlightAnimator = slideAnimator;
+    [slideAnimator startAnimation];
+    [fadeAnimator startAnimation];
   } else if (_operation == UINavigationControllerOperationPop) {
     toViewController.view.transform = CGAffineTransformIdentity;
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
 
     // Android Nougat exit animation
     // http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
-    [UIView animateWithDuration:transitionDuration * RNSSlideCloseTransitionDurationProportion // defaults to 0.25 s
-        delay:0
-        options:UIViewAnimationOptionCurveEaseIn
-        animations:^{
-          toViewController.view.transform = CGAffineTransformIdentity;
-          fromViewController.view.transform = topBottomTransform;
-        }
-        completion:^(BOOL finished) {
-          fromViewController.view.transform = CGAffineTransformIdentity;
-          toViewController.view.transform = CGAffineTransformIdentity;
-          fromViewController.view.alpha = 1.0;
-          toViewController.view.alpha = 1.0;
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
-    [UIView animateWithDuration:transitionDuration * RNSFadeCloseTransitionDurationProportion // defaults to 0.15 s
-                          delay:transitionDuration * RNSFadeCloseDelayTransitionDurationProportion // defaults to 0.1 s
-                        options:UIViewAnimationOptionCurveLinear
-                     animations:^{
-                       fromViewController.view.alpha = 0.0;
-                     }
-                     completion:nil];
+    auto slideAnimator = [[UIViewPropertyAnimator alloc]
+        initWithDuration:baseTransitionDuration * RNSSlideCloseTransitionDurationProportion
+                   curve:UIViewAnimationCurveEaseIn
+              animations:^{
+                toViewController.view.transform = CGAffineTransformIdentity;
+                fromViewController.view.transform = topBottomTransform;
+              }];
+    [slideAnimator addCompletion:^(UIViewAnimatingPosition finalPosition) {
+      fromViewController.view.transform = CGAffineTransformIdentity;
+      toViewController.view.transform = CGAffineTransformIdentity;
+      fromViewController.view.alpha = 1.0;
+      toViewController.view.alpha = 1.0;
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    }];
+
+    auto fadeAnimator = [[UIViewPropertyAnimator alloc]
+        initWithDuration:baseTransitionDuration * RNSFadeCloseTransitionDurationProportion
+                   curve:UIViewAnimationCurveLinear
+              animations:^{
+                fromViewController.view.alpha = 0.0;
+              }];
+
+    _inFlightAnimator = slideAnimator;
+    [slideAnimator startAnimation];
+    [fadeAnimator startAnimationAfterDelay:baseTransitionDuration * RNSFadeCloseDelayTransitionDurationProportion];
   }
 }
 
@@ -411,11 +489,20 @@ - (void)animateWithNoAnimation:(id<UIViewControllerContextTransitioning>)transit
   }
 }
 
+#pragma mark - Public API
+
+- (nullable id<UITimingCurveProvider>)timingParamsForAnimationCompletion
+{
+  return [RNSScreenStackAnimator defaultSpringTimingParametersApprox];
+}
+
 + (BOOL)isCustomAnimation:(RNSScreenStackAnimation)animation
 {
   return (animation != RNSScreenStackAnimationFlip && animation != RNSScreenStackAnimationDefault);
 }
 
+#pragma mark - Helpers
+
 - (void)animateTransitionWithStackAnimation:(RNSScreenStackAnimation)animation
                               shadowEnabled:(BOOL)shadowEnabled
                           transitionContext:(id<UIViewControllerContextTransitioning>)transitionContext
@@ -442,4 +529,20 @@ - (void)animateTransitionWithStackAnimation:(RNSScreenStackAnimation)animation
   [self animateSimplePushWithShadowEnabled:shadowEnabled transitionContext:transitionContext toVC:toVC fromVC:fromVC];
 }
 
++ (UISpringTimingParameters *)defaultSpringTimingParametersApprox
+{
+  // Default curve provider is as defined below, however spring timing defined this way
+  // ignores the requested duration of the animation, effectively impairing our `animationDuration` prop.
+  // We want to keep `animationDuration` functional.
+  // id<UITimingCurveProvider> timingCurveProvider = [[UISpringTimingParameters alloc] init];
+
+  // According to "Programming iOS 14" by Matt Neuburg, the params for the default spring are as follows:
+  // mass = 3, stiffness = 1000, damping = 500. Damping ratio is computed using formula
+  // ratio = damping / (2 * sqrt(stiffness * mass)) ==> default damping ratio should be ~= 4,56.
+  // I've found afterwards that this is even indicated here:
+  // https://developer.apple.com/documentation/uikit/uispringtimingparameters/1649802-init?language=objc
+
+  return [[UISpringTimingParameters alloc] initWithDampingRatio:4.56];
+}
+
 @end
diff --git a/native-stack/README.md b/native-stack/README.md
index 4ebd61d325..f87fa5dfe9 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -366,7 +366,7 @@ A string that can be used as a fallback for `headerTitle`.
 
 #### `transitionDuration` (iOS only)
 
-Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `500`.
 
 The duration of `default` and `flip` transitions isn't customizable.
 
diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts
index 6f968db091..8fcdefac81 100644
--- a/src/fabric/ModalScreenNativeComponent.ts
+++ b/src/fabric/ModalScreenNativeComponent.ts
@@ -99,7 +99,7 @@ export interface NativeProps extends ViewProps {
   gestureResponseDistance?: GestureResponseDistanceType;
   stackPresentation?: WithDefault<StackPresentation, 'push'>;
   stackAnimation?: WithDefault<StackAnimation, 'default'>;
-  transitionDuration?: WithDefault<Int32, 350>;
+  transitionDuration?: WithDefault<Int32, 500>;
   replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
   swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
   hideKeyboardOnSwipe?: boolean;
diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts
index 80832f2944..37dbf94c68 100644
--- a/src/fabric/ScreenNativeComponent.ts
+++ b/src/fabric/ScreenNativeComponent.ts
@@ -99,7 +99,7 @@ export interface NativeProps extends ViewProps {
   gestureResponseDistance?: GestureResponseDistanceType;
   stackPresentation?: WithDefault<StackPresentation, 'push'>;
   stackAnimation?: WithDefault<StackAnimation, 'default'>;
-  transitionDuration?: WithDefault<Int32, 350>;
+  transitionDuration?: WithDefault<Int32, 500>;
   replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
   swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
   hideKeyboardOnSwipe?: boolean;
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index d0b5726570..1f04534ee6 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -515,7 +515,7 @@ export type NativeStackNavigationOptions = {
    */
   title?: string;
   /**
-   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `500`.
    * The duration of `default` and `flip` transitions isn't customizable.
    *
    * @platform ios
diff --git a/src/types.tsx b/src/types.tsx
index d4162c23bf..b8800c7537 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -448,7 +448,7 @@ export interface ScreenProps extends ViewProps {
    */
   swipeDirection?: SwipeDirectionTypes;
   /**
-   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `500`.
    * The duration of `default` and `flip` transitions isn't customizable.
    *
    * @platform ios

From b38c5908538dfd7e218632019104e44b9b0848f0 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Wed, 6 Nov 2024 17:24:01 +0100
Subject: [PATCH 8/8] Release 4.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a60f6f3733..3db9d54cb1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "4.0.0-beta.17",
+  "version": "4.0.0",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",