Skip to content

ScreenWithCallback for tabs navigators #34

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Jul 8, 2020
Merged

ScreenWithCallback for tabs navigators #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 7 additions & 2 deletions src/BottomTabs.bs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,19 @@ function Make(M) {
var $$Screen = {
make: make
};
var make$1 = bottomTabs.Navigator;
var $$Navigator = {
var make$1 = bottomTabs.Screen;
var ScreenWithCallback = {
make: make$1
};
var make$2 = bottomTabs.Navigator;
var $$Navigator = {
make: make$2
};
return {
Navigation: Navigation,
bottomTabs: bottomTabs,
$$Screen: $$Screen,
ScreenWithCallback: ScreenWithCallback,
$$Navigator: $$Navigator
};
}
Expand Down
65 changes: 50 additions & 15 deletions src/BottomTabs.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ module BottomTabNavigationProp = (M: {
};

module Make = (M: {type params;}) => {
type nonrec route = route(M.params);
module Navigation =
BottomTabNavigationProp({
include M;
Expand Down Expand Up @@ -55,9 +56,9 @@ module Make = (M: {type params;}) => {

type accessibilityRole = string;
type accessibilityStates = array(string);
type routeArgs = {route: route(M.params)};
type routeArgs = {route};
type renderIconArgs = {
route: route(M.params),
route,
focused: bool,
tintColor: string,
horizontal: bool,
Expand Down Expand Up @@ -98,8 +99,7 @@ module Make = (M: {type params;}) => {
~style: ReactNative.Style.t=?,
unit
) =>
bottomTabBarOptions =
"";
bottomTabBarOptions;

type tabBarLabelArgs = {
focused: bool,
Expand All @@ -123,27 +123,50 @@ module Make = (M: {type params;}) => {
~tabBarButtonComponent: React.element=?,
unit
) =>
options =
"";
options;

type optionsProps = {
navigation,
route: route(M.params),
route,
};

type optionsCallback = optionsProps => options;

type navigatorProps;
type navigatorProps = {
initialRouteName: option(string),
screenOptions: option(optionsCallback),
_lazy: option(bool),
tabBar: option(React.component(Js.t(bottomTabBarProps))),
tabBarOptions: option(bottomTabBarOptions),
};

type renderCallbackProp = {
navigation,
route,
};

type screenProps;
type screenProps('params) = {
name: string,
options: option(optionsCallback),
initialParams: option('params),
component:
option(
React.component({
.
"navigation": navigation,
"route": route,
Copy link
Member

Choose a reason for hiding this comment

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

Can this be declared as a standard record?

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't know, I copied the way it was done on the Stack 😅
https://github.com/reason-react-native/reason-react-navigation/blob/a7d40f04e6785ed0c4525ad2b5f63a287282cf7f/src/Stack.re#L127
https://github.com/reason-react-native/reason-react-navigation/blob/a7d40f04e6785ed0c4525ad2b5f63a287282cf7f/src/Stack.re#L269-L282

Copy link
Member

Choose a reason for hiding this comment

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

Ok so we could change that later in all places

}),
),
children: option(renderCallbackProp => React.element),
};

[@bs.module "@react-navigation/bottom-tabs"]
external make:
unit =>
{
.
"Navigator": navigatorProps => React.element,
"Screen": screenProps => React.element,
"Screen": screenProps(M.params) => React.element,
} =
"createBottomTabNavigator";

Expand All @@ -159,12 +182,25 @@ module Make = (M: {type params;}) => {
~component: React.component({
.
"navigation": navigation,
"route": route(M.params),
"route": route,
}),
unit
) =>
screenProps =
"";
screenProps(M.params);
let make = bottomTabs##"Screen";
};

module ScreenWithCallback = {
[@bs.obj]
external makeProps:
(
~name: string,
~options: optionsCallback=?,
~initialParams: M.params=?,
~children: renderCallbackProp => React.element,
unit
) =>
screenProps(M.params);
let make = bottomTabs##"Screen";
};

Expand All @@ -180,8 +216,7 @@ module Make = (M: {type params;}) => {
~tabBarOptions: bottomTabBarOptions=?,
unit
) =>
navigatorProps =
"";
navigatorProps;

let make = bottomTabs##"Navigator";
};
Expand Down
15 changes: 10 additions & 5 deletions src/MaterialBottomTabs.bs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,25 @@ function Make(M) {
number: number,
string: string
};
var stack = MaterialBottomTabs.createMaterialBottomTabNavigator();
var make = stack.Screen;
var materialBottomTabs = MaterialBottomTabs.createMaterialBottomTabNavigator();
var make = materialBottomTabs.Screen;
var $$Screen = {
make: make
};
var make$1 = stack.Navigator;
var $$Navigator = {
var make$1 = materialBottomTabs.Screen;
var ScreenWithCallback = {
make: make$1
};
var make$2 = materialBottomTabs.Navigator;
var $$Navigator = {
make: make$2
};
return {
Navigation: Navigation,
TabBarBadge: TabBarBadge,
stack: stack,
materialBottomTabs: materialBottomTabs,
$$Screen: $$Screen,
ScreenWithCallback: ScreenWithCallback,
$$Navigator: $$Navigator
};
}
Expand Down
67 changes: 53 additions & 14 deletions src/MaterialBottomTabs.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ module MaterialBottomTabNavigationProp = (M: {
};

module Make = (M: {type params;}) => {
type nonrec route = route(M.params);
module Navigation =
MaterialBottomTabNavigationProp({
include M;
Expand All @@ -30,7 +31,7 @@ module Make = (M: {type params;}) => {

type scene = {
.
"route": route(M.params),
"route": route,
"focused": bool,
"tintColor": string,
};
Expand Down Expand Up @@ -63,31 +64,57 @@ module Make = (M: {type params;}) => {
~tabBarTestID: string=?,
unit
) =>
options =
"";
options;

type optionsProps = {
navigation,
route: route(M.params),
route,
};

type optionsCallback = optionsProps => options;

type navigatorProps;
type navigatorProps = {
initialRouteName: option(string),
screenOptions: option(optionsCallback),
backBehavior: option(string),
shifting: option(bool),
labeled: option(bool),
activeColor: option(string),
inactiveColor: option(string),
barStyle: option(ReactNative.Style.t),
};

type renderCallbackProp = {
navigation,
route,
};

type screenProps;
type screenProps('params) = {
name: string,
options: option(optionsCallback),
initialParams: option('params),
component:
option(
React.component({
.
"navigation": navigation,
"route": route,
Copy link
Member

Choose a reason for hiding this comment

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

Same question here (not sure it's doable for some reason)

}),
),
children: option(renderCallbackProp => React.element),
};

[@bs.module "@react-navigation/material-bottom-tabs"]
external make:
unit =>
{
.
"Navigator": navigatorProps => React.element,
"Screen": screenProps => React.element,
"Screen": screenProps(M.params) => React.element,
} =
"createMaterialBottomTabNavigator";

let stack = make();
let materialBottomTabs = make();

module Screen = {
[@bs.obj]
Expand All @@ -99,9 +126,22 @@ module Make = (M: {type params;}) => {
~component: React.component({. "navigation": navigation}),
unit
) =>
screenProps =
"";
let make = stack##"Screen";
screenProps(M.params);
let make = materialBottomTabs##"Screen";
};

module ScreenWithCallback = {
[@bs.obj]
external makeProps:
(
~name: string,
~options: optionsCallback=?,
~initialParams: M.params=?,
~children: renderCallbackProp => React.element,
unit
) =>
screenProps(M.params);
let make = materialBottomTabs##"Screen";
};

module Navigator = {
Expand All @@ -126,9 +166,8 @@ module Make = (M: {type params;}) => {
//TODO: More? https://github.com/callstack/react-native-paper/blob/bd4296116d841ed355f3dbebb40cfbc3b87a79ff/src/components/BottomNavigation.tsx#L132-L196
unit
) =>
navigatorProps =
"";
navigatorProps;

let make = stack##"Navigator";
let make = materialBottomTabs##"Navigator";
};
};
15 changes: 10 additions & 5 deletions src/MaterialTopTabs.bs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,24 @@ function Make(M) {
var M$1 = { };
var include = Core$ReactNavigation.NavigationScreenProp(M$1);
var Navigation = include;
var stack = MaterialTopTabs.createMaterialTopTabNavigator();
var make = stack.Screen;
var materialTopTabs = MaterialTopTabs.createMaterialTopTabNavigator();
var make = materialTopTabs.Screen;
var $$Screen = {
make: make
};
var make$1 = stack.Navigator;
var $$Navigator = {
var make$1 = materialTopTabs.Screen;
var ScreenWithCallback = {
make: make$1
};
var make$2 = materialTopTabs.Navigator;
var $$Navigator = {
make: make$2
};
return {
Navigation: Navigation,
stack: stack,
materialTopTabs: materialTopTabs,
$$Screen: $$Screen,
ScreenWithCallback: ScreenWithCallback,
$$Navigator: $$Navigator
};
}
Expand Down
Loading