react-native-template-reason: Update using reason-react-native (#481)

* use monorepo post script + rewrite App.re

* post review fixes

* fix platform matching

* fix template wording

Author: dawee

react-native-template-reason/README.md

@@ -7,6 +7,14 @@ experience.
 
 ## Setup
 
+### Command line
+
+Install bs-platform with the following command:
+
+```sh
+yarn add -D bs-platform
+```
+
 ### IDE
 
 To get the best development experience possible, we recommend you to use

react-native-template-reason/bsconfig.json

@@ -2,7 +2,7 @@
   "name": "my-reason-react-native-app",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "package-specs": {
     "module": "es6",
@@ -15,5 +15,8 @@
       "subdirs": true
     }
   ],
-  "bs-dependencies": ["bs-react-native", "reason-react"]
-}
+  "bs-dependencies": [
+    "reason-react",
+    "reason-react-native"
+  ]
+}

react-native-template-reason/dependencies.json

@@ -1,5 +1,4 @@
 {
-  "bs-platform": "^5.0.1",
   "reason-react": "^0.7.0",
-  "bs-react-native": "^0.11.0"
-}
+  "reason-react-native": "../reason-react-native"
+}

react-native-template-reason/src/App.bs.js

@@ -4,55 +4,50 @@
  *
  * Converted from https://github.com/facebook/react-native/blob/d752446b23e0a12171ca0c01d20f5be625f40455/template/App.js
  */
-open BsReactNative;
+open ReactNative;
 
 let instructions =
-  switch (Platform.os()) {
-  | IOS(_) => "Press Cmd+R to reload,\n" ++ "Cmd+D or shake for dev menu"
-  | Android =>
+  switch (Platform.os) {
+  | os when os == Platform.ios =>
+    "Press Cmd+R to reload,\n" ++ "Cmd+D or shake for dev menu"
+  | os when os == Platform.android =>
     "Double tap R on your keyboard to reload,\n"
     ++ "Shake or press menu button for dev menu"
-  | exception (Platform.UnknownPlatform(p)) when p == "web" => "Press Cmd+R to reload."
-  | exception (Platform.UnknownPlatform(_p)) => ""
+  | os when os == Platform.web => "Press Cmd+R to reload."
+  | _ => ""
   };
 
 let styles =
   Style.(
     StyleSheet.create({
       "container":
-        style([
-          flex(1.),
-          justifyContent(Center),
-          alignItems(Center),
-          backgroundColor(String("#F5FCFF")),
-        ]),
+        style(
+          ~flex=1.,
+          ~justifyContent=`center,
+          ~alignItems=`center,
+          ~backgroundColor="#F5FCFF",
+          (),
+        ),
       "welcome":
-        style([
-          fontSize(Float(20.)),
-          textAlign(Center),
-          margin(Pt(10.)),
-        ]),
+        style(~fontSize=20., ~textAlign=`center, ~margin=pt(10.), ()),
       "instructions":
-        style([
-          textAlign(Center),
-          color(String("#333333")),
-          marginBottom(Pt(5.)),
-        ]),
+        style(
+          ~textAlign=`center,
+          ~color="#333333",
+          ~marginBottom=pt(5.),
+          (),
+        ),
     })
   );
 
+[@react.component]
 let app = () =>
-  <View
-    style={
-      styles##container;
-    }>
-    <Text style={styles##welcome}>
-      "Welcome to (Bs) React Native!"->ReasonReact.string
+  <View style=styles##container>
+    <Text style=styles##welcome>
+      "Welcome to (Reason) React Native!"->React.string
     </Text>
-    <Text style={styles##instructions}>
-      "To get started, edit src/App.re"->ReasonReact.string
-    </Text>
-    <Text style={styles##instructions}>
-      instructions->ReasonReact.string
+    <Text style=styles##instructions>
+      "To get started, edit src/App.re"->React.string
     </Text>
+    <Text style=styles##instructions> instructions->React.string </Text>
   </View>;