feat(mobile): integrate expo-device for device type management

Innei · Innei · commit 8096bf5c1ed7 · 2025-04-22T00:16:44.000+08:00
- Added expo-device package to manage device types.
- Implemented device type initialization in the app startup process.
- Created hooks and atoms for accessing device type throughout the app.
- Updated navigation logic to handle iPad-specific presentation styles.
- Removed unused loading indicator component.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/mobile/native/ios/Modules/TabBar/TabBarRootView.swift b/apps/mobile/native/ios/Modules/TabBar/TabBarRootView.swift
@@ -22,7 +22,7 @@ class TabBarRootView: ExpoView {
     if #available(iOS 18.0, *) {
       tabBarController.isTabBarHidden = true
     }
-    
+
     return tabBarController
   }()
 
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -61,6 +61,7 @@
     "expo-clipboard": "7.0.1",
     "expo-constants": "17.0.8",
     "expo-dev-client": "5.0.20",
+    "expo-device": "7.0.3",
     "expo-document-picker": "13.0.3",
     "expo-file-system": "18.0.12",
     "expo-haptics": "14.0.1",
diff --git a/apps/mobile/src/atoms/app.ts b/apps/mobile/src/atoms/app.ts
@@ -1,3 +1,4 @@
+import type { DeviceType } from "expo-device"
 import { atom } from "jotai"
 
 export const loadingVisibleAtom = atom(false)
@@ -15,3 +16,9 @@ export const loadingAtom = atom<{
   done: null,
   thenable: null,
 })
+/**
+ * Do not use directly
+ */
+export const appAtoms = {
+  deviceType: atom<DeviceType | null>(null),
+}
diff --git a/apps/mobile/src/atoms/hooks/useDeviceType.ts b/apps/mobile/src/atoms/hooks/useDeviceType.ts
@@ -0,0 +1,13 @@
+import { jotaiStore } from "@follow/utils"
+import { useAtomValue } from "jotai"
+
+import { appAtoms } from "../app"
+
+export const useDeviceType = () => {
+  const deviceType = useAtomValue(appAtoms.deviceType)
+  return deviceType
+}
+
+export const getDeviceType = () => {
+  return jotaiStore.get(appAtoms.deviceType)
+}
diff --git a/apps/mobile/src/components/common/NoLoginInfo.tsx b/apps/mobile/src/components/common/NoLoginInfo.tsx
@@ -1,19 +1,17 @@
 import { Pressable, Text } from "react-native"
 import { useColor } from "react-native-uikit-colors"
 
-import { useNavigation } from "@/src/lib/navigation/hooks"
-import { LoginScreen } from "@/src/screens/(modal)/LoginScreen"
+import { destination } from "@/src/lib/navigation/biz/Destination"
 
 import { Logo } from "../ui/logo"
 
 export function NoLoginInfo({ target }: { target: "timeline" | "subscriptions" }) {
   const color = useColor("secondaryLabel")
-  const navigation = useNavigation()
 
   return (
     <Pressable
       className="flex-1 items-center justify-center gap-3"
-      onPress={() => navigation.presentControllerView(LoginScreen)}
+      onPress={() => destination.Login()}
     >
       <Logo width={40} height={40} color={color} />
       <Text className="text-secondary-label text-xl">{`Sign in to see your ${target}`}</Text>
diff --git a/apps/mobile/src/components/ui/loading/index.tsx b/apps/mobile/src/components/ui/loading/index.tsx
diff --git a/apps/mobile/src/initialize/device.ts b/apps/mobile/src/initialize/device.ts
@@ -0,0 +1,10 @@
+import { getDeviceTypeAsync } from "expo-device"
+
+import { appAtoms } from "../atoms/app"
+import { jotaiStore } from "../lib/jotai"
+
+export function initDeviceType() {
+  getDeviceTypeAsync().then((type) => {
+    jotaiStore.set(appAtoms.deviceType, type)
+  })
+}
diff --git a/apps/mobile/src/initialize/index.ts b/apps/mobile/src/initialize/index.ts
@@ -8,6 +8,7 @@ import { initializeAppCheck } from "./app-check"
 import { initBackgroundFetch } from "./background"
 import { initCrashlytics } from "./crashlytics"
 import { initializeDayjs } from "./dayjs"
+import { initDeviceType } from "./device"
 import { hydrateDatabaseToStore, hydrateQueryClient, hydrateSettings } from "./hydrate"
 import { migrateDatabase } from "./migration"
 import { initializePlayer } from "./player"
@@ -17,6 +18,7 @@ export const initializeApp = async () => {
   console.log(`Initialize...`)
 
   const now = Date.now()
+  initDeviceType()
   initializeDb()
 
   await apm("migrateDatabase", migrateDatabase)
diff --git a/apps/mobile/src/lib/navigation/StackNavigation.tsx b/apps/mobile/src/lib/navigation/StackNavigation.tsx
@@ -181,7 +181,8 @@ const ModalScreenStackItems: FC<{
   if (!rootModalRoute) {
     return null
   }
-  const isStackModal = rootModalRoute.type !== "formSheet"
+  const isFormSheet = rootModalRoute.type === "formSheet"
+  const isStackModal = !isFormSheet
 
   const isFullScreen = rootModalRoute.type !== "modal" && rootModalRoute.type !== "formSheet"
 
@@ -229,16 +230,20 @@ const ModalScreenStackItems: FC<{
       </ModalScreenItemOptionsContext.Provider>
     )
   }
+
   return routes.map((route) => {
     return (
-      <WrappedScreenItem
-        key={route.id}
-        screenId={route.id}
-        stackPresentation={route.type}
-        screenOptions={route.screenOptions}
-      >
-        <ResolveView comp={route.Component} element={route.element} props={route.props} />
-      </WrappedScreenItem>
+      <ModalScreenItemOptionsContext.Provider value={modalScreenOptionsCtxValue} key={route.id}>
+        <ModalSafeAreaInsetsContext hasTopInset={!isFormSheet}>
+          <WrappedScreenItem
+            screenId={route.id}
+            stackPresentation={route.type}
+            screenOptions={route.screenOptions}
+          >
+            <ResolveView comp={route.Component} element={route.element} props={route.props} />
+          </WrappedScreenItem>
+        </ModalSafeAreaInsetsContext>
+      </ModalScreenItemOptionsContext.Provider>
     )
   })
 })
diff --git a/apps/mobile/src/lib/navigation/biz/Destination.ts b/apps/mobile/src/lib/navigation/biz/Destination.ts
@@ -0,0 +1,29 @@
+import { DeviceType } from "expo-device"
+
+import { getDeviceType } from "@/src/atoms/hooks/useDeviceType"
+import { LoginScreen } from "@/src/screens/(modal)/LoginScreen"
+
+import { isIOS } from "../../platform"
+import { Navigation } from "../Navigation"
+
+class Destination {
+  private navigation = Navigation.rootNavigation
+
+  get isIpad() {
+    return getDeviceType() === DeviceType.TABLET && isIOS
+  }
+
+  get presentControllerView() {
+    return this.navigation.presentControllerView
+  }
+
+  get pushControllerView() {
+    return this.navigation.pushControllerView
+  }
+
+  Login() {
+    this.presentControllerView(LoginScreen, void 0, this.isIpad ? "formSheet" : "modal")
+  }
+}
+
+export const destination = new Destination()
diff --git a/apps/mobile/src/lib/platform.ts b/apps/mobile/src/lib/platform.ts
@@ -1,7 +1,13 @@
 import { Platform } from "react-native"
 
+import { useDeviceType } from "../atoms/hooks/useDeviceType"
+
 export const isIOS = Platform.OS === "ios"
 export const isAndroid = Platform.OS === "android"
 export const isNative = isIOS || isAndroid
 export const devicePlatform = isIOS ? "ios" : isAndroid ? "android" : "web"
 export const isWeb = !isNative
+
+export const useIsiPad = () => {
+  return useDeviceType() && isIOS
+}
diff --git a/apps/mobile/src/providers/migration.tsx b/apps/mobile/src/providers/migration.tsx
@@ -2,7 +2,7 @@ import { deleteAsync } from "expo-file-system"
 import type { ReactNode } from "react"
 import { Button, Text, View } from "react-native"
 
-import { LoadingIndicator } from "../components/ui/loading"
+import { PlatformActivityIndicator } from "../components/ui/loading/PlatformActivityIndicator"
 import { getDbPath } from "../database"
 import { BugCuteReIcon } from "../icons/bug_cute_re"
 import { useDatabaseMigration } from "../initialize/migration"
@@ -35,9 +35,8 @@ export const MigrationProvider = ({ children }: { children: ReactNode }) => {
   if (!success) {
     return (
       <View className="flex-1 items-center justify-center">
-        <LoadingIndicator>
-          <Text>Database Migrations...</Text>
-        </LoadingIndicator>
+        <PlatformActivityIndicator />
+        <Text className="text-label mt-4">Database Migrations...</Text>
       </View>
     )
   }
diff --git a/apps/mobile/src/screens/(modal)/LoginScreen.tsx b/apps/mobile/src/screens/(modal)/LoginScreen.tsx
@@ -1,9 +1,10 @@
-import { useEffect } from "react"
-import { Text, TouchableOpacity } from "react-native"
+import { Fragment, useEffect } from "react"
+import { ScrollView, Text, TouchableOpacity } from "react-native"
 
 import { HeaderCloseOnly } from "@/src/components/layouts/header/HeaderElements"
 import { Navigation } from "@/src/lib/navigation/Navigation"
 import type { NavigationControllerView } from "@/src/lib/navigation/types"
+import { useIsiPad } from "@/src/lib/platform"
 import { Login } from "@/src/modules/login"
 import { useWhoami } from "@/src/store/user/hooks"
 
@@ -24,11 +25,15 @@ export const LoginScreen: NavigationControllerView = () => {
       exit()
     }
   }, [whoami])
+  const isiPad = useIsiPad()
+  const Container = isiPad ? ScrollView : Fragment
 
   // For development purposes, we don't want to redirect to the home page automatically
   return (
     <>
-      <Login />
+      <Container>
+        <Login />
+      </Container>
       <HeaderCloseOnly />
       {!!whoami?.id && __DEV__ && (
         <TouchableOpacity
@@ -46,3 +51,5 @@ export const LoginScreen: NavigationControllerView = () => {
     </>
   )
 }
+
+LoginScreen.sheetGrabberVisible = false
diff --git a/apps/mobile/tsconfig.json b/apps/mobile/tsconfig.json
@@ -13,6 +13,6 @@
     "jsx": "preserve",
     "types": ["@follow/types/global"]
   },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "nativewind-env.d.ts"],
+  "include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"],
   "exclude": ["./native", "./web-app"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ class TabBarRootView: ExpoView {`
`22`	`22`	`if #available(iOS 18.0, *) {`
`23`	`23`	`tabBarController.isTabBarHidden = true`
`24`	`24`	`}`
`25`		`-`
	`25`	`+`
`26`	`26`	`return tabBarController`
`27`	`27`	`}()`
`28`	`28`