Skip to content

Commit a7d40f0

Browse files
Add Stack.ScreenWithCallback to support render callback (via children prop) (#32)
* changed prop from component to componentOrRenderCallback * correct screenprops type * create seperate modules for component and rendercallback
1 parent 425b950 commit a7d40f0

File tree

4 files changed

+56
-25
lines changed

4 files changed

+56
-25
lines changed

src/Example.bs.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,19 +72,24 @@ var MainStackScreen_Header = include.Header;
7272

7373
var MainStackScreen_stack = include.stack;
7474

75+
var MainStackScreen_ScreenWithCallback = include.ScreenWithCallback;
76+
7577
var MainStackScreen = {
7678
StakeParams: StakeParams,
7779
Navigation: MainStackScreen_Navigation,
7880
HeaderTitle: MainStackScreen_HeaderTitle,
7981
Header: MainStackScreen_Header,
8082
stack: MainStackScreen_stack,
83+
ScreenWithCallback: MainStackScreen_ScreenWithCallback,
8184
$$Screen: $$Screen,
8285
$$Navigator: $$Navigator,
8386
make: Example$MainStackScreen
8487
};
8588

8689
var include$1 = Stack$ReactNavigation.Make({ });
8790

91+
var ScreenWithCallback = include$1.ScreenWithCallback;
92+
8893
var $$Screen$1 = include$1.$$Screen;
8994

9095
var $$Navigator$1 = include$1.$$Navigator;
@@ -98,9 +103,14 @@ function Example$RootStackScreen(Props) {
98103
}, React.createElement($$Screen$1.make, {
99104
name: "Main",
100105
component: Example$MainStackScreen
101-
}), React.createElement($$Screen$1.make, {
106+
}), React.createElement(ScreenWithCallback.make, {
102107
name: "MyModal",
103-
component: Example$ModalScreen
108+
children: (function (param) {
109+
return React.createElement(Example$ModalScreen, {
110+
navigation: param.navigation,
111+
route: param.route
112+
});
113+
})
104114
}))
105115
});
106116
}
@@ -118,6 +128,7 @@ var RootStackScreen = {
118128
HeaderTitle: RootStackScreen_HeaderTitle,
119129
Header: RootStackScreen_Header,
120130
stack: RootStackScreen_stack,
131+
ScreenWithCallback: ScreenWithCallback,
121132
$$Screen: $$Screen$1,
122133
$$Navigator: $$Navigator$1,
123134
make: Example$RootStackScreen

src/Example.re

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ module RootStackScreen = {
5959
<Native.NavigationContainer>
6060
<Navigator mode=`modal headerMode=`none>
6161
<Screen name="Main" component=MainStackScreen.make />
62-
<Screen name="MyModal" component=ModalScreen.make />
62+
<ScreenWithCallback name="MyModal">
63+
{({navigation, route}) => <ModalScreen navigation route />}
64+
</ScreenWithCallback>
6365
</Navigator>
6466
</Native.NavigationContainer>;
6567
};

src/Stack.bs.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,23 @@ function Make(M) {
4040
};
4141
var stack = Stack.createStackNavigator();
4242
var make = stack.Screen;
43-
var $$Screen = {
43+
var ScreenWithCallback = {
4444
make: make
4545
};
46-
var make$1 = stack.Navigator;
47-
var $$Navigator = {
46+
var make$1 = stack.Screen;
47+
var $$Screen = {
4848
make: make$1
4949
};
50+
var make$2 = stack.Navigator;
51+
var $$Navigator = {
52+
make: make$2
53+
};
5054
return {
5155
Navigation: Navigation,
5256
HeaderTitle: HeaderTitle,
5357
Header: Header,
5458
stack: stack,
59+
ScreenWithCallback: ScreenWithCallback,
5560
$$Screen: $$Screen,
5661
$$Navigator: $$Navigator
5762
};

src/Stack.re

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,7 @@ module TransitionSpec = {
8989
};
9090
[@bs.obj]
9191
external spring:
92-
(~animation: [@bs.string] [ | `spring], ~config: springConfig) => t =
93-
"";
92+
(~animation: [@bs.string] [ | `spring], ~config: springConfig) => t;
9493

9594
type timingConfig = {
9695
duration: int,
@@ -99,8 +98,7 @@ module TransitionSpec = {
9998

10099
[@bs.obj]
101100
external timing:
102-
(~animation: [@bs.string] [ | `timing], ~config: timingConfig) => t =
103-
"";
101+
(~animation: [@bs.string] [ | `timing], ~config: timingConfig) => t;
104102
};
105103

106104
type transitionSpec = {
@@ -136,8 +134,7 @@ module Make = (M: {type params;}) => {
136134
type gestureResponseDistance;
137135
[@bs.obj]
138136
external gestureResponseDistance:
139-
(~vertical: float=?, ~horizontal: float=?, unit) => gestureResponseDistance =
140-
"";
137+
(~vertical: float=?, ~horizontal: float=?, unit) => gestureResponseDistance;
141138

142139
module HeaderTitle = {
143140
type t;
@@ -251,8 +248,7 @@ module Make = (M: {type params;}) => {
251248
~headerStyleInterpolator: stackHeaderStyleInterpolator=?,
252249
unit
253250
) =>
254-
options =
255-
"";
251+
options;
256252
type optionsProps = {
257253
navigation,
258254
route,
@@ -266,17 +262,23 @@ module Make = (M: {type params;}) => {
266262
headerMode: option(string),
267263
keyboardHandlingEnabled: option(bool),
268264
};
269-
265+
type renderCallbackProp = {
266+
navigation,
267+
route,
268+
};
270269
type screenProps('params) = {
271270
name: string,
272271
options: option(optionCallback),
273272
initialParams: option('params),
274273
component:
275-
React.component({
276-
.
277-
"navigation": navigation,
278-
"route": route,
279-
}),
274+
option(
275+
React.component({
276+
.
277+
"navigation": navigation,
278+
"route": route,
279+
}),
280+
),
281+
children: option(renderCallbackProp => React.element),
280282
};
281283

282284
[@bs.module "@react-navigation/stack"]
@@ -290,7 +292,19 @@ module Make = (M: {type params;}) => {
290292
"createStackNavigator";
291293

292294
let stack = make();
293-
295+
module ScreenWithCallback = {
296+
[@bs.obj]
297+
external makeProps:
298+
(
299+
~name: string,
300+
~options: optionCallback=?,
301+
~initialParams: M.params=?,
302+
~children: renderCallbackProp => React.element,
303+
unit
304+
) =>
305+
screenProps(M.params);
306+
let make = stack##"Screen";
307+
};
294308
module Screen = {
295309
type componentProps = {navigation};
296310
[@bs.obj]
@@ -306,8 +320,8 @@ module Make = (M: {type params;}) => {
306320
}),
307321
unit
308322
) =>
309-
screenProps(M.params) =
310-
"";
323+
screenProps(M.params);
324+
311325
let make = stack##"Screen";
312326
};
313327

@@ -323,8 +337,7 @@ module Make = (M: {type params;}) => {
323337
~children: React.element,
324338
unit
325339
) =>
326-
navigatorProps =
327-
"";
340+
navigatorProps;
328341

329342
let make = stack##"Navigator";
330343
};

0 commit comments

Comments
 (0)