Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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.

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
MoOx merged 1 commit into rescript-react-native:master from Freddy03h:screencallback-tabs
Jul 8, 2020
Merged
Show file tree
Hide file tree
Changes from all 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
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 make1ドル = bottomTabs.Navigator;
var $$Navigator = {
var make1ドル = bottomTabs.Screen;
var ScreenWithCallback = {
make: make1ドル
};
var make2ドル = bottomTabs.Navigator;
var $$Navigator = {
make: make2ドル
};
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

@Freddy03h Freddy03h Jul 8, 2020

Choose a reason for hiding this comment

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

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

Freddy03h reacted with thumbs up emoji
}),
),
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 make1ドル = stack.Navigator;
var $$Navigator = {
var make1ドル = materialBottomTabs.Screen;
var ScreenWithCallback = {
make: make1ドル
};
var make2ドル = materialBottomTabs.Navigator;
var $$Navigator = {
make: make2ドル
};
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 M1ドル = { };
var include = Core$ReactNavigation.NavigationScreenProp(M1ドル);
var Navigation = include;
var stack = MaterialTopTabs.createMaterialTopTabNavigator();
var make = stack.Screen;
var materialTopTabs = MaterialTopTabs.createMaterialTopTabNavigator();
var make = materialTopTabs.Screen;
var $$Screen = {
make: make
};
var make1ドル = stack.Navigator;
var $$Navigator = {
var make1ドル = materialTopTabs.Screen;
var ScreenWithCallback = {
make: make1ドル
};
var make2ドル = materialTopTabs.Navigator;
var $$Navigator = {
make: make2ドル
};
return {
Navigation: Navigation,
stack: stack,
materialTopTabs: materialTopTabs,
$$Screen: $$Screen,
ScreenWithCallback: ScreenWithCallback,
$$Navigator: $$Navigator
};
}
Expand Down
Loading

AltStyle によって変換されたページ (->オリジナル) /