refactor!: drop support for native-stack v5 (#2373)

## Description ~This PR intents to remove native-stack v5 implementation from the repository.~ Plan: 1. [x] ~Remove public `/native-stack` directory~ 2. [ ] ~Remove implementation in `src/native-stack/` directory~ 3. [x] ~Remove all references in docs to `native-stack@v5`~ 4. [ ] ~Remove all in-code references to `native-stack@v5`~ > [!caution] ~2 & 4 require some more work to be done, because screen transitions API code (integration with reanimated) makes use of API exposed by `native-stack@v5`.~ > > ~I need to figure out how to decouple these first.~ The plan has changed. We now intend to mark native-stack@v5 and deprecated and destined for removal with one of upcoming **minor** versions of the library after initial 4.0.0 release. For the time before removal native-stack@v5 will be shipped with few minor versions of screens v4 line, however it won't be supported and should be considered broken (and it is, if you're using native-header). > [!important] This change breaks `TestScreenAnimation` as this test requires screen transition API which is not yet ported to v7. ## Changes Mark types & factory functions of native stack v5 as deprecated and add comments explaining our approach. ## Test code and steps to reproduce N/A ## Checklist - [x] Ensured that CI passes --------- Co-authored-by: Maciej Stosio <[email protected]>
software-mansion · Oct 22, 2024 · 2edda53 · 2edda53
1 parent cf31492
commit 2edda53
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -133,6 +133,9 @@ 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.
+
 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).
 
 To configure react-navigation to use screens instead of plain RN Views for rendering screen views, simply add this library as a dependency to your project:
@@ -184,7 +187,6 @@ You can also disable the usage of native screens per navigator with [`detachInac
 To take advantage of the native stack navigator primitive for React Navigation that leverages `UINavigationController` on iOS and `Fragment` on Android, please refer:
 
 - for React Navigation >= v6 to the [Native Stack Navigator part of React Navigation documentation](https://reactnavigation.org/docs/native-stack-navigator)
-- for React Navigation v5 to the [README in react-native-screens/native-stack](https://github.com/software-mansion/react-native-screens/tree/main/native-stack)
 
 ## `FullWindowOverlay`
 

diff --git a/apps/src/tests/Test1649/index.tsx b/apps/src/tests/Test1649/index.tsx
@@ -6,9 +6,6 @@ import {
   NativeSyntheticEvent,
 } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
-// import {
-//   createNativeStackNavigator,
-// } from 'react-native-screens/native-stack';
 import {
   createNativeStackNavigator,
 } from '@react-navigation/native-stack';

diff --git a/apps/src/tests/Test1649/routes.tsx b/apps/src/tests/Test1649/routes.tsx
@@ -10,8 +10,7 @@ import SheetScreenWithScrollView from './screens/SheetScreenWithScrollView';
 import ModalScreen from './screens/ModalScreen';
 import PushWithScrollView from './screens/PushWithScrollView';
 import SheetScreenWithTextInput from './screens/SheetScreenWithTextInput';
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack';
-import { NativeSyntheticEvent } from 'react-native';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
 export type RouteDescriptor = {
   name: string,
@@ -28,23 +27,23 @@ const routes: Record<string, RouteDescriptor> = {
     name: "Second",
     component: Second,
     options: {
-      fullScreenSwipeEnabled: true,
+      fullScreenGestureEnabled: true,
     },
   },
   Third: {
     name: "Third",
     component: Third,
     options: {
       headerShown: true,
-      fullScreenSwipeEnabled: true,
+      fullScreenGestureEnabled: true,
     },
   },
   Sheet: {
     name: "SheetScreen",
     component: SheetScreen,
     options: {
       headerShown: false,
-      stackPresentation: 'formSheet',
+      presentation: 'formSheet',
       sheetElevation: 24,
       unstable_screenStyle: {
         backgroundColor: 'firebrick',
@@ -57,7 +56,7 @@ const routes: Record<string, RouteDescriptor> = {
     component: ModalScreen,
     options: {
       headerShown: false,
-      stackPresentation: 'modal',
+      presentation: 'modal',
       ...sheetInitialOptions,
     },
   },
@@ -66,7 +65,7 @@ const routes: Record<string, RouteDescriptor> = {
     component: SheetScreenWithScrollView,
     options: {
       headerShown: false,
-      stackPresentation: 'formSheet',
+      presentation: 'formSheet',
       ...sheetInitialOptions,
     },
   },
@@ -75,7 +74,7 @@ const routes: Record<string, RouteDescriptor> = {
     component: SheetScreenWithTextInput,
     options: {
       headerShown: false,
-      stackPresentation: 'formSheet',
+      presentation: 'formSheet',
       ...sheetInitialOptions,
     },
   },

diff --git a/apps/src/tests/Test1649/types.tsx b/apps/src/tests/Test1649/types.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react';
 import { ParamListBase } from '@react-navigation/native';
 import {
   NativeStackNavigationOptions,
-} from 'react-native-screens/native-stack';
+} from '@react-navigation/native-stack';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 export type NavProp = NativeStackNavigationProp<ParamListBase>;
@@ -21,6 +20,8 @@ export type SheetOptions = {
   sheetCornerRadius?: NativeStackNavigationOptions['sheetCornerRadius'],
   sheetGrabberVisible?: NativeStackNavigationOptions['sheetGrabberVisible'],
   sheetInitialDetent?: NativeStackNavigationOptions['sheetInitialDetent'],
+  // @ts-expect-error this prop is available with yet unreleased react navigation version
+  // see this PR: https://github.com/react-navigation/react-navigation/pull/12032
   onSheetDetentChanged?: NativeStackNavigationOptions['onSheetDetentChanged'];
 }
 
diff --git a/apps/src/tests/TestScreenAnimation.tsx b/apps/src/tests/TestScreenAnimation.tsx
@@ -3,9 +3,9 @@ import { NavigationContainer } from '@react-navigation/native';
 import { View, StyleSheet, Button } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
-  createNativeStackNavigator,
   NativeStackNavigationProp,
-} from 'react-native-screens/native-stack';
+  createNativeStackNavigator,
+} from '@react-navigation/native-stack'
 import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
 
 type StackParamList = {
@@ -59,14 +59,15 @@ const App = (): JSX.Element => (
       <GestureDetectorProvider>
         <Stack.Navigator
           screenOptions={{
-            headerHideBackButton: true,
-            stackAnimation: 'none',
+            headerBackVisible: false,
+            animation: 'none',
           }}>
           <Stack.Screen name="ScreenA" component={MainScreen} />
           <Stack.Screen
             name="ScreenB"
             component={ScreenB}
             options={{
+              // @ts-ignore: goBackGesture is not implemented yet in react-navigation
               goBackGesture: 'twoDimensionalSwipe',
             }}
           />

diff --git a/guides/CONTRIBUTING.md b/guides/CONTRIBUTING.md
@@ -142,7 +142,7 @@ When your code changes are ready, it is time to open your Pull Request. GitHub a
 Currently, native stack is both in `react-native-screens` and `react-navigation`. `react-native-screens` contains native-stack v5 (`src/native-stack`), newer versions (v6, v7) are moved to `react-navigation` (available on branches `main`, `6.x`), hence in some cases it is necessary to prepare a pull request for `react-navigation` alongside the `react-native-screens` changes.
 
 > [!CAUTION]
-> Currently, in this setup we have some code duplications that we're aware of. We're planning to deprecate native-stack v5 soon and remove it from react-native-screens.
+> Currently, in this setup we have some code duplications that we're aware of. 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.
 
 #### Changes in native code
 

diff --git a/native-stack/README.md b/native-stack/README.md
@@ -1,6 +1,7 @@
 # Native Stack Navigator
 
-> **_NOTE:_** This README is dedicated for using `native-stack` with React Navigation **v5**. For using `native-stack` in React Navigation **v6** please refer to the [Native Stack Navigator part of React Navigation documentation](https://reactnavigation.org/docs/native-stack-navigator).
+> [!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.
 
 Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
 

diff --git a/native-stack/package.json b/native-stack/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "../lib/commonjs/native-stack/index",
-  "module": "../lib/module/native-stack/index",
-  "react-native": "../src/native-stack/index",
-  "types": "../lib/typescript/native-stack/index.d.ts"
+   "main": "../lib/commonjs/native-stack/index",
+   "module": "../lib/module/native-stack/index",
+   "react-native": "../src/native-stack/index",
+   "types": "../lib/typescript/native-stack/index.d.ts"
 }
diff --git a/src/native-stack/navigators/createNativeStackNavigator.tsx b/src/native-stack/navigators/createNativeStackNavigator.tsx
@@ -85,6 +85,9 @@ function NativeStackNavigator({
   );
 }
 
+/**
+ * @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.
+ */
 export default createNavigatorFactory<
   StackNavigationState<ParamListBase>,
   NativeStackNavigationOptions,

diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
@@ -24,6 +24,9 @@ import {
   SearchBarProps,
 } from '../types';
 
+/**
+ * @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.
+ */
 export type NativeStackNavigationEventMap = {
   /**
    * Event which fires when the screen appears.
@@ -62,6 +65,9 @@ export type NativeStackNavigationEventMap = {
   sheetDetentChange: { data: { index: number; isStable: boolean } };
 };
 
+/**
+ * @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.
+ */
 export type NativeStackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
@@ -74,6 +80,9 @@ export type NativeStackNavigationProp<
 > &
   StackActionHelpers<ParamList>;
 
+/**
+ * @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.
+ */
 export type NativeStackScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
@@ -82,15 +91,23 @@ export type NativeStackScreenProps<
   route: RouteProp<ParamList, RouteName>;
 };
 
+/**
+ * @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.
+ */
 export type NativeStackNavigationHelpers = NavigationHelpers<
   ParamListBase,
   NativeStackNavigationEventMap
 >;
 
-// We want it to be an empty object beacuse navigator does not have any additional config
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type NativeStackNavigationConfig = {};
+/**
+ * We want it to be an empty object beacuse navigator does not have any additional config
+ * @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.
+ */
+export type NativeStackNavigationConfig = {}; // eslint-disable-line @typescript-eslint/ban-types
 
+/**
+ * @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.
+ */
 export type NativeStackNavigationOptions = {
   /**
    * Image to display in the header as the back button.
@@ -527,23 +544,35 @@ export type NativeStackNavigationOptions = {
   unstable_sheetFooter?: () => React.ReactNode;
 };
 
+/**
+ * @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.
+ */
 export type NativeStackNavigatorProps =
   DefaultNavigatorOptions<NativeStackNavigationOptions> &
     StackRouterOptions &
     NativeStackNavigationConfig;
 
+/**
+ * @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.
+ */
 export type NativeStackDescriptor = Descriptor<
   ParamListBase,
   string,
   StackNavigationState<ParamListBase>,
   NativeStackNavigationOptions
 >;
 
+/**
+ * @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.
+ */
 export type NativeStackDescriptorMap = {
   [key: string]: NativeStackDescriptor;
 };
 
-// copy from GestureHandler to avoid strong dependency
+/**
+ * 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.
+ */
 export type PanGestureHandlerEventPayload = {
   x: number;
   y: number;
@@ -555,7 +584,10 @@ export type PanGestureHandlerEventPayload = {
   velocityY: number;
 };
 
-// copy from Reanimated to avoid strong dependency
+/**
+ * copy from Reanimated 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.
+ */
 export type GoBackGesture =
   | 'swipeRight'
   | 'swipeLeft'
@@ -565,6 +597,9 @@ export type GoBackGesture =
   | 'horizontalSwipe'
   | 'twoDimensionalSwipe';
 
+/**
+ * @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.
+ */
 export interface MeasuredDimensions {
   x: number;
   y: number;
@@ -574,6 +609,9 @@ export interface MeasuredDimensions {
   pageY: number;
 }
 
+/**
+ * @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.
+ */
 export type AnimatedScreenTransition = {
   topScreenStyle: (
     event: PanGestureHandlerEventPayload,
@@ -585,10 +623,16 @@ export type AnimatedScreenTransition = {
   ) => Record<string, unknown>;
 };
 
+/**
+ * @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.
+ */
 export type ScreensRefsHolder = React.MutableRefObject<
   Record<string, React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>>
 >;
 
+/**
+ * @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.
+ */
 export type GestureProviderProps = PropsWithChildren<{
   gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;
   screensRefs: ScreensRefsHolder;