feat: @uploadthing/expo

.changeset/afraid-berries-burn.md

@@ -0,0 +1,6 @@
+---
+"@uploadthing/react": minor
+"@uploadthing/expo": minor
+---
+
+feat: support expo

.npmrc

@@ -5,3 +5,5 @@ save-workspace-protocol=false
 prefer-workspace-packages=true
 
 engine-strict=true
+
+node-linker=hoisted

examples/minimal-expo/.env.example

@@ -0,0 +1 @@
+UPLOADTHING_SECRET="sk_live_xxx"

examples/minimal-expo/.gitignore

@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

examples/minimal-expo/app.config.ts

@@ -0,0 +1,39 @@
+import type { ConfigContext, ExpoConfig } from "expo/config";
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: "Minimal Expo x UploadThing",
+  slug: "minimal-expo",
+  version: "1.0.0",
+  orientation: "portrait",
+  icon: "./assets/icon.png",
+  scheme: "myapp",
+  userInterfaceStyle: "automatic",
+  splash: {
+    backgroundColor: "#ffffff",
+  },
+  assetBundlePatterns: ["**/*"],
+  ios: {
+    bundleIdentifier: "your.bundle.identifier",
+    supportsTablet: true,
+  },
+  android: {
+    adaptiveIcon: {
+      foregroundImage: "./assets/icon.png",
+      backgroundColor: "#ffffff",
+    },
+  },
+  web: {
+    bundler: "metro",
+    output: "server",
+  },
+  plugins: ["expo-router"],
+  experiments: {
+    typedRoutes: true,
+  },
+  // extra: {
+  //   eas: {
+  //     projectId: "",
+  //   },
+  // },
+});

examples/minimal-expo/app/_layout.tsx

@@ -0,0 +1,17 @@
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+
+export default function RootLayout() {
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: "#D73328",
+          },
+        }}
+      />
+      <StatusBar />
+    </>
+  );
+}

examples/minimal-expo/app/api/uploadthing+api.ts

@@ -0,0 +1,52 @@
+import { z } from "zod";
+
+import { createRouteHandler, createUploadthing } from "uploadthing/server";
+import type { FileRouter } from "uploadthing/server";
+
+const f = createUploadthing({
+  /**
+   * Log out more information about the error, but don't return it to the client
+   * @see https://docs.uploadthing.com/errors#error-formatting
+   */
+  errorFormatter: (err) => {
+    console.log("Error uploading file", err.message);
+    console.log("  - Above error caused by:", err.cause);
+
+    return { message: err.message };
+  },
+});
+
+/**
+ * This is your Uploadthing file router. For more information:
+ * @see https://docs.uploadthing.com/api-reference/server#file-routes
+ */
+export const uploadRouter = {
+  videoAndImage: f({
+    image: {
+      maxFileSize: "4MB",
+      maxFileCount: 4,
+    },
+  }).onUploadComplete((data) => {
+    console.log("upload completed", data);
+  }),
+  document: f({
+    blob: {
+      maxFileSize: "16MB",
+      maxFileCount: 1,
+      contentDisposition: "inline",
+    },
+  })
+    .input(z.object({ foo: z.string() }))
+    .middleware(({ input }) => {
+      return { input };
+    })
+    .onUploadComplete((data) => {
+      console.log("upload completed", data);
+    }),
+} satisfies FileRouter;
+
+export type UploadRouter = typeof uploadRouter;
+
+export const { GET, POST } = createRouteHandler({
+  router: uploadRouter,
+});

examples/minimal-expo/app/index.tsx

@@ -0,0 +1,57 @@
+import { Stack } from "expo-router";
+import { Button, StyleSheet, Text, View } from "react-native";
+
+import { generateReactNativeHelpers } from "@uploadthing/expo";
+
+import type { UploadRouter } from "./api/uploadthing+api";
+
+const { useImageUploader, useDocumentUploader } =
+  generateReactNativeHelpers<UploadRouter>();
+
+export default function ModalScreen() {
+  const { openImagePicker, isUploading: isUploadingImage } =
+    useImageUploader("videoAndImage");
+  const { openDocumentPicker, isUploading: isUploadingDocument } =
+    useDocumentUploader("document");
+
+  return (
+    <>
+      <Stack.Screen options={{ title: "Home Page" }} />
+      <View style={styles.container}>
+        <Text style={styles.title}>Modal</Text>
+        <Button
+          title="Open Gallery"
+          onPress={() => openImagePicker({})}
+          disabled={isUploadingImage}
+        />
+        <Button
+          title="Select File"
+          onPress={() => {
+            return openDocumentPicker({
+              input: { foo: "bar" },
+            });
+          }}
+          disabled={isUploadingDocument}
+        />
+        <View style={styles.separator} />
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: "80%",
+  },
+});

examples/minimal-expo/babel.config.js

@@ -0,0 +1,7 @@
+/** @type {import("@babel/core").ConfigFunction} */
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};

examples/minimal-expo/eas.json

@@ -0,0 +1,30 @@
+{
+  "cli": {
+    "version": ">= 7.3.0"
+  },
+  "build": {
+    "base": {
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    },
+    "development": {
+      "extends": "base",
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "extends": "base",
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      }
+    },
+    "production": {
+      "extends": "base"
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

examples/minimal-expo/metro.config.js

@@ -0,0 +1,47 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { FileStore } = require("@expo/metro-config/file-store");
+const path = require("path");
+
+module.exports = withTurborepoManagedCache(
+  withMonorepoPaths(getDefaultConfig(__dirname)),
+);
+
+/**
+ * Add the monorepo paths to the Metro config.
+ * This allows Metro to resolve modules from the monorepo.
+ *
+ * @see https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
+ * @param {import('expo/metro-config').MetroConfig} config
+ * @returns {import('expo/metro-config').MetroConfig}
+ */
+function withMonorepoPaths(config) {
+  const projectRoot = __dirname;
+  const workspaceRoot = path.resolve(projectRoot, "../..");
+
+  // #1 - Watch all files in the monorepo
+  config.watchFolders = [workspaceRoot];
+
+  // #2 - Resolve modules within the project's `node_modules` first, then all monorepo modules
+  config.resolver.nodeModulesPaths = [
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
+  ];
+
+  return config;
+}
+
+/**
+ * Move the Metro cache to the `node_modules/.cache/metro` folder.
+ * This repository configured Turborepo to use this cache location as well.
+ * If you have any environment variables, you can configure Turborepo to invalidate it when needed.
+ *
+ * @see https://turbo.build/repo/docs/reference/configuration#env
+ * @param {import('expo/metro-config').MetroConfig} config
+ * @returns {import('expo/metro-config').MetroConfig}
+ */
+function withTurborepoManagedCache(config) {
+  config.cacheStores = [
+    new FileStore({ root: path.join(__dirname, "node_modules/.cache/metro") }),
+  ];
+  return config;
+}

examples/minimal-expo/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@example/minimal-expo",
+  "main": "expo-router/entry",
+  "scripts": {
+    "dev": "expo start --ios",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios"
+  },
+  "dependencies": {
+    "@uploadthing/expo": "6.3.0",
+    "expo": "~50.0.15",
+    "expo-image-picker": "^14.7.1",
+    "expo-linking": "~6.2.2",
+    "expo-router": "~3.4.8",
+    "expo-splash-screen": "~0.26.4",
+    "expo-status-bar": "~1.11.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "^0.73.6",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
+    "uploadthing": "6.9.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/runtime": "^7.24.4",
+    "@types/react": "18.2.78",
+    "typescript": "^5.4.5"
+  },
+  "private": true
+}

examples/minimal-expo/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "~/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}