Make basic auth work in app

metro.config.js

@@ -1,7 +1,7 @@
 const path = require("path");
 
 const pathToMobile = path.resolve(__dirname, "packages", "mobile");
-
+const { getDefaultConfig } = require("metro-config");
 /**
  * Metro config must be in the root
  * of the project. Ideally, it should
@@ -10,16 +10,30 @@ const pathToMobile = path.resolve(__dirname, "packages", "mobile");
  * This issue is tracked already.
  * [link to issue](https://github.com/facebook/metro/issues/588)
  */
-module.exports = {
-  watchFolders: [path.resolve(__dirname)],
-  projectRoot: pathToMobile,
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-        assetRegistryPath: pathToMobile,
-      },
-    }),
-  },
-};
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts },
+  } = await getDefaultConfig();
+  return {
+    watchFolders: [
+      path.resolve(__dirname),
+      path.resolve(__dirname, "node_modules", "@paperpod", "frontend"),
+      path.resolve(__dirname, "node_modules", "@paperpod", "common"),
+    ],
+    projectRoot: pathToMobile,
+    resolver: {
+      // Add cjs extension so stitches will load.
+      sourceExts: [...sourceExts, "cjs"],
+    },
+    transformer: {
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: true,
+          assetRegistryPath: pathToMobile,
+        },
+      }),
+    },
+  };
+})();

package.json

@@ -19,7 +19,8 @@
     "frontend": "yarn workspace @paperpod/frontend",
     "infrastructure": "yarn workspace @paperpod/infrastructure",
     "docs": "yarn workspace @paperpod/docs",
-    "mobile": "yarn workspace @paperpod/mobile"
+    "mobile": "yarn workspace @paperpod/mobile",
+    "mobile:generate:symlinks": "metro-with-symlinks"
   },
   "resolutions": {
     "**/react": "^17.0.2",
@@ -31,9 +32,9 @@
     "react-native": "^0.64.2"
   },
   "devDependencies": {
+    "metro-with-symlinks": "^1.4.0",
     "@react-native-community/cli": "^5.0.1",
     "husky": "^5.2.0",
-    "metro-config": "^0.66.2",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "react": "^17.0.2",

packages/mobile/App.tsx

@@ -1,15 +1,37 @@
 import React from "react";
-import { SafeAreaView, ScrollView, Text, View } from "react-native";
+import {
+  SafeAreaView,
+  ScrollView,
+  View,
+  Image,
+  StyleSheet,
+} from "react-native";
+import { authentication } from "@paperpod/frontend";
+import { Login } from "./src/Login/Login";
+
+const styles = StyleSheet.create({
+  logo: {
+    width: 100,
+    height: 50,
+  },
+});
 
 const App = () => {
   return (
-    <SafeAreaView>
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
-        <View>
-          <Text>Hello updated</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <authentication.UserContextProvider>
+      <SafeAreaView>
+        <ScrollView contentInsetAdjustmentBehavior="automatic">
+          <View>
+            <Image
+              style={styles.logo}
+              //FIXME: cannot show SVG https://stackoverflow.com/questions/38830568/how-to-show-svg-file-on-react-native
+              source={{ uri: "https://paperpod.fm/logo.svg" }}
+            ></Image>
+            <Login />
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </authentication.UserContextProvider>
   );
 };
 

packages/mobile/babel.config.js

@@ -1,3 +1,8 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ["module:metro-react-native-babel-preset"],
+
+  plugins: [
+    "@babel/plugin-proposal-export-namespace-from",
+    ["@babel/plugin-transform-typescript", { allowNamespaces: true }],
+  ],
 };

packages/mobile/package.json

@@ -13,21 +13,22 @@
     "react-native": "^0.64.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
     "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "babel-jest": "^26.6.3",
-    "eslint": "7.14.0",
-    "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.64.0",
-    "react-test-renderer": "17.0.1",
     "@react-native-community/cli": "^5.0.1",
+    "@react-native-community/eslint-config": "^2.0.0",
     "@types/jest": "^26.0.23",
     "@types/react-native": "^0.64.5",
     "@types/react-test-renderer": "^16.9.2",
+    "babel-jest": "^26.6.3",
+    "eslint": "7.14.0",
     "install": "^0.13.0",
+    "jest": "^26.6.3",
     "metro-config": "^0.66.2",
+    "metro-react-native-babel-preset": "^0.64.0",
     "pod-install": "^0.1.23",
+    "react-test-renderer": "17.0.1",
     "typescript": "^3.8.3"
   },
   "resolutions": {
@@ -44,4 +45,4 @@
       "node"
     ]
   }
-}
+}

packages/mobile/src/Login/Login.tsx

@@ -0,0 +1,52 @@
+import React, { useContext } from "react";
+import { authentication } from "@paperpod/frontend";
+
+import { Button, TextInput, View, StyleSheet, Text } from "react-native";
+
+const styles = StyleSheet.create({
+  input: {
+    color: "#000",
+    paddingRight: 5,
+    paddingLeft: 5,
+    fontSize: 18,
+    lineHeight: 23,
+    flex: 2,
+  },
+});
+
+export const Login = () => {
+  const { user } = React.useContext(authentication.UserContext);
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  console.log("user", user);
+
+  return (
+    <View>
+      <TextInput
+        value={email}
+        placeholder="email"
+        textContentType="emailAddress"
+        onChangeText={setEmail}
+        style={styles.input}
+      />
+      <TextInput
+        value={password}
+        placeholder="password"
+        textContentType="password"
+        onChangeText={setPassword}
+        style={styles.input}
+      ></TextInput>
+
+      <Text>
+        {email} - {password}
+      </Text>
+      <Button
+        title={"Log in"}
+        onPress={() => {
+          console.log("Clicked");
+        }}
+      ></Button>
+    </View>
+  );
+};

rn-cli.config.js

@@ -0,0 +1,32 @@
+const path = require("path");
+
+const extraNodeModules = {};
+const blacklistRegexes = [];
+const watchFolders = [];
+/**
+ * NOTE: SHOULD THIS BE METRO CONFIG?
+ * https://github.com/MrLoh/metro-with-symlinks/issues/21
+ */
+
+const metroVersion = require("metro/package.json").version;
+const metroVersionComponents = metroVersion.match(/^(\d+)\.(\d+)\.(\d+)/);
+if (
+  metroVersionComponents[1] === "0" &&
+  parseInt(metroVersionComponents[2], 10) >= 43
+) {
+  module.exports = {
+    resolver: {
+      extraNodeModules,
+      blacklistRE: require("metro-config/src/defaults/blacklist")(
+        blacklistRegexes
+      ),
+    },
+    watchFolders,
+  };
+} else {
+  module.exports = {
+    extraNodeModules,
+    getBlacklistRE: () => require("metro/src/blacklist")(blacklistRegexes),
+    getProjectRoots: () => [path.resolve(__dirname)].concat(watchFolders),
+  };
+}