Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Oct 22, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 will support only @react-navigation/native-stack v7.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> [!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 will support only @react-navigation/native-stack v7.
> [!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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed in: 19532d8


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:
Expand Down Expand Up @@ -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`

Expand Down
3 changes: 0 additions & 3 deletions apps/src/tests/Test1649/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
15 changes: 7 additions & 8 deletions apps/src/tests/Test1649/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand All @@ -57,7 +56,7 @@ const routes: Record<string, RouteDescriptor> = {
component: ModalScreen,
options: {
headerShown: false,
stackPresentation: 'modal',
presentation: 'modal',
...sheetInitialOptions,
},
},
Expand All @@ -66,7 +65,7 @@ const routes: Record<string, RouteDescriptor> = {
component: SheetScreenWithScrollView,
options: {
headerShown: false,
stackPresentation: 'formSheet',
presentation: 'formSheet',
...sheetInitialOptions,
},
},
Expand All @@ -75,7 +74,7 @@ const routes: Record<string, RouteDescriptor> = {
component: SheetScreenWithTextInput,
options: {
headerShown: false,
stackPresentation: 'formSheet',
presentation: 'formSheet',
...sheetInitialOptions,
},
},
Expand Down
5 changes: 3 additions & 2 deletions apps/src/tests/Test1649/types.tsx
Original file line number Diff line number Diff line change
@@ -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>;
Expand All @@ -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'];
}

2 changes: 1 addition & 1 deletion guides/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 will support only @react-navigation/native-stack v7.
maciekstosio marked this conversation as resolved.
Show resolved Hide resolved

#### Changes in native code

Expand Down
Loading
Loading