Upgrade "bs-platform": "^7.0.0"

Author: MoOx

README.md

@@ -18,11 +18,6 @@ X.y._
 ⚠️ Work in progress. These bindings are used successfully in several apps, but
 are not complete yet and still subject to change.
 
-## Example
-
-An example project is available at
-[`navigation-example`](https://github.com/reason-react-native/reason-react-navigation-example).
-
 ## Installation
 
 When
@@ -54,81 +49,7 @@ yarn add reason-react-navigation
 
 ## Example
 
-A screen component with dynamic navigation options (Screen1.re):
-
-```reason
-open ReactNative;
-open ReactNavigation;
-
-[@react.component]
-let make = (~navigation, ~screenProps) => {
-  <Text> {React.string("Hello world!")} </Text>;
-};
-
-make->NavigationOptions.setDynamicNavigationOptions(params => {
-  let navigation = params##navigation;
-  let navigationOptions = params##navigationOptions;
-  let screenProps = params##screenProps;
-
-  /* More properties can be set dynamically based on navigation, navigationOptions or screenProps. */
-  NavigationOptions.t(~title="Screen 1", ~headerTintColor="red", ());
-});
-```
-
-A stack navigator containing this screen (MyStackNavigator.re):
-
-```reason
-open ReactNavigation;
-
-let routes = {
-  "Screen1": Screen1.make,
-  "Screen2": Screen2.make,
-  "Screen3": Screen3.make,
-};
-
-let navigator = StackNavigator.make(routes);
-
-navigator->NavigationOptions.setNavigationOptions(
-  NavigationOptions.t(~gesturesEnabled=false, ()),
-);
-```
-
-The main React component of the app (App.re):
-
-```reason
-open ReactNavigation;
-
-module MyAppContainer =
-  AppContainer.Make({
-    type screenProps = {. "someProp": int};
-    let navigator = MyStackNavigator.navigator;
-  });
-
-[@react.component]
-let make = () => {
-  let screenProps = {"someProp": 42};
-
-  <MyAppContainer screenProps />;
-};
-```
-
-Alternatively (without a functor, but using `React.createElement`):
-
-```reason
-open ReactNavigation;
-
-let appContainer = AppContainer.makeAppContainer(MyStackNavigator.navigator);
-
-[@react.component]
-let make = () => {
-  let screenProps = {"someProp": 42};
-
-  React.createElement(
-    appContainer,
-    AppContainer.makeProps(~screenProps, ()),
-  );
-};
-```
+See <./src/Example.re>
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reason-react-navigation",
-  "version": "4.0.0-alpha.0",
+  "version": "5.0.0-alpha.0",
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0",
     "reason-react": "^0.7.0",
@@ -37,7 +37,7 @@
     "test": "yarn re:clean-build"
   },
   "devDependencies": {
-    "bs-platform": "^5.2.0",
+    "bs-platform": "^7.0.0",
     "husky": "^1.3.0",
     "lint-staged": "^8.1.0",
     "prettier": "^1.18.0",

src/BottomTabs.bs.js

@@ -3,23 +3,12 @@
 var Core$ReactNavigation = require("./Core.bs.js");
 var BottomTabs = require("@react-navigation/bottom-tabs");
 
-function BottomTabNavigationProp(M) {
-  var include = Core$ReactNavigation.NavigationScreenProp(M);
-  return {
-          navigateByKey: include.navigateByKey,
-          navigateByName: include.navigateByName
-        };
-}
+var BottomTabNavigationProp = Core$ReactNavigation.NavigationScreenProp;
 
 function Make(M) {
   var M$1 = { };
   var include = Core$ReactNavigation.NavigationScreenProp(M$1);
-  var Navigation_navigateByKey = include.navigateByKey;
-  var Navigation_navigateByName = include.navigateByName;
-  var Navigation = {
-    navigateByKey: Navigation_navigateByKey,
-    navigateByName: Navigation_navigateByName
-  };
+  var Navigation = include;
   var bottomTabs = BottomTabs.createBottomTabNavigator();
   var make = bottomTabs.Screen;
   var $$Screen = {
@@ -32,8 +21,8 @@ function Make(M) {
   return {
           Navigation: Navigation,
           bottomTabs: bottomTabs,
-          Screen: $$Screen,
-          Navigator: $$Navigator
+          $$Screen: $$Screen,
+          $$Navigator: $$Navigator
         };
 }
 

src/BottomTabs.re

@@ -25,12 +25,13 @@ module Make = (M: {type params;}) => {
   type animatedNode = ReactNative.Animated.Value.t;
 
   type scene = {
-    .
-    "index": int,
-    "focused": bool,
-    "tintColor": string,
+    index: int,
+    focused: bool,
+    tintColor: string,
   };
 
+  type labelPositionArgs = {deviceOrientation: string};
+
   class type virtual baseBottomTabBarOptions = {
     pub keyboardHidesTabBar: option(bool);
     pub activeBackgroundColor: option(string);
@@ -40,7 +41,7 @@ module Make = (M: {type params;}) => {
     pub showIcon: option(bool);
     pub labelStyle: option(ReactNative.Style.t);
     pub tabStyle: option(ReactNative.Style.t);
-    pub labelPosition: option({. "deviceOrientation": string} => string);
+    pub labelPosition: option(labelPositionArgs => string);
     pub adaptive: option(bool);
     pub style: option(ReactNative.Style.t);
   };
@@ -54,32 +55,27 @@ module Make = (M: {type params;}) => {
 
   type accessibilityRole = string;
   type accessibilityStates = array(string);
+  type routeArgs = {route: route(M.params)};
+  type renderIconArgs = {
+    route: route(M.params),
+    focused: bool,
+    tintColor: string,
+    horizontal: bool,
+  };
   class type virtual bottomTabBarProps = {
     as 'self;
     constraint 'self = #baseBottomTabBarOptions;
     pub state: navigationState(M.params);
     pub navigation: navigation;
-    pub onTabPress: {. "route": route(M.params)} => unit;
-    pub onTabLongPress: {. "route": route(M.params)} => unit;
-    pub getAccessibilityLabel:
-      {. "route": route(M.params)} => Js.nullable(string);
-    pub getAccessibilityRole:
-      {. "route": route(M.params)} => Js.nullable(accessibilityRole);
-    pub getAccessibilityStates:
-      {. "route": route(M.params)} => Js.nullable(accessibilityStates);
-    pub getButtonComponent:
-      {. "route": route(M.params)} => Js.nullable(React.element);
-    //pub getLabelText: {. "route": route(M.params)} => ...;
-    pub getTestID: {. "route": route(M.params)} => Js.nullable(string);
-    pub renderIcon:
-      {
-        .
-        "route": route(M.params),
-        "focused": bool,
-        "tintColor": string,
-        "horizontal": bool,
-      } =>
-      React.element;
+    pub onTabPress: routeArgs => unit;
+    pub onTabLongPress: routeArgs => unit;
+    pub getAccessibilityLabel: routeArgs => Js.nullable(string);
+    pub getAccessibilityRole: routeArgs => Js.nullable(accessibilityRole);
+    pub getAccessibilityStates: routeArgs => Js.nullable(accessibilityStates);
+    pub getButtonComponent: routeArgs => Js.nullable(React.element);
+    //pub getLabelText: routeArgs => ...;
+    pub getTestID: routeArgs => Js.nullable(string);
+    pub renderIcon: renderIconArgs => React.element;
     pub activeTintColor: string;
     pub inactiveTintColor: string;
   };
@@ -97,34 +93,30 @@ module Make = (M: {type params;}) => {
       ~showIcon: bool=?,
       ~labelStyle: ReactNative.Style.t=?,
       ~tabStyle: ReactNative.Style.t=?,
-      ~labelPosition: {. "deviceOrientation": string} => string=?,
+      ~labelPosition: labelPositionArgs => string=?,
       ~adaptive: bool=?,
       ~style: ReactNative.Style.t=?,
       unit
     ) =>
     bottomTabBarOptions =
     "";
 
+  type tabBarLabelArgs = {
+    focused: bool,
+    color: string,
+  };
+  type tabBarIconArgs = {
+    focused: bool,
+    color: string,
+    size: float,
+  };
   [@bs.obj]
   external options:
     (
       ~title: string=?,
       //TODO: dynamic, missing static option: React.ReactNode
-      ~tabBarLabel: {
-                      .
-                      "focused": bool,
-                      "color": string,
-                    } =>
-                    React.element
-                      =?,
-      ~tabBarIcon: {
-                     .
-                     "focused": bool,
-                     "color": string,
-                     "size": float,
-                   } =>
-                   React.element
-                     =?,
+      ~tabBarLabel: tabBarLabelArgs => React.element=?,
+      ~tabBarIcon: tabBarIconArgs => React.element=?,
       ~tabBarAccessibilityLabel: string=?,
       ~tabBarTestID: string=?,
       ~tabBarVisible: bool=?,
@@ -134,13 +126,12 @@ module Make = (M: {type params;}) => {
     options =
     "";
 
-  type optionsProps =
-    {
-      .
-      "navigation": navigation,
-      "route": route(M.params),
-    } =>
-    options;
+  type optionsProps = {
+    navigation,
+    route: route(M.params),
+  };
+
+  type optionsCallback = optionsProps => options;
 
   type navigatorProps;
 
@@ -163,7 +154,7 @@ module Make = (M: {type params;}) => {
     external makeProps:
       (
         ~name: string,
-        ~options: optionsProps=?,
+        ~options: optionsCallback=?,
         ~initialParams: M.params=?,
         ~component: React.component({. "navigation": navigation}),
         unit
@@ -178,7 +169,7 @@ module Make = (M: {type params;}) => {
     external makeProps:
       (
         ~initialRouteName: string=?,
-        ~screenOptions: optionsProps=?,
+        ~screenOptions: optionsCallback=?,
         ~children: React.element,
         ~_lazy: bool=?,
         ~tabBarComponent: React.component(Js.t(bottomTabBarProps))=?,

src/Core.bs.js

@@ -3,7 +3,7 @@
 var Caml_option = require("bs-platform/lib/js/caml_option.js");
 
 function NavigationHelpersCommon(M) {
-  var navigateByKey = function (key, params, unit) {
+  var navigateByKey = function (key, params, param) {
     var tmp = {
       key: key
     };
@@ -13,7 +13,7 @@ function NavigationHelpersCommon(M) {
     tmp.navigate();
     return /* () */0;
   };
-  var navigateByName = function (name, key, params, unit) {
+  var navigateByName = function (name, key, params, param) {
     var tmp = {
       name: name
     };
@@ -37,7 +37,7 @@ function EventConsumer(M) {
 }
 
 function NavigationScreenProp(M) {
-  var navigateByKey = function (key, params, unit) {
+  var navigateByKey = function (key, params, param) {
     var tmp = {
       key: key
     };
@@ -47,7 +47,7 @@ function NavigationScreenProp(M) {
     tmp.navigate();
     return /* () */0;
   };
-  var navigateByName = function (name, key, params, unit) {
+  var navigateByName = function (name, key, params, param) {
     var tmp = {
       name: name
     };