Upgrade Expo with react native web support

.storybook/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["module:metro-react-native-babel-preset"],
+    plugins: ["react-native-web"],
+  };
+};

.storybook/config.js

@@ -0,0 +1,40 @@
+import { Platform } from "react-native";
+
+const isWeb = Platform.OS === "web";
+
+import { getStorybookUI } from "@storybook/react-native";
+
+const { configure } = isWeb
+  ? require("@storybook/react")
+  : require("@storybook/react-native");
+
+import React from "react";
+import { NativeModules } from "react-native";
+import url from "url";
+
+import { loadStories } from "./storyLoader";
+
+configure(loadStories, module);
+
+const { hostname } = isWeb
+  ? { hostname: "localhost" }
+  : url.parse(NativeModules.SourceCode.scriptURL);
+
+const StorybookUIRoot = getStorybookUI({
+  port: 7007,
+  host: hostname,
+  isUIHidden: true,
+  asyncStorage: require("react-native").AsyncStorage || null,
+  shouldDisableKeyboardAvoidingView: true,
+});
+
+// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
+// https://github.com/storybooks/storybook/issues/2081
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends React.Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
+
+export default StorybookUIHMRRoot;

.storybook/fixtures.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { buildClientSchema, printSchema } from "graphql";
+import apolloStorybookDecorator from "apollo-storybook-react";
+import faker from "faker";
+import { MockList } from "graphql-tools";
+import { NavigationContainer } from "@react-navigation/native";
+const graphqlIntrospectionSchema = require("../graphql_schema.json");
+
+const graphqlSchemaObj = buildClientSchema(graphqlIntrospectionSchema.data);
+export const typeDefs = printSchema(graphqlSchemaObj);
+
+const featured = "https://source.unsplash.com/featured";
+
+const featuredWithOptions = (width, q = 80, fm = "jpg", fit = "max") =>
+  `${featured}?w=${width}&q=${q}&fm=${fm}&fit=${fit}}`;
+
+const baseMocks = {
+  Query: () => ({
+    photos: () => new MockList(18),
+  }),
+  Photo: () => ({
+    id: () => faker.random.uuid(),
+    likes: () => faker.random.number(400),
+    description: () => faker.lorem.paragraphs(5),
+  }),
+  PhotoLocation: () => ({
+    city: () => faker.address.city(),
+    country: () => faker.address.country(),
+  }),
+  PhotoUrls: (args) => ({
+    raw: () => featured,
+    full: () => `${featured}?q=80&fm=jpg`,
+    regular: () => featuredWithOptions(1080),
+    small: () => featured + `/?${"plants," + args.id()}`,
+    thumb: () => featuredWithOptions(200),
+  }),
+  User: () => ({
+    name: faker.internet.userName(),
+    username: faker.internet.userName(),
+    bio: faker.lorem.lines(5),
+    total_photos: faker.random.number(100),
+    followers_count: faker.random.number(300),
+    following_count: faker.random.number(300),
+    portfolio_url: faker.internet.url(),
+  }),
+  UserProfileImage: () => ({
+    small: () => featuredWithOptions(400),
+  }),
+};
+
+export const navigationDecorator = (storyFn) => (
+  <NavigationContainer>{storyFn()}</NavigationContainer>
+);
+
+export const apolloMocks = (mocks = {}) =>
+  apolloStorybookDecorator({
+    typeDefs,
+    mocks: { ...baseMocks, ...mocks },
+    resolverValidationOptions: {
+      requireResolversForResolveType: false,
+    },
+  });

.storybook/presets.js

@@ -0,0 +1,25 @@
+const path = require("path");
+
+module.exports = [
+  {
+    name: "@storybook/preset-typescript",
+    options: {
+      transpileManager: true,
+      tsLoaderOptions: {
+        configFile: path.resolve(__dirname, "../tsconfig.json"),
+      },
+      tsDocgenLoaderOptions: {
+        tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
+      },
+      include: [path.resolve(__dirname, "../src")],
+    },
+  },
+  {
+    name: "@storybook/addon-docs/react/preset",
+    options: {
+      configureJSX: true,
+      babelOptions: {},
+      sourceLoaderOptions: null,
+    },
+  },
+];

storybook/storyLoader.js → .storybook/storyLoader.js

@@ -4,17 +4,15 @@
 // https://github.com/elderfo/react-native-storybook-loader.git
 
 function loadStories() {
-	require('./stories/App/index');
-	require('./stories/Post/index');
-	require('./stories/Posts/index');
-	require('./stories/Profile/index');
+	require('../src/App.stories');
+	require('../src/Post/Post.stories');
+	require('../src/Profile/Profile.stories');
 }
 
 const stories = [
-	'./stories/App/index',
-	'./stories/Post/index',
-	'./stories/Posts/index',
-	'./stories/Profile/index'
+	'../src/App.stories',
+	'../src/Post/Post.stories',
+	'../src/Profile/Profile.stories'
 ];
 
 module.exports = {

.storybook/storyLoader.web.js

@@ -0,0 +1 @@
+export const loadStories = require.context("../src", true, /\.stories\.tsx$/);

.storybook/webpack.config.js

@@ -0,0 +1,56 @@
+const { resolve } = require("path");
+const { withUnimodules } = require("@expo/webpack-config/addons");
+
+module.exports = async ({ config }) => {
+  // config.module.rules.push({
+  //   test: /\.(ts|tsx)$/,
+  //   loader: require.resolve("babel-loader"),
+  //   options: {
+  //     presets: [["react-app", { flow: false, typescript: true }]],
+  //   },
+  // });
+  // config.resolve.extensions.push(".ts", ".tsx");
+
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve("babel-loader"),
+        options: {
+          presets: [["react-app", { flow: false, typescript: true }]],
+        },
+      },
+      {
+        loader: require.resolve("react-docgen-typescript-loader"),
+      },
+    ],
+  });
+
+  // config.module.rules.push({
+  //   test: /\.(ts|tsx)$/,
+  //   use: [
+  //     {
+  //       loader: require.resolve("ts-loader"),
+  //       options: {
+  //         configFile: "../tsconfig.json",
+  //         // transpileOnly: true,
+  //         // experimentalWatchApi: true,
+  //         // experimentalFileCaching: true,
+  //         // happyPackMode: true,
+  //       },
+  //     },
+  //     // Optional
+
+  //   ],
+  // });
+  config.resolve.extensions.push(".ts", ".tsx");
+  // return config;
+  const custom = withUnimodules(config, {
+    projectRoot: resolve(__dirname, "../"),
+  });
+
+  return {
+    ...config,
+    module: { ...config.module, rules: custom.module.rules },
+  };
+};

App.js

@@ -1,6 +1,11 @@
+import { Platform } from "react-native";
+
+const isWeb = Platform.OS === "web";
+
 //If we're running Expo in Development mode we use Storybook entry, otherwise App.
-const App = __DEV__
-    ? require('./storybook').default
-    : require('./src/App.bs').default
+const App =
+  !isWeb && __DEV__
+    ? require("./.storybook/config").default
+    : require("./src/App.bs").default;
 
-export default App
+export default App;

app.json

@@ -4,11 +4,8 @@
     "description": "A basic ReasonExpo app.",
     "slug": "InstaClone",
     "privacy": "public",
-    "sdkVersion": "35.0.0",
-    "platforms": [
-      "ios",
-      "android"
-    ],
+    "platforms": ["ios", "android", "web"],
+    "sdkVersion": "37.0.0",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -20,9 +17,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     }

package.json

@@ -2,6 +2,7 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
+    "dev": "run-p start storybook",
     "server": "cp .env node_modules/unsplash-graphql && pushd ./node_modules/unsplash-graphql && yarn --frozen-lockfile && npx [email protected] dev && popd",
     "android": "expo start --android",
     "ios": "expo start --ios",
@@ -13,60 +14,74 @@
     "prestart": "rnstl",
     "patch": "patch-package",
     "postinstall": "run-s patch build",
+    "storybook": "start-storybook -p 7007",
     "devtools": "react-devtools"
   },
   "config": {
     "react-native-storybook-loader": {
       "searchDir": [
-        "./storybook/stories"
+        "./src"
       ],
-      "pattern": "**/index.js",
-      "outputFile": "./storybook/storyLoader.js"
+      "pattern": "**/*.stories.tsx",
+      "outputFile": "./.storybook/storyLoader.js"
     }
   },
   "dependencies": {
     "@baransu/graphql_ppx_re": "0.7.1",
-    "@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",
+    "@react-native-community/masked-view": "0.1.6",
+    "@react-navigation/core": "^5.3.3",
+    "@react-navigation/native": "^5.1.5",
+    "@react-navigation/stack": "^5.2.10",
     "@reason-react-native/navigation": "cem2ran/reason-react-navigation#259ba467c0bf1acac0bd4036755175e398ffda12",
     "apollo-boost": "^0.4.4",
     "bs-fetch": "^0.5.0",
     "bs-platform": "7.2.2",
-    "expo": "^35.0.0",
-    "expo-linear-gradient": "~7.0.0",
+    "core-js": "2.6.5",
+    "expo": "^37.0.0",
+    "expo-linear-gradient": "~8.1.0",
     "graphql": "^14.5.3",
     "graphql-tag": "^2.10.1",
     "graphql-tools": "^4.0.5",
-    "react": "16.8.3",
+    "react": "16.9.0",
     "react-apollo": "^3.1.0",
-    "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-dom": "16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.6.0",
+    "react-native-reanimated": "~1.7.0",
+    "react-native-safe-area-context": "0.7.3",
     "react-native-safe-area-view": "^1.0.0",
-    "react-native-screens": "~1.0.0-alpha.23",
+    "react-native-screens": "~2.2.0",
+    "react-native-web": "^0.12.2",
     "reason-apollo": "0.17.0",
     "reason-apollo-hooks": "2.5.1",
     "reason-expo": "^34.0.0",
     "reason-react": "^0.7.0",
     "reason-react-native": "reason-react-native/reason-react-native#0127d40f58600cd3aa21fbd06b52deeab03d76ce"
   },
   "devDependencies": {
-    "@storybook/react-native": "4.2.0-alpha.7",
+    "@babel/core": "^7.9.0",
+    "@expo/webpack-config": "^0.11.21",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "5.3.18",
+    "@storybook/react-native": "5.3.18",
     "@types/faker": "^4.1.6",
     "apollo-storybook-react": "^0.2.2",
-    "babel-preset-expo": "^7.0.0",
-    "expo-cli": "^3.4.1",
+    "babel-loader": "^8.0.6",
+    "babel-preset-expo": "^8.1.0",
+    "babel-preset-react-app": "^9.1.2",
+    "expo-cli": "^3.17.24",
     "faker": "^4.1.0",
     "gentype": "^3.21.0",
     "now": "^16.3.1",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.2.0",
     "postinstall-postinstall": "^2.0.0",
+    "react-docgen-typescript-loader": "^3.7.2",
     "react-native-storybook-loader": "^1.8.1",
-    "typescript": "^3.6.4",
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.8.3",
     "unsplash-graphql": "https://github.com/cem2ran/unsplash-graphql#a6458526dc451eaccd7b9fb4eb14cb4097c0148c"
   },
   "private": true