Feat/expo router

.gitignore

@@ -3,6 +3,8 @@ apps/*/credentials.json
 apps/*/build
 packages/*/build
 
+apps/*/dist
+
 # Turborepo
 .turbo
 

README.md

@@ -61,6 +61,8 @@ To run the repository locally, run these two commands:
 - `$ pnpm install` - This installs all required Node libraries using [pnpm](https://pnpm.io/).
 - `$ pnpm dev` - Starts the development servers for all **apps**.
 
+In Expo SDK 49+, you can switch between Expo Go and an expo-dev-client development build by pressing "s" after expo start.  This respository doesn't require the expo-dev-client, but because it is installed expo start defaults to it.  If you want to use the expo-dev-client with plugins, you must first build and install the development build on your device or simulator by runing `pnpm ios -d` or `pnpm android -d`.
+
 ### Commands
 
 Because this monorepo uses [Turborepo](https://turbo.build/repo), you don't need to run additional commands to set things up. Whenever you run `$ pnpm build`, it will build all **packages** if they aren't built yet. In this monorepo we use a few commands or pipelines:

apps/mobile/app.json

@@ -2,6 +2,7 @@
   "expo": {
     "name": "expo-monorepo",
     "slug": "expo-monorepo",
+    "scheme": "expo-monorepo",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -29,7 +30,11 @@
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
-    }
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
+    "plugins": [
+      "expo-router"
+    ]
   }
 }

apps/mobile/app/(auth)/sign-in.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+import { useAuth } from '@acme/app-mobile/context/auth';
+
+export default function SignIn() {
+  const { signIn } = useAuth();
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text onPress={() => signIn()}>Sign In</Text>
+    </View>
+  );
+}

apps/mobile/app/_layout.tsx

@@ -0,0 +1,11 @@
+import { Slot } from 'expo-router';
+import { Provider } from '@acme/app-mobile/context/auth';
+
+export default function Root() {
+  return (
+    // Setup the auth context and render our layout inside of it.
+    <Provider>
+      <Slot />
+    </Provider>
+  );
+}

apps/mobile/app/index.tsx

@@ -0,0 +1,12 @@
+import { Text, View } from 'react-native';
+
+import { useAuth } from '@acme/app-mobile/context/auth';
+
+export default function Index() {
+  const { signOut } = useAuth();
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text onPress={() => signOut()}>Sign Out</Text>
+    </View>
+  );
+}

apps/mobile/babel.config.js

@@ -2,5 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['expo-router/babel'],
   };
 };

apps/mobile/context/auth.tsx

@@ -0,0 +1,47 @@
+import { router, useSegments } from 'expo-router';
+import React from 'react';
+
+const AuthContext = React.createContext(null);
+
+// This hook can be used to access the user info.
+export function useAuth() {
+  return React.useContext(AuthContext);
+}
+
+// This hook will protect the route access based on user authentication.
+function useProtectedRoute(user) {
+  const segments = useSegments();
+
+  React.useEffect(() => {
+    const inAuthGroup = segments[0] === '(auth)';
+
+    if (
+      // If the user is not signed in and the initial segment is not anything in the auth group.
+      !user &&
+      !inAuthGroup
+    ) {
+      // Redirect to the sign-in page.
+      router.replace('/sign-in');
+    } else if (user && inAuthGroup) {
+      // Redirect away from the sign-in page.
+      router.replace('/');
+    }
+  }, [user, segments]);
+}
+
+export function Provider(props) {
+  const [user, setAuth] = React.useState(null);
+
+  useProtectedRoute(user);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        signIn: () => setAuth({}),
+        signOut: () => setAuth(null),
+        user,
+      }}>
+      {props.children}
+    </AuthContext.Provider>
+  );
+}

apps/mobile/index.js

@@ -1,8 +1,3 @@
-import { registerRootComponent } from 'expo';
-
-import App from './App';
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in the Expo client or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);
+import 'expo-dev-client';
+import 'react-native-gesture-handler';
+import 'expo-router/entry';

apps/mobile/package.json

@@ -6,23 +6,31 @@
   "scripts": {
     "dev": "expo start",
     "lint": "eslint --ext js,ts,tsx .",
+    "prebuild": "expo prebuild",
     "build": "expo export --output-dir ./build --platform all",
     "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web",
     "eas-build-pre-install": "npm install --global [email protected]",
     "eas-build-post-install": "pnpm run -w build:mobile"
   },
   "dependencies": {
     "@acme/feature-home": "*",
-    "expo": "^49.0.2",
+    "expo": "^49.0.8",
+    "expo-constants": "~14.4.2",
     "expo-dev-client": "~2.4.5",
+    "expo-linking": "^5.0.2",
+    "expo-router": "2.0.4",
+    "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "expo-updates": "~0.18.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.1",
+    "react-native": "0.72.3",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {

apps/mobile/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react",
     "strict": true
   }
 }

package.json

@@ -9,11 +9,14 @@
     "test": "turbo test",
     "build": "turbo build",
     "build:mobile": "turbo build --filter=\"...{./apps/mobile}\"",
-    "build:web": "turbo build --filter=\"...{./apps/web}\""
+    "build:web": "turbo build --filter=\"...{./apps/web}\"",
+    "clean": "turbo clean:modules && turbo clean:apps && pnpm install",
+    "clean:modules": "rm -rf node_modules && rm -rf apps/*/node_modules && rm -rf packages/*/node_modules",
+    "clean:apps": "rm -rf apps/*/ios && rm -rf apps/*/android && rm -rf apps/*/.expo"
   },
   "devDependencies": {
     "turbo": "^1.10.7",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.3"
   },
   "pnpm": {
     "peerDependencyRules": {

packages/feature-home/package.json

@@ -31,8 +31,6 @@
     "babel-preset-expo": "~9.5.0",
     "jest": "^29.4.3",
     "jest-expo": "^49.0.0",
-    "react": "18.2.0",
-    "react-native": "0.72.1",
     "react-test-renderer": "18.2.0",
     "tsup": "^6.5.0"
   },

packages/ui/package.json

@@ -28,8 +28,6 @@
     "babel-preset-expo": "~9.5.0",
     "jest": "^29.4.3",
     "jest-expo": "^49.0.0",
-    "react": "18.2.0",
-    "react-native": "0.72.1",
     "react-test-renderer": "18.2.0",
     "tsup": "^6.5.0"
   },