chore: Initial setup with Reason & Navigation

.gitattributes

@@ -0,0 +1,2 @@
+*.re linguist-language=OCaml
+*.rei linguist-language=OCaml

.gitignore

@@ -0,0 +1,12 @@
+node_modules/**/*
+.expo/
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision
+**/**/*.bs.js
+.bsb.lock
+lib
+.merlin
+.DS_STORE

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.formatOnSave": true,
+    "reason_language_server.per_value_codelens": true,
+    "reason_language_server.opens_codelens": true
+}

App.js

@@ -0,0 +1 @@
+export { app as default } from "./src/App.bs.js";

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "InstaClone",
+    "description": "A basic ReasonExpo app.",
+    "slug": "InstaClone",
+    "privacy": "public",
+    "sdkVersion": "35.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

bsconfig.json

@@ -0,0 +1,27 @@
+{
+  "name": "InstaClone",
+  "reason": {
+    "react-jsx": 3
+  },
+  "bsc-flags": [
+    "-bs-super-errors"
+  ],
+  "bs-dependencies": [
+    "reason-react",
+    "reason-react-native",
+    "reason-expo",
+    "@reason-react-native/navigation"
+  ],
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    }
+  ],
+  "suffix": ".bs.js",
+  "refmt": 3,
+  "package-specs": {
+    "module": "es6",
+    "in-source": true
+  }
+}

package.json

@@ -0,0 +1,37 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "clean": "bsb -clean-world",
+    "eject": "expo eject",
+    "build": "bsb -make-world -clean-world",
+    "watch": "bsb -make-world -clean-world -w"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.1",
+    "@react-navigation/core": "^5.0.0-alpha.16",
+    "@react-navigation/native": "^5.0.0-alpha.12",
+    "@react-navigation/stack": "^5.0.0-alpha.27",
+    "@reason-react-native/navigation": "cem2ran/reason-react-navigation#4878f56bf8c411fd09cc295e5a9dfccf64ec5f0e",
+    "bs-platform": "5.2.0",
+    "expo": "^35.0.0",
+    "expo-linear-gradient": "~7.0.0",
+    "react": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.3.0",
+    "react-native-reanimated": "~1.2.0",
+    "react-native-safe-area-context": "~0.3.6",
+    "react-native-safe-area-view": "^1.0.0",
+    "react-native-screens": "~1.0.0-alpha.23",
+    "reason-expo": "^34.0.0",
+    "reason-react": "^0.7.0",
+    "reason-react-native": "^0.60.0"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^7.0.0",
+    "expo-cli": "^3.4.1"
+  },
+  "private": true
+}

src/App.re

@@ -0,0 +1,24 @@
+open ReactNative;
+open ReactNavigation;
+
+let styles =
+  Style.(
+    StyleSheet.create({
+      "container":
+        style(
+          ~flex=1.,
+          ~justifyContent=`center,
+          ~alignItems=`center,
+          ~backgroundColor="#F5FCFF",
+          (),
+        ),
+      "instructions": style(~textAlign=`center, ~color="#ffffff", ()),
+    })
+  );
+
+[@react.component]
+let app = () => {
+  <Native.NavigationNativeContainer>
+    <Profile />
+  </Native.NavigationNativeContainer>;
+};

src/Post/Post.re

@@ -0,0 +1,6 @@
+open ReactNative;
+[@react.component]
+let make = (~navigation) =>
+  <Background centered=true>
+    <Text> {j|Post content|j}->React.string </Text>
+  </Background>;

src/Profile/Profile.re

@@ -0,0 +1,60 @@
+open ReactNative;
+open ReactNavigation;
+
+include Stack.Make({
+  type params = unit;
+});
+
+module HomeScreen = {
+  [@react.component]
+  let make = (~navigation) =>
+    <Background centered=true>
+      <Button
+        title="Open Post"
+        onPress={_ => navigation->Navigation.navigate("Post")}
+      />
+    </Background>;
+};
+
+module Ionicons = {
+  [@bs.module "@expo/vector-icons"] [@react.component]
+  external make: (~name: string, ~size: int, ~color: string) => React.element =
+    "Ionicons";
+};
+
+[@react.component]
+let make = () => {
+  <Navigator>
+    <Screen
+      name="Profile"
+      component=HomeScreen.make
+      options={_props =>
+        options(~headerStyle=Style.style(~backgroundColor="#fafafa", ()), ())
+      }
+    />
+    <Screen
+      name="Post"
+      component=Post.make
+      options={props =>
+        options(
+          ~headerLeft=
+            _ =>
+              <TouchableOpacity
+                style=Style.(
+                  style(
+                    ~width=32.->dp,
+                    ~height=32.->dp,
+                    ~alignItems=`center,
+                    ~justifyContent=`center,
+                    (),
+                  )
+                )
+                onPress={_ => props##navigation->Navigation.goBack()}>
+                <Ionicons name="ios-arrow-back" size=24 color="grey" />
+              </TouchableOpacity>,
+          (),
+        )
+      }
+    />
+  </Navigator>;
+};

src/components/Background.re

@@ -0,0 +1,18 @@
+open ReactNative;
+open Style;
+include View;
+
+let makeProps = (~centered=false, ~style as additionalStyle=Style.style()) =>
+  makeProps(
+    ~style=
+      list([
+        style(
+          ~backgroundColor="#fff",
+          ~flex=1.,
+          ~justifyContent=centered ? `center : `flexStart,
+          ~alignItems=centered ? `center : `flexStart,
+          (),
+        ),
+        additionalStyle,
+      ]),
+  );