Expo 52

.npmrc

@@ -1,2 +1 @@
-node-linker=hoisted
 link-workspace-packages=true

apps/expo/.prettierignore

@@ -0,0 +1 @@
+nativewind-env.d.ts

apps/expo/app.config.ts

@@ -7,25 +7,25 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   scheme: "expo",
   version: "0.1.0",
   orientation: "portrait",
-  icon: "./assets/icon.png",
+  icon: "./assets/icon-light.png",
   userInterfaceStyle: "automatic",
-  splash: {
-    image: "./assets/icon.png",
-    resizeMode: "contain",
-    backgroundColor: "#1F104A",
-  },
   updates: {
     fallbackToCacheTimeout: 0,
   },
   assetBundlePatterns: ["**/*"],
   ios: {
     bundleIdentifier: "your.bundle.identifier",
     supportsTablet: true,
+    icon: {
+      light: "./assets/icon-light.png",
+      dark: "./assets/icon-dark.png",
+      // tinted: "",
+    },
   },
   android: {
     package: "your.bundle.identifier",
     adaptiveIcon: {
-      foregroundImage: "./assets/icon.png",
+      foregroundImage: "./assets/icon-light.png",
       backgroundColor: "#1F104A",
     },
   },
@@ -38,5 +38,19 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     tsconfigPaths: true,
     typedRoutes: true,
   },
-  plugins: ["expo-router"],
+  plugins: [
+    "expo-router",
+    "expo-secure-store",
+    [
+      "expo-splash-screen",
+      {
+        backgroundColor: "#E4E4E7",
+        image: "./assets/icon-light.png",
+        dark: {
+          backgroundColor: "#18181B",
+          image: "./assets/icon-dark.png",
+        },
+      },
+    ],
+  ],
 });

apps/expo/metro.config.js

@@ -3,15 +3,13 @@ const { getDefaultConfig } = require("expo/metro-config");
 const { FileStore } = require("metro-cache");
 const { withNativeWind } = require("nativewind/metro");
 
-const path = require("path");
+const path = require("node:path");
 
 const config = withTurborepoManagedCache(
-  withMonorepoPaths(
-    withNativeWind(getDefaultConfig(__dirname), {
-      input: "./src/styles.css",
-      configPath: "./tailwind.config.ts",
-    }),
-  ),
+  withNativeWind(getDefaultConfig(__dirname), {
+    input: "./src/styles.css",
+    configPath: "./tailwind.config.ts",
+  }),
 );
 
 // XXX: Resolve our exports in workspace packages
@@ -20,30 +18,6 @@ config.resolver.unstable_enablePackageExports = true;
 
 module.exports = config;
 
-/**
- * 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 `.cache/metro` folder.
  * If you have any environment variables, you can configure Turborepo to invalidate it when needed.

apps/expo/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

apps/expo/package.json

@@ -10,36 +10,36 @@
     "dev:ios": "expo start --ios",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "format": "prettier --check . --ignore-path ../../.gitignore --ignore-path .prettierignore",
     "lint": "eslint",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@bacons/text-decoder": "^0.0.0",
-    "@expo/metro-config": "^0.18.11",
-    "@shopify/flash-list": "1.7.1",
+    "@expo/metro-config": "^0.19.4",
+    "@shopify/flash-list": "1.7.2",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
-    "expo": "~51.0.38",
-    "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.28",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.23",
-    "expo-secure-store": "^13.0.2",
-    "expo-splash-screen": "~0.27.6",
-    "expo-status-bar": "~1.12.1",
-    "expo-web-browser": "^13.0.3",
-    "nativewind": "~4.0.36",
+    "expo": "~52.0.11",
+    "expo-constants": "~17.0.3",
+    "expo-dev-client": "~5.0.2",
+    "expo-linking": "~7.0.3",
+    "expo-router": "~4.0.9",
+    "expo-secure-store": "^14.0.0",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
+    "expo-web-browser": "^14.0.1",
+    "nativewind": "~4.1.23",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",
-    "react-native": "~0.74.6",
-    "react-native-css-interop": "~0.0.36",
-    "react-native-gesture-handler": "~2.20.0",
-    "react-native-reanimated": "~3.15.5",
-    "react-native-safe-area-context": "~4.11.1",
-    "react-native-screens": "~3.34.0",
+    "react-native": "~0.76.3",
+    "react-native-css-interop": "~0.1.22",
+    "react-native-gesture-handler": "~2.21.2",
+    "react-native-reanimated": "~3.16.2",
+    "react-native-safe-area-context": "~4.14.0",
+    "react-native-screens": "~4.3.0",
     "superjson": "2.2.1"
   },
   "devDependencies": {

apps/expo/src/utils/auth.tsx

@@ -25,8 +25,8 @@ export const signIn = async () => {
 };
 
 export const useUser = () => {
-  const { data: session } = api.auth.getSession.useQuery();
-  return session?.user ?? null;
+  const { data: user } = api.auth.getSession.useQuery();
+  return user;
 };
 
 export const useSignIn = () => {

apps/expo/tsconfig.json

@@ -6,10 +6,16 @@
       "~/*": ["./src/*"]
     },
     "jsx": "react-native",
-    "types": ["nativewind/types"],
     "checkJs": false,
     "moduleSuffixes": [".ios", ".android", ".native", ""]
   },
-  "include": ["src", "*.ts", "*.js", ".expo/types/**/*.ts", "expo-env.d.ts"],
+  "include": [
+    "src",
+    "*.ts",
+    "*.js",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
+  ],
   "exclude": ["node_modules"]
 }

packages/api/src/router/auth.ts

@@ -6,7 +6,14 @@ import { protectedProcedure, publicProcedure } from "../trpc";
 
 export const authRouter = {
   getSession: publicProcedure.query(({ ctx }) => {
-    return ctx.session;
+    const user = ctx.session?.user;
+    if (!user) return null;
+
+    return {
+      id: user.id,
+      name: user.name ?? null,
+      image: user.image ?? null,
+    };
   }),
   getSecretMessage: protectedProcedure.query(() => {
     return "you can see this secret message!";

packages/api/src/router/post.ts

@@ -30,11 +30,13 @@ export const postRouter = {
 
   create: protectedProcedure
     .input(CreatePostSchema)
-    .mutation(({ ctx, input }) => {
-      return ctx.db.insert(Post).values(input);
+    .mutation(async ({ ctx, input }) => {
+      await ctx.db.insert(Post).values(input);
     }),
 
-  delete: protectedProcedure.input(z.string()).mutation(({ ctx, input }) => {
-    return ctx.db.delete(Post).where(eq(Post.id, input));
-  }),
+  delete: protectedProcedure
+    .input(z.string())
+    .mutation(async ({ ctx, input }) => {
+      await ctx.db.delete(Post).where(eq(Post.id, input));
+    }),
 } satisfies TRPCRouterRecord;

packages/auth/package.json

@@ -32,6 +32,7 @@
     "@acme/eslint-config": "workspace:*",
     "@acme/prettier-config": "workspace:*",
     "@acme/tsconfig": "workspace:*",
+    "@types/react": "catalog:react18",
     "eslint": "catalog:",
     "prettier": "catalog:",
     "typescript": "catalog:"

packages/auth/src/index.rsc.ts

@@ -1,3 +1,4 @@
+/// <reference types="react/canary" />
 import { cache } from "react";
 import NextAuth from "next-auth";