14 files changed, 155 insertions, 0 deletions

diff --git a/examples/with-react-native-web/apps/native/.expo-shared/assets.json b/examples/with-react-native-web/apps/native/.expo-shared/assets.json
new file mode 100644
index 0000000..1e6decf
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/.expo-shared/assets.json
@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}
diff --git a/examples/with-react-native-web/apps/native/.gitignore b/examples/with-react-native-web/apps/native/.gitignore
new file mode 100644
index 0000000..ec8a36a
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/.gitignore
@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
diff --git a/examples/with-react-native-web/apps/native/App.tsx b/examples/with-react-native-web/apps/native/App.tsx
new file mode 100644
index 0000000..e6fbd5b
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/App.tsx
@@ -0,0 +1,33 @@
+import { StyleSheet, Text, View } from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { Button } from "ui";
+
+export default function Native() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Native</Text>
+      <Button
+        onClick={() => {
+          console.log("Pressed!");
+          alert("Pressed!");
+        }}
+        text="Boop"
+      />
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  header: {
+    fontWeight: "bold",
+    marginBottom: 20,
+    fontSize: 36,
+  },
+});
diff --git a/examples/with-react-native-web/apps/native/README.md b/examples/with-react-native-web/apps/native/README.md
new file mode 100644
index 0000000..be1fea0
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/README.md
@@ -0,0 +1,3 @@
+# Native
+
+A [react-native](https://reactnative.dev/) app built using [expo](https://docs.expo.dev/)
diff --git a/examples/with-react-native-web/apps/native/app.json b/examples/with-react-native-web/apps/native/app.json
new file mode 100644
index 0000000..9262f58
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/app.json
@@ -0,0 +1,31 @@
+{
+  "expo": {
+    "name": "native",
+    "slug": "native",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}
diff --git a/examples/with-react-native-web/apps/native/assets/adaptive-icon.png b/examples/with-react-native-web/apps/native/assets/adaptive-icon.png
new file mode 100644
index 0000000..03d6f6b
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/assets/adaptive-icon.png
diff --git a/examples/with-react-native-web/apps/native/assets/favicon.png b/examples/with-react-native-web/apps/native/assets/favicon.png
new file mode 100644
index 0000000..e75f697
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/assets/favicon.png
diff --git a/examples/with-react-native-web/apps/native/assets/icon.png b/examples/with-react-native-web/apps/native/assets/icon.png
new file mode 100644
index 0000000..a0b1526
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/assets/icon.png
diff --git a/examples/with-react-native-web/apps/native/assets/splash.png b/examples/with-react-native-web/apps/native/assets/splash.png
new file mode 100644
index 0000000..0e89705
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/assets/splash.png
diff --git a/examples/with-react-native-web/apps/native/babel.config.js b/examples/with-react-native-web/apps/native/babel.config.js
new file mode 100644
index 0000000..73ebf58
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};
diff --git a/examples/with-react-native-web/apps/native/index.js b/examples/with-react-native-web/apps/native/index.js
new file mode 100644
index 0000000..828b356
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/index.js
@@ -0,0 +1,8 @@
+import { registerRootComponent } from "expo";
+
+import App from "./App";
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
diff --git a/examples/with-react-native-web/apps/native/metro.config.js b/examples/with-react-native-web/apps/native/metro.config.js
new file mode 100644
index 0000000..21f6371
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/metro.config.js
@@ -0,0 +1,21 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(__dirname, "../..");
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages, and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;
diff --git a/examples/with-react-native-web/apps/native/package.json b/examples/with-react-native-web/apps/native/package.json
new file mode 100644
index 0000000..68bcb71
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "native",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "dev": "yarn start"
+  },
+  "dependencies": {
+    "expo": "^45.0.6",
+    "expo-status-bar": "~1.3.0",
+    "react": "18.2",
+    "react-dom": "18.1",
+    "react-native": "0.68.2",
+    "react-native-web": "^0.18.9",
+    "ui": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/react": "^18.0.22",
+    "@types/react-native": "^0.69.15",
+    "typescript": "^4.7.4"
+  },
+  "private": true
+}
diff --git a/examples/with-react-native-web/apps/native/tsconfig.json b/examples/with-react-native-web/apps/native/tsconfig.json
new file mode 100644
index 0000000..b9567f6
--- /dev/null
+++ b/examples/with-react-native-web/apps/native/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}