Skip to content

Commit af0c62a

Browse files
okwasniewskiokwasniewski
authored
Feat/react navigation v7 (#159)
1 parent 51c523b commit af0c62a

File tree

8 files changed

+178
-96
lines changed

8 files changed

+178
-96
lines changed

‎.changeset/brown-colts-dance.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@bottom-tabs/react-navigation': minor
3+
---
4+
5+
feat: migrate to React Navigation v7

‎apps/example-expo/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"dependencies": {
2121
"@bottom-tabs/react-navigation": "*",
2222
"@expo/vector-icons": "^14.0.2",
23-
"@react-navigation/native": "^6.1.18",
23+
"@react-navigation/native": "7.0.4",
2424
"expo": "~51.0.39",
2525
"expo-build-properties": "~0.12.5",
2626
"expo-constants": "~16.0.2",
@@ -36,9 +36,9 @@
3636
"react-dom": "18.2.0",
3737
"react-native": "0.75.4",
3838
"react-native-bottom-tabs": "*",
39-
"react-native-gesture-handler": "~2.20.0",
39+
"react-native-gesture-handler": "2.21.2",
4040
"react-native-safe-area-context": "4.10.5",
41-
"react-native-screens": "^3.35.0"
41+
"react-native-screens": "4.3.0"
4242
},
4343
"devDependencies": {
4444
"@babel/core": "^7.25.2",

‎apps/example/ios/Podfile.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1594,7 +1594,7 @@ PODS:
15941594
- React-Core
15951595
- React-jsi
15961596
- ReactTestApp-Resources (1.0.0-dev)
1597-
- RNGestureHandler (2.21.0):
1597+
- RNGestureHandler (2.21.2):
15981598
- DoubleConversion
15991599
- glog
16001600
- RCT-Folly (= 2024.01.01.00)
@@ -1615,7 +1615,7 @@ PODS:
16151615
- ReactCommon/turbomodule/bridging
16161616
- ReactCommon/turbomodule/core
16171617
- Yoga
1618-
- RNScreens (3.35.0):
1618+
- RNScreens (4.3.0):
16191619
- DoubleConversion
16201620
- glog
16211621
- RCT-Folly (= 2024.01.01.00)
@@ -1636,9 +1636,9 @@ PODS:
16361636
- ReactCodegen
16371637
- ReactCommon/turbomodule/bridging
16381638
- ReactCommon/turbomodule/core
1639-
- RNScreens/common (= 3.35.0)
1639+
- RNScreens/common (= 4.3.0)
16401640
- Yoga
1641-
- RNScreens/common (3.35.0):
1641+
- RNScreens/common (4.3.0):
16421642
- DoubleConversion
16431643
- glog
16441644
- RCT-Folly (= 2024.01.01.00)
@@ -1975,8 +1975,8 @@ SPEC CHECKSUMS:
19751975
ReactNativeHost: a3cd2bc15b6deac7439318607ce5637d8a93a117
19761976
ReactTestApp-DevSupport: ce66fc1bbcf598d7e90616db390a0274c13e14e7
19771977
ReactTestApp-Resources: 9c387cfe7185736e6a9045e5aa3e085367be6aa3
1978-
RNGestureHandler: 4f0384d607f005e33ac8acae4a8ace325fea883f
1979-
RNScreens: d4551ceaec50b2fd6648e36d2e47dd42ef9ccfef
1978+
RNGestureHandler: 492b1d415a25506d1dc612e6a14932b1e697d835
1979+
RNScreens: 16a61c0a9fe4cd69af6489b8d10ba580b5e22ed0
19801980
RNVectorIcons: a1344e212e80e6e0f4537a9960148201175f4225
19811981
SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8
19821982
SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c

‎apps/example/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@
1717
"@bottom-tabs/react-navigation": "*",
1818
"@callstack/react-native-visionos": "^0.75.0",
1919
"@react-navigation/bottom-tabs": "^6.6.1",
20-
"@react-navigation/native": "^6.1.18",
21-
"@react-navigation/native-stack": "^6.11.0",
22-
"@react-navigation/stack": "^6.4.1",
20+
"@react-navigation/native": "7.0.4",
21+
"@react-navigation/native-stack": "^7.1.1",
22+
"@react-navigation/stack": "^7.0.6",
2323
"color": "^4.2.3",
2424
"react": "18.3.1",
2525
"react-native": "0.75.4",
2626
"react-native-bottom-tabs": "*",
27-
"react-native-gesture-handler": "^2.20.0",
27+
"react-native-gesture-handler": "^2.21.2",
2828
"react-native-paper": "^5.12.5",
2929
"react-native-safe-area-context": "^4.11.0",
30-
"react-native-screens": "^3.35.0",
30+
"react-native-screens": "4.3.0",
3131
"react-native-vector-icons": "^10.2.0"
3232
},
3333
"devDependencies": {

‎packages/react-navigation/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"access": "public"
5757
},
5858
"devDependencies": {
59-
"@react-navigation/native": "^6.1.18",
59+
"@react-navigation/native": "7.0.4",
6060
"@types/color": "^3.0.6",
6161
"jest": "^29.7.0",
6262
"react": "18.3.1",
@@ -69,7 +69,7 @@
6969
"color": "^4.2.3"
7070
},
7171
"peerDependencies": {
72-
"@react-navigation/native": ">=6",
72+
"@react-navigation/native": ">=7",
7373
"react": "*",
7474
"react-native": "*",
7575
"react-native-bottom-tabs": "*"

‎packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import type {
2-
DefaultNavigatorOptions,
3-
ParamListBase,
4-
TabActionHelpers,
5-
TabNavigationState,
6-
TabRouterOptions,
7-
} from '@react-navigation/native';
81
import {
9-
TabRouter,
102
createNavigatorFactory,
3+
type DefaultNavigatorOptions,
4+
type NavigatorTypeBagBase,
5+
type ParamListBase,
6+
type StaticConfig,
7+
type TabActionHelpers,
8+
type TabNavigationState,
9+
TabRouter,
10+
type TabRouterOptions,
11+
type TypedNavigator,
1112
useNavigationBuilder,
1213
useTheme,
1314
} from '@react-navigation/native';
@@ -17,14 +18,17 @@ import type {
1718
NativeBottomTabNavigationConfig,
1819
NativeBottomTabNavigationEventMap,
1920
NativeBottomTabNavigationOptions,
21+
NativeBottomTabNavigationProp,
2022
} from '../types';
2123
import NativeBottomTabView from '../views/NativeBottomTabView';
2224

2325
export type NativeBottomTabNavigatorProps = DefaultNavigatorOptions<
2426
ParamListBase,
27+
string | undefined,
2528
TabNavigationState<ParamListBase>,
2629
NativeBottomTabNavigationOptions,
27-
NativeBottomTabNavigationEventMap
30+
NativeBottomTabNavigationEventMap,
31+
NativeBottomTabNavigationProp<ParamListBase>
2832
> &
2933
TabRouterOptions &
3034
NativeBottomTabNavigationConfig;
@@ -34,10 +38,12 @@ function NativeBottomTabNavigator({
3438
initialRouteName,
3539
backBehavior,
3640
children,
41+
layout,
3742
screenListeners,
3843
screenOptions,
3944
tabBarActiveTintColor: customActiveTintColor,
4045
tabBarInactiveTintColor: customInactiveTintColor,
46+
UNSTABLE_getStateForRouteNamesChange,
4147
...rest
4248
}: NativeBottomTabNavigatorProps) {
4349
const { colors } = useTheme();
@@ -63,8 +69,10 @@ function NativeBottomTabNavigator({
6369
initialRouteName,
6470
backBehavior,
6571
children,
72+
layout,
6673
screenListeners,
6774
screenOptions,
75+
UNSTABLE_getStateForRouteNamesChange,
6876
});
6977

7078
return (
@@ -81,9 +89,25 @@ function NativeBottomTabNavigator({
8189
);
8290
}
8391

84-
export default createNavigatorFactory<
85-
TabNavigationState<ParamListBase>,
86-
NativeBottomTabNavigationOptions,
87-
NativeBottomTabNavigationEventMap,
88-
typeof NativeBottomTabNavigator
89-
>(NativeBottomTabNavigator);
92+
export default function createNativeBottomTabNavigator<
93+
const ParamList extends ParamListBase,
94+
const NavigatorID extends string | undefined = undefined,
95+
const TypeBag extends NavigatorTypeBagBase = {
96+
ParamList: ParamList;
97+
NavigatorID: NavigatorID;
98+
State: TabNavigationState<ParamList>;
99+
ScreenOptions: NativeBottomTabNavigationOptions;
100+
EventMap: NativeBottomTabNavigationEventMap;
101+
NavigationList: {
102+
[RouteName in keyof ParamList]: NativeBottomTabNavigationProp<
103+
ParamList,
104+
RouteName,
105+
NavigatorID
106+
>;
107+
};
108+
Navigator: typeof NativeBottomTabNavigator;
109+
},
110+
const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
111+
>(config?: Config): TypedNavigator<TypeBag, Config> {
112+
return createNavigatorFactory(NativeBottomTabNavigator)(config);
113+
}

‎packages/react-navigation/src/views/NativeBottomTabView.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import type {
2-
ParamListBase,
3-
TabNavigationState,
4-
Route,
1+
import {
2+
type ParamListBase,
3+
type TabNavigationState,
4+
type Route,
5+
CommonActions,
56
} from '@react-navigation/native';
67
import type {
78
NativeBottomTabDescriptorMap,
@@ -81,10 +82,9 @@ export default function NativeBottomTabView({
8182
if (event.defaultPrevented) {
8283
return;
8384
} else {
84-
navigation.navigate({
85-
key: route.key,
86-
name: route.name,
87-
merge: true,
85+
navigation.dispatch({
86+
...CommonActions.navigate(route),
87+
target: state.key,
8888
});
8989
}
9090
}}

0 commit comments

Comments
 (0)