Skip to content

Commit 9fda4ed

Browse files
vknezvknez
authored
Upgrade to React Navigation 6.x (#47)
* Upgrade to React Navigation 6.x - upgraded package version from 5.2.0 to 6.0.0 * Add `headerShown` option to `BottomTabs`
1 parent b89bf1e commit 9fda4ed

17 files changed

+295
-123
lines changed

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "rescript-react-navigation",
33
"description": "ReScript bindings for react-navigation.",
4-
"version": "5.2.0",
4+
"version": "6.0.0",
55
"peerDependencies": {
6-
"@react-navigation/bottom-tabs": "^5.0.0",
7-
"@react-navigation/drawer": "^5.0.0",
8-
"@react-navigation/material-bottom-tabs": "^5.0.0",
9-
"@react-navigation/material-top-tabs": "^5.0.0",
10-
"@react-navigation/native": "^5.0.0",
11-
"@react-navigation/stack": "^5.0.0",
6+
"@react-navigation/bottom-tabs": "^6.0.0",
7+
"@react-navigation/drawer": "^6.0.0",
8+
"@react-navigation/material-bottom-tabs": "^6.0.0",
9+
"@react-navigation/material-top-tabs": "^6.0.0",
10+
"@react-navigation/native": "^6.0.0",
11+
"@react-navigation/stack": "^6.0.0",
1212
"@rescript/react": "^0.10.0",
1313
"rescript-react-native": "^0.64.3"
1414
},

‎src/BottomTabs.bs.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,17 @@ function Make(M) {
2222
var $$Navigator = {
2323
make: make$2
2424
};
25+
var make$3 = bottomTabs.Group;
26+
var Group = {
27+
make: make$3
28+
};
2529
return {
2630
Navigation: Navigation,
2731
bottomTabs: bottomTabs,
2832
$$Screen: $$Screen,
2933
ScreenWithCallback: ScreenWithCallback,
30-
$$Navigator: $$Navigator
34+
$$Navigator: $$Navigator,
35+
Group: Group
3136
};
3237
}
3338

‎src/BottomTabs.res‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -57,23 +57,6 @@ module Make = (
5757
"inactiveTintColor": option<string>,
5858
}
5959

60-
@obj
61-
external bottomTabBarOptions: (
62-
~keyboardHidesTabBar: bool=?,
63-
~activeTintColor: string=?,
64-
~inactiveTintColor: string=?,
65-
~activeBackgroundColor: string=?,
66-
~inactiveBackgroundColor: string=?,
67-
~allowFontScaling: bool=?,
68-
~showLabel: bool=?,
69-
~labelStyle: ReactNative.Style.t=?,
70-
~tabStyle: ReactNative.Style.t=?,
71-
~labelPosition: labelPositionArgs => string=?,
72-
~adaptive: bool=?,
73-
~style: ReactNative.Style.t=?,
74-
unit,
75-
) => bottomTabBarOptions = ""
76-
7760
type accessibilityRole = string
7861
type accessibilityStates = array<string>
7962
type routeArgs = {route: route}
@@ -113,14 +96,31 @@ module Make = (
11396
@obj
11497
external options: (
11598
~title: string=?,
116-
~tabBarLabel: //TODO: dynamic, missing static option: React.ReactNode
117-
tabBarLabelArgs => React.element=?,
99+
~unmountOnBlur: bool=?,
100+
~_lazy: bool=?,
101+
~showIcon: bool=?,
102+
// TODO: Use @react-navigation/elements and add header-related options
103+
// https://reactnavigation.org/docs/bottom-tab-navigator/#header-related-options
104+
// https://github.com/rescript-react-native/rescript-react-navigation/pull/47
105+
// ~header: 'header=?,
106+
~headerShown: bool=?,
107+
~tabBarLabel: tabBarLabelArgs => React.element=?, //TODO: dynamic, missing static option: React.ReactNode
118108
~tabBarIcon: tabBarIconArgs => React.element=?,
119109
~tabBarAccessibilityLabel: string=?,
120110
~tabBarTestID: string=?,
121-
~tabBarVisible: bool=?,
122111
~tabBarButton: React.element=?,
123-
~unmountOnBlur: bool=?,
112+
~tabBarHideOnKeyboard: bool=?,
113+
~tabBarActiveTintColor: string=?,
114+
~tabBarInactiveTintColor: string=?,
115+
~tabBarActiveBackgroundColor: string=?,
116+
~tabBarInactiveBackgroundColor: string=?,
117+
~tabBarAllowFontScaling: bool=?,
118+
~tabBarShowLabel: bool=?,
119+
~tabBarLabelPosition: labelPositionArgs => string=?,
120+
~tabBarLabelStyle: ReactNative.Style.t=?,
121+
~tabBarItemStyle: ReactNative.Style.t=?,
122+
~tabBarStyle: ReactNative.Style.t=?,
123+
~tabBarBackground: unit => React.element=?,
124124
unit,
125125
) => options = ""
126126

@@ -131,13 +131,13 @@ module Make = (
131131

132132
type optionsCallback = optionsProps => options
133133

134+
type groupProps = {screenOptions: option<optionsCallback>}
135+
134136
type navigatorProps = {
135137
initialRouteName: option<string>,
136138
screenOptions: option<optionsCallback>,
137139
backBehavior: option<string>,
138-
_lazy: option<bool>,
139140
tabBar: option<bottomTabBarProps => React.element>,
140-
tabBarOptions: option<bottomTabBarOptions>,
141141
}
142142

143143
type renderCallbackProp = {
@@ -157,6 +157,7 @@ module Make = (
157157
external make: unit => {
158158
"Navigator": navigatorProps => React.element,
159159
"Screen": screenProps<M.params> => React.element,
160+
"Group": groupProps => React.element,
160161
} = "createBottomTabNavigator"
161162

162163
let bottomTabs = make()
@@ -193,14 +194,24 @@ module Make = (
193194
~initialRouteName: string=?,
194195
~screenOptions: optionsCallback=?,
195196
~children: React.element,
196-
~backBehavior: [#initialRoute | #order | #history | #none]=?,
197+
~backBehavior: [#firstRoute | #initialRoute | #order | #history | #none]=?,
197198
~_lazy: bool=?,
198199
~tabBar: bottomTabBarProps => React.element=?,
199-
~tabBarOptions: bottomTabBarOptions=?,
200200
~key: string=?,
201201
unit,
202202
) => navigatorProps = ""
203203

204204
let make = bottomTabs["Navigator"]
205205
}
206+
207+
module Group = {
208+
@obj
209+
external makeProps: (
210+
~screenOptions: optionsCallback=?,
211+
~children: React.element,
212+
~key: string=?,
213+
unit,
214+
) => groupProps = ""
215+
let make = bottomTabs["Group"]
216+
}
206217
}

‎src/Core.bs.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@
33
var Caml_option = require("rescript/lib/js/caml_option.js");
44

55
function NavigationHelpersCommon(M) {
6-
var navigateByKey = function (key, params, navigation) {
6+
var navigateByKey = function (key, params, merge, navigation) {
77
var tmp = {
88
key: key
99
};
1010
if (params !== undefined) {
1111
tmp.params = Caml_option.valFromOption(params);
1212
}
13+
if (merge !== undefined) {
14+
tmp.merge = merge;
15+
}
1316
navigation.navigate(tmp);
1417

1518
};
16-
var navigateByName = function (name, key, params, navigation) {
19+
var navigateByName = function (name, key, params, merge, navigation) {
1720
var tmp = {
1821
name: name
1922
};
@@ -23,6 +26,9 @@ function NavigationHelpersCommon(M) {
2326
if (params !== undefined) {
2427
tmp.params = Caml_option.valFromOption(params);
2528
}
29+
if (merge !== undefined) {
30+
tmp.merge = merge;
31+
}
2632
navigation.navigate(tmp);
2733

2834
};
@@ -37,17 +43,20 @@ function EventConsumer(M) {
3743
}
3844

3945
function NavigationScreenProp(M) {
40-
var navigateByKey = function (key, params, navigation) {
46+
var navigateByKey = function (key, params, merge, navigation) {
4147
var tmp = {
4248
key: key
4349
};
4450
if (params !== undefined) {
4551
tmp.params = Caml_option.valFromOption(params);
4652
}
53+
if (merge !== undefined) {
54+
tmp.merge = merge;
55+
}
4756
navigation.navigate(tmp);
4857

4958
};
50-
var navigateByName = function (name, key, params, navigation) {
59+
var navigateByName = function (name, key, params, merge, navigation) {
5160
var tmp = {
5261
name: name
5362
};
@@ -57,6 +66,9 @@ function NavigationScreenProp(M) {
5766
if (params !== undefined) {
5867
tmp.params = Caml_option.valFromOption(params);
5968
}
69+
if (merge !== undefined) {
70+
tmp.merge = merge;
71+
}
6072
navigation.navigate(tmp);
6173

6274
};

‎src/Core.res‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ type rec route<'params> = {
22
key: string,
33
name: string,
44
params: option<'params>,
5-
state: option<navigationState<'params>>,
5+
path: option<string>,
66
}
77
and navigationState<'params> = {
88
key: string,
@@ -29,27 +29,38 @@ module NavigationHelpersCommon = (
2929
type navigationParams
3030

3131
@obj
32-
external navigateByKeyParams: (~key: string, ~params: M.params=?, unit) => navigationParams = ""
32+
external navigateByKeyParams: (
33+
~key: string,
34+
~params: M.params=?,
35+
~merge: bool=?,
36+
unit,
37+
) => navigationParams = ""
3338

3439
@obj
3540
external navigateByNameParams: (
3641
~name: string,
3742
~key: string=?,
3843
~params: M.params=?,
44+
~merge: bool=?,
3945
unit,
4046
) => navigationParams = ""
4147

4248
@send external navigateBy: (navigation, navigationParams) => unit = "navigate"
4349

44-
let navigateByKey = (~key: string, ~params: option<M.params>=?, navigation) =>
45-
navigateBy(navigation, navigateByKeyParams(~key, ~params?, ()))
50+
let navigateByKey = (
51+
~key: string,
52+
~params: option<M.params>=?,
53+
~merge: option<bool>=?,
54+
navigation,
55+
) => navigateBy(navigation, navigateByKeyParams(~key, ~params?, ~merge?, ()))
4656

4757
let navigateByName = (
4858
~name: string,
4959
~key: option<string>=?,
5060
~params: option<M.params>=?,
61+
~merge: option<bool>=?,
5162
navigation,
52-
) => navigateBy(navigation, navigateByNameParams(~name, ~key?, ~params?, ()))
63+
) => navigateBy(navigation, navigateByNameParams(~name, ~key?, ~params?, ~merge?, ()))
5364

5465
@send external replace: (navigation, string) => unit = "replace"
5566
@send
@@ -113,9 +124,8 @@ module NavigationScreenProp = (
113124
external isFirstRouteInParent: (navigation, unit) => bool = "isFirstRouteInParent"
114125

115126
@send
116-
external dangerouslyGetParent: navigation => Js.nullable<navigation> = "dangerouslyGetParent"
127+
external getParent: navigation => Js.nullable<navigation> = "getParent"
117128

118129
@send
119-
external dangerouslyGetState: navigation => Js.nullable<navigationState<'params>> =
120-
"dangerouslyGetState"
130+
external getState: navigation => Js.nullable<navigationState<'params>> = "getState"
121131
}

‎src/Drawer.bs.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,16 @@ function Make(M) {
1818
var $$Navigator = {
1919
make: make$1
2020
};
21+
var make$2 = stack.Group;
22+
var Group = {
23+
make: make$2
24+
};
2125
return {
2226
Navigation: Navigation,
2327
stack: stack,
2428
$$Screen: $$Screen,
25-
$$Navigator: $$Navigator
29+
$$Navigator: $$Navigator,
30+
Group: Group
2631
};
2732
}
2833

0 commit comments

Comments
 (0)