refactor(mobile): centralize safe-area spacing in useScreenInsets

apps/mobile/src/app/automation/create.tsx

@@ -9,13 +9,13 @@ import {
   ScrollView,
   View,
 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/text";
 import { TaskAutomationValidationError } from "@/features/tasks/api";
 import { AutomationForm } from "@/features/tasks/components/AutomationForm";
 import { useCreateTaskAutomation } from "@/features/tasks/hooks/useAutomations";
 import { useSkillStoreSkill } from "@/features/tasks/skills/hooks";
 import { formatSkillTemplateId } from "@/features/tasks/skills/skillTemplateIds";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { useThemeColors } from "@/lib/theme";
 
 // Reserved space below the scrolling form content. Tall enough that the
@@ -35,7 +35,7 @@ export default function CreateAutomationScreen() {
     : skillNameParam;
   const router = useRouter();
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { insets, bottom } = useScreenInsets();
   const createAutomation = useCreateTaskAutomation();
   const defaultTimezone = useMemo(
     () => getCalendars()[0]?.timeZone ?? "UTC",
@@ -209,7 +209,7 @@ export default function CreateAutomationScreen() {
         {formMounted && (
           <View
             className="absolute inset-x-0 bottom-0 border-gray-6 border-t bg-background px-4 pt-3"
-            style={{ paddingBottom: insets.bottom + 12 }}
+            style={{ paddingBottom: bottom("compact") }}
           >
             <Pressable
               onPress={handleCreate}

apps/mobile/src/app/mcp-servers/add-custom.tsx

@@ -11,11 +11,11 @@ import {
   TextInput,
   View,
 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FloatingMcpHeader } from "@/features/mcp/components/FloatingMcpHeader";
 import { useMcpInstallations } from "@/features/mcp/hooks";
 import { installCustomWithOAuth } from "@/features/mcp/oauth";
 import type { McpAuthType } from "@/features/mcp/types";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { useThemeColors } from "@/lib/theme";
 
@@ -29,7 +29,7 @@ const AUTH_OPTIONS: { value: McpAuthType; label: string }[] = [
 
 export default function AddCustomMcpServerScreen() {
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { insets, bottom } = useScreenInsets();
   const installations = useMcpInstallations();
 
   const [name, setName] = useState("");
@@ -85,7 +85,7 @@ export default function AddCustomMcpServerScreen() {
           className="flex-1"
           contentContainerStyle={{
             paddingTop: insets.top + 60,
-            paddingBottom: insets.bottom + 24,
+            paddingBottom: bottom("default"),
             paddingHorizontal: 16,
           }}
           keyboardShouldPersistTaps="handled"

apps/mobile/src/app/mcp-servers/index.tsx

@@ -10,7 +10,6 @@ import {
   TextInput,
   View,
 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FloatingMcpHeader } from "@/features/mcp/components/FloatingMcpHeader";
 import {
   installationToRowProps,
@@ -22,13 +21,14 @@ import type {
   McpRecommendedServer,
   McpServerInstallation,
 } from "@/features/mcp/types";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { useThemeColors } from "@/lib/theme";
 
 type Tab = "installed" | "marketplace";
 
 export default function McpServersScreen() {
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { insets, bottom } = useScreenInsets();
   const router = useRouter();
   const [tab, setTab] = useState<Tab>("installed");
   const [search, setSearch] = useState("");
@@ -149,7 +149,7 @@ export default function McpServersScreen() {
                 tintColor={themeColors.accent[9]}
               />
             }
-            contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
+            contentContainerStyle={{ paddingBottom: bottom("default") }}
           />
         ) : (
           <FlatList
@@ -172,7 +172,7 @@ export default function McpServersScreen() {
                 tintColor={themeColors.accent[9]}
               />
             }
-            contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
+            contentContainerStyle={{ paddingBottom: bottom("default") }}
           />
         )}
       </View>

apps/mobile/src/app/mcp-servers/installation/[id].tsx

@@ -16,7 +16,6 @@ import {
   Switch,
   View,
 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FloatingMcpHeader } from "@/features/mcp/components/FloatingMcpHeader";
 import { ServerIcon } from "@/features/mcp/components/ServerIcon";
 import {
@@ -31,6 +30,7 @@ import { reauthorizeInstallation } from "@/features/mcp/oauth";
 import { getMcpConnectionManager } from "@/features/mcp/service";
 import type { McpApprovalState } from "@/features/mcp/types";
 import { isStdioServer } from "@/features/mcp/types";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { useThemeColors } from "@/lib/theme";
 
@@ -39,7 +39,7 @@ const log = logger.scope("mcp-installation-detail");
 export default function McpInstallationDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { insets, bottom } = useScreenInsets();
 
   const installations = useMcpInstallations();
   const installation = useMemo(
@@ -142,7 +142,7 @@ export default function McpInstallationDetailScreen() {
         className="flex-1"
         contentContainerStyle={{
           paddingTop: insets.top + 60,
-          paddingBottom: insets.bottom + 24,
+          paddingBottom: bottom("default"),
           paddingHorizontal: 16,
         }}
         refreshControl={

apps/mobile/src/app/mcp-servers/template/[id].tsx

@@ -10,7 +10,6 @@ import {
   TextInput,
   View,
 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FloatingMcpHeader } from "@/features/mcp/components/FloatingMcpHeader";
 import { ServerIcon } from "@/features/mcp/components/ServerIcon";
 import {
@@ -20,6 +19,7 @@ import {
 } from "@/features/mcp/hooks";
 import { installTemplateWithOAuth } from "@/features/mcp/oauth";
 import { isStdioServer } from "@/features/mcp/types";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { useThemeColors } from "@/lib/theme";
 
@@ -28,7 +28,7 @@ const log = logger.scope("mcp-template-detail");
 export default function McpTemplateDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { insets, bottom } = useScreenInsets();
 
   const marketplace = useMcpMarketplace();
   const installations = useMcpInstallations();
@@ -116,7 +116,7 @@ export default function McpTemplateDetailScreen() {
         className="flex-1"
         contentContainerStyle={{
           paddingTop: insets.top + 60,
-          paddingBottom: insets.bottom + 24,
+          paddingBottom: bottom("default"),
           paddingHorizontal: 16,
         }}
       >

apps/mobile/src/app/pr-diff.tsx

@@ -1,18 +1,18 @@
 import { Text } from "@components/text";
 import { useLocalSearchParams } from "expo-router";
 import { ActivityIndicator, FlatList, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FileDiff } from "@/features/tasks/components/FileDiff";
 import {
   type ChangedFile,
   usePrChangedFiles,
 } from "@/features/tasks/hooks/usePrChangedFiles";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { useThemeColors } from "@/lib/theme";
 
 export default function PrDiffScreen() {
   const { prUrl } = useLocalSearchParams<{ prUrl?: string }>();
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { bottom } = useScreenInsets();
 
   const { data: files, isLoading } = usePrChangedFiles(prUrl ?? null);
 
@@ -47,7 +47,7 @@ export default function PrDiffScreen() {
       contentContainerStyle={{
         paddingHorizontal: 12,
         paddingTop: 8,
-        paddingBottom: insets.bottom + 16,
+        paddingBottom: bottom("default"),
       }}
       ListHeaderComponent={
         <View className="mb-2 flex-row items-center justify-between px-1 py-1">

apps/mobile/src/app/settings/index.tsx

@@ -3,7 +3,6 @@ import { router } from "expo-router";
 import { ArrowSquareOut, CaretRight, SpeakerHigh } from "phosphor-react-native";
 import { useState } from "react";
 import { Linking, Pressable, ScrollView, Switch, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAuthStore, useProjectsQuery, useUserQuery } from "@/features/auth";
 import { useDismissedReportsStore } from "@/features/inbox/stores/dismissedReportsStore";
 import { usePushTokenStore } from "@/features/notifications/stores/pushTokenStore";
@@ -19,6 +18,7 @@ import { SettingsRow } from "@/features/settings/components/SettingsRow";
 import { SettingsSection } from "@/features/settings/components/SettingsSection";
 import { SelectSheet } from "@/features/tasks/composer/SelectSheet";
 import { playCompletionSound } from "@/features/tasks/utils/sounds";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { useThemeColors } from "@/lib/theme";
 
@@ -79,7 +79,7 @@ function taskModeLabel(mode: InitialTaskMode): string {
 
 export default function SettingsScreen() {
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { insets, bottom } = useScreenInsets();
 
   const {
     logout,
@@ -170,7 +170,7 @@ export default function SettingsScreen() {
   // padding clears the home indicator and gives breathing room past the last
   // row so it never hides behind it.
   const contentPaddingTop = insets.top + 60;
-  const contentPaddingBottom = insets.bottom + 32;
+  const contentPaddingBottom = bottom("default");
 
   return (
     <View className="flex-1 bg-background">

apps/mobile/src/app/task/[id].tsx

@@ -12,7 +12,6 @@ import {
 } from "react-native";
 import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FloatingBackButton } from "@/components/FloatingBackButton";
 import { getTask, runTaskInCloud } from "@/features/tasks/api";
 import { FloatingTaskHeader } from "@/features/tasks/components/FloatingTaskHeader";
@@ -36,6 +35,7 @@ import { useTaskSessionStore } from "@/features/tasks/stores/taskSessionStore";
 import { useTaskStore } from "@/features/tasks/stores/taskStore";
 import type { Task } from "@/features/tasks/types";
 import { getSessionActivityPhase } from "@/features/tasks/utils/sessionActivity";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { useThemeColors } from "@/lib/theme";
 
@@ -59,7 +59,7 @@ export default function TaskDetailScreen() {
   }>();
   const router = useRouter();
   const queryClient = useQueryClient();
-  const insets = useSafeAreaInsets();
+  const { insets, composerBottom } = useScreenInsets();
   const themeColors = useThemeColors();
   const [task, setTask] = useState<Task | null>(null);
   const [loading, setLoading] = useState(true);
@@ -123,9 +123,9 @@ export default function TaskDetailScreen() {
     // height, so the composer sits at the keyboard top — no extra gap needed
     // when open. Closed state keeps a comfortable bottom inset.
     return {
-      marginBottom: height.value < 0 ? 0 : Math.max(insets.bottom, 50),
+      marginBottom: height.value < 0 ? 0 : composerBottom(),
     };
-  }, [insets.bottom]);
+  }, [composerBottom]);
 
   useEffect(() => {
     if (!taskId) return;

apps/mobile/src/app/task/index.tsx

@@ -28,8 +28,6 @@ import {
   useReanimatedKeyboardAnimation,
 } from "react-native-keyboard-controller";
 import Animated, { runOnJS, useAnimatedStyle } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
 import { useVoiceRecording } from "@/features/chat";
 import { usePreferencesStore } from "@/features/preferences/stores/preferencesStore";
 import { createTask, runTaskInCloud } from "@/features/tasks/api";
@@ -74,6 +72,7 @@ import {
   isRepositorySelectionComplete,
   toRepositorySelection,
 } from "@/features/tasks/utils/repositorySelection";
+import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { toRgba, useThemeColors } from "@/lib/theme";
 
@@ -110,9 +109,9 @@ export default function NewTaskScreen() {
   }>();
   const router = useRouter();
   const themeColors = useThemeColors();
-  const insets = useSafeAreaInsets();
+  const { insets, bottom } = useScreenInsets();
   const keyboard = useReanimatedKeyboardAnimation();
-  const restingBottom = insets.bottom + 12;
+  const restingBottom = bottom("compact");
   const {
     error,
     hasGithubIntegration,

apps/mobile/src/components/SheetContainer.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import { Modal, Pressable, View } from "react-native";
+import {
+  type BottomGapVariant,
+  useScreenInsets,
+} from "@/hooks/useScreenInsets";
+
+const SHEET_SHADOW = {
+  shadowColor: "#000",
+  shadowOpacity: 0.15,
+  shadowRadius: 20,
+  shadowOffset: { width: 0, height: -4 },
+  elevation: 12,
+} as const;
+
+interface SheetContainerProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  /** Bottom padding gap above the safe-area inset. Defaults to "compact". */
+  bottomGap?: BottomGapVariant;
+  /** Extra classes for the sheet panel. */
+  className?: string;
+}
+
+/**
+ * Bottom-sheet shell: a dimmed backdrop, a panel pinned to the bottom edge with
+ * the standard rounded top, border, shadow, drag handle, and safe-area-aware
+ * bottom padding. Tapping the backdrop closes; taps inside the panel don't.
+ *
+ * Use this instead of re-implementing the `mt-auto rounded-t-2xl …` markup so
+ * every sheet shares one shape and one inset policy.
+ */
+export function SheetContainer({
+  open,
+  onClose,
+  children,
+  bottomGap = "compact",
+  className = "",
+}: SheetContainerProps) {
+  const { bottom } = useScreenInsets();
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <Pressable className="flex-1 bg-black/40" onPress={onClose}>
+        <Pressable
+          onPress={() => {}}
+          className={`mt-auto rounded-t-2xl border-gray-6 border-t bg-background ${className}`}
+          style={{ paddingBottom: bottom(bottomGap), ...SHEET_SHADOW }}
+        >
+          {/* Drag handle */}
+          <View className="items-center pt-2 pb-1">
+            <View className="h-1 w-10 rounded-full bg-gray-6" />
+          </View>
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}