feat(mobile): iOS 26 header compatibility and header icon fixes (#2523)

esimkowitz · web-flow · commit e71681deeccc · 2026-04-09T22:24:59.000+01:00
* feat(mobile): add iOS 26 header compatibility Disable headerBlurEffect on iOS 26 where the system provides native Liquid Glass blur. Add isIOS26 constant in lib/ios.ts for platform detection. * fix(mobile): remove excess padding and use theme colors for header right icons Remove px-4 from header right icon wrappers that caused oval-shaped tap targets. Use theme foreground color instead of hardcoded blue/gray for header icons so they match the navigation bar style. * Upgrade react-native-screens to fix icon alignment issue in round iOS 26 right header buttons * fix padding in text header right buttons * fix(mobile): patch react-native-screens 4.19.0 to fix Android header inset react-native-screens 4.19.0 (PR #3240) changed CustomToolbar to use ancestor-propagated insets instead of rootWindowInsets. This conflicts with react-native-keyboard-controller's rootView inset listener, which modifies insets before they reach the toolbar, causing the Android header to be too short (missing status bar height). Apply upstream fix from software-mansion/react-native-screens#3500: read the top inset directly from the DecorView instead of relying on ancestor-propagated insets which may have been consumed earlier. This patch can be removed once #3500 is merged and released upstream. * fix(mobile): patch react-native-keyboard-controller instead of react-native-screens for Android header inset The root cause of the Android header inset bug is in react-native-keyboard-controller, not react-native-screens. When edge-to-edge mode is enabled (Expo 55 default), KeyboardProvider forces statusBarTranslucent=true, and replaceStatusBarInsets() zeroes out the top system bar inset before dispatching to child views. This means react-native-screens' CustomToolbar receives top=0 and applies no status bar padding. The fix: always pass through the real system bar top inset in replaceStatusBarInsets(). The content margin in setupWindowInsets() already handles the layout offset independently. This replaces the previous react-native-screens patch (upstream PR #3500) with a 2-line fix at the actual root cause. Upstream issue: kirillzyusko/react-native-keyboard-controller#1013 Related: kirillzyusko/react-native-keyboard-controller#1292 * fix lockfile
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
@@ -12,6 +12,7 @@ import { ShareIntentProvider, useShareIntent } from "expo-share-intent";
 import { StatusBar } from "expo-status-bar";
 import { StyledStack } from "@/components/navigation/stack";
 import SplashScreenController from "@/components/SplashScreenController";
+import { isIOS26 } from "@/lib/ios";
 import { Providers } from "@/lib/providers";
 import { useColorScheme, useInitialAndroidBarSync } from "@/lib/useColorScheme";
 import { cn } from "@/lib/utils";
@@ -70,7 +71,7 @@ export default Sentry.wrap(function RootLayout() {
               ...Platform.select({
                 ios: {
                   headerTransparent: true,
-                  headerBlurEffect: "systemMaterial",
+                  headerBlurEffect: isIOS26 ? undefined : "systemMaterial",
                   headerLargeTitle: true,
                   headerLargeTitleShadowVisible: false,
                   headerLargeStyle: { backgroundColor: "transparent" },
diff --git a/apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx
@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 import { Stack } from "expo-router/stack";
+import { isIOS26 } from "@/lib/ios";
 
 export default function Layout() {
   return (
@@ -9,7 +10,7 @@ export default function Layout() {
           ios: {
             headerLargeTitle: true,
             headerTransparent: true,
-            headerBlurEffect: "systemMaterial",
+            headerBlurEffect: isIOS26 ? undefined : "systemMaterial",
             headerLargeTitleShadowVisible: false,
             headerLargeStyle: { backgroundColor: "transparent" },
           },
diff --git a/apps/mobile/app/dashboard/(tabs)/(home)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/(home)/_layout.tsx
@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 import { Stack } from "expo-router/stack";
+import { isIOS26 } from "@/lib/ios";
 
 export default function Layout() {
   return (
@@ -9,7 +10,7 @@ export default function Layout() {
           ios: {
             headerLargeTitle: true,
             headerTransparent: true,
-            headerBlurEffect: "systemMaterial",
+            headerBlurEffect: isIOS26 ? undefined : "systemMaterial",
             headerLargeTitleShadowVisible: false,
             headerLargeStyle: { backgroundColor: "transparent" },
           },
diff --git a/apps/mobile/app/dashboard/(tabs)/(home)/index.tsx b/apps/mobile/app/dashboard/(tabs)/(home)/index.tsx
@@ -8,6 +8,7 @@ import { TailwindResolver } from "@/components/TailwindResolver";
 import { Text } from "@/components/ui/Text";
 import useAppSettings from "@/lib/settings";
 import { useUploadAsset } from "@/lib/upload";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { useMenuIconColors } from "@/lib/useMenuIconColors";
 import { MenuView } from "@react-native-menu/menu";
 import { Plus, Search } from "lucide-react-native";
@@ -19,6 +20,7 @@ function HeaderRight({
   openNewBookmarkModal: () => void;
 }) {
   const { settings } = useAppSettings();
+  const { colors } = useColorScheme();
   const { menuIconColor } = useMenuIconColors();
   const uploadToastIdRef = useRef<string | number | null>(null);
   const { uploadAsset } = useUploadAsset(settings, {
@@ -99,9 +101,9 @@ function HeaderRight({
       ]}
       shouldOpenOnLongPress={false}
     >
-      <View className="my-auto px-4">
+      <View className="my-auto">
         <Plus
-          color="rgb(0, 122, 255)"
+          color={colors.foreground}
           onPress={() => Haptics.selectionAsync()}
         />
       </View>
diff --git a/apps/mobile/app/dashboard/(tabs)/(lists)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/(lists)/_layout.tsx
@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 import { Stack } from "expo-router/stack";
+import { isIOS26 } from "@/lib/ios";
 
 export default function Layout() {
   return (
@@ -9,7 +10,7 @@ export default function Layout() {
           ios: {
             headerLargeTitle: true,
             headerTransparent: true,
-            headerBlurEffect: "systemMaterial",
+            headerBlurEffect: isIOS26 ? undefined : "systemMaterial",
             headerLargeTitleShadowVisible: false,
             headerLargeStyle: { backgroundColor: "transparent" },
           },
diff --git a/apps/mobile/app/dashboard/(tabs)/(lists)/index.tsx b/apps/mobile/app/dashboard/(tabs)/(lists)/index.tsx
@@ -16,15 +16,16 @@ import { useTRPC } from "@karakeep/shared-react/trpc";
 import { ZBookmarkListTreeNode } from "@karakeep/shared/utils/listUtils";
 
 function HeaderRight({ openNewListModal }: { openNewListModal: () => void }) {
+  const { colors } = useColorScheme();
   return (
     <Pressable
-      className="my-auto px-4"
+      className="my-auto"
       onPress={() => {
         Haptics.selectionAsync();
         openNewListModal();
       }}
     >
-      <Plus color="rgb(0, 122, 255)" />
+      <Plus color={colors.foreground} />
     </Pressable>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/(settings)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/(settings)/_layout.tsx
@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 import { Stack } from "expo-router/stack";
+import { isIOS26 } from "@/lib/ios";
 
 export default function Layout() {
   return (
@@ -9,7 +10,7 @@ export default function Layout() {
           ios: {
             headerLargeTitle: true,
             headerTransparent: true,
-            headerBlurEffect: "systemMaterial",
+            headerBlurEffect: isIOS26 ? undefined : "systemMaterial",
             headerLargeTitleShadowVisible: false,
             headerLargeStyle: { backgroundColor: "transparent" },
           },
diff --git a/apps/mobile/app/dashboard/(tabs)/(tags)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/(tags)/_layout.tsx
@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 import { Stack } from "expo-router/stack";
+import { isIOS26 } from "@/lib/ios";
 
 export default function Layout() {
   return (
@@ -9,7 +10,7 @@ export default function Layout() {
           ios: {
             headerLargeTitle: true,
             headerTransparent: true,
-            headerBlurEffect: "systemMaterial",
+            headerBlurEffect: isIOS26 ? undefined : "systemMaterial",
             headerLargeTitleShadowVisible: false,
             headerLargeStyle: { backgroundColor: "transparent" },
           },
diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { AppState, Platform } from "react-native";
 import { useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
+import { isIOS26 } from "@/lib/ios";
 import { useIsLoggedIn } from "@/lib/session";
 import { focusManager } from "@tanstack/react-query";
 
@@ -34,7 +35,7 @@ export default function Dashboard() {
         ...Platform.select({
           ios: {
             headerTransparent: true,
-            headerBlurEffect: "systemMaterial",
+            headerBlurEffect: isIOS26 ? undefined : "systemMaterial",
             headerLargeTitle: true,
             headerLargeTitleShadowVisible: false,
             headerLargeStyle: { backgroundColor: "transparent" },
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -11,6 +11,7 @@ import BookmarkTextView from "@/components/bookmarks/BookmarkTextView";
 import BottomActions from "@/components/bookmarks/BottomActions";
 import FullPageError from "@/components/FullPageError";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import { isIOS26 } from "@/lib/ios";
 import useAppSettings from "@/lib/settings";
 import { useQuery } from "@tanstack/react-query";
 import { Settings } from "lucide-react-native";
@@ -95,14 +96,16 @@ export default function BookmarkView() {
           headerTintColor: isDark ? "#fff" : "#000",
           headerRight: () =>
             bookmark.content.type === BookmarkTypes.LINK ? (
-              <View className="flex-row items-center gap-3 px-4">
+              <View
+                className={`flex-row items-center gap-3${isIOS26 ? " px-2" : ""}`}
+              >
                 {bookmarkLinkType === "reader" && (
                   <Pressable
                     onPress={() =>
                       router.push("/dashboard/settings/reader-settings")
                     }
                   >
-                    <Settings size={20} color="gray" />
+                    <Settings size={20} color={isDark ? "#fff" : "#000"} />
                   </Pressable>
                 )}
                 <BookmarkLinkTypeSelector
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
@@ -400,7 +400,11 @@ const ViewBookmarkPage = () => {
           headerTransparent: false,
           headerTitle: "Edit Bookmark",
           headerRight: () => (
-            <Pressable onPress={onDone} disabled={isEditPending}>
+            <Pressable
+              onPress={onDone}
+              disabled={isEditPending}
+              className="px-2"
+            >
               {isEditPending ? (
                 <ActivityIndicator size="small" />
               ) : (
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
@@ -185,7 +185,7 @@ const TagPickerPage = () => {
             <Pressable
               onPress={clearAllTags}
               disabled={optimisticTags.length === 0}
-              className={optimisticTags.length === 0 ? "opacity-50" : ""}
+              className={`px-2 ${optimisticTags.length === 0 ? "opacity-50" : ""}`}
             >
               <Text className="text-primary">Clear</Text>
             </Pressable>
diff --git a/apps/mobile/app/dashboard/lists/[slug]/index.tsx b/apps/mobile/app/dashboard/lists/[slug]/index.tsx
@@ -5,6 +5,7 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageError from "@/components/FullPageError";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { useArchiveFilter } from "@/lib/hooks";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { useMenuIconColors } from "@/lib/useMenuIconColors";
 import { MenuView } from "@react-native-menu/menu";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -61,6 +62,7 @@ function ListActionsMenu({
   role: ZBookmarkList["userRole"];
 }) {
   const api = useTRPC();
+  const { colors } = useColorScheme();
   const { menuIconColor, destructiveMenuIconColor } = useMenuIconColors();
   const { mutate: deleteList } = useMutation(
     api.lists.delete.mutationOptions({
@@ -167,8 +169,11 @@ function ListActionsMenu({
       }}
       shouldOpenOnLongPress={false}
     >
-      <View className="my-auto px-4">
-        <Ellipsis onPress={() => Haptics.selectionAsync()} color="gray" />
+      <View className="my-auto">
+        <Ellipsis
+          onPress={() => Haptics.selectionAsync()}
+          color={colors.foreground}
+        />
       </View>
     </MenuView>
   );
diff --git a/apps/mobile/lib/ios.ts b/apps/mobile/lib/ios.ts
@@ -0,0 +1,4 @@
+import { Platform } from "react-native";
+
+export const isIOS26 =
+  Platform.OS === "ios" && parseInt(Platform.Version as string, 10) >= 26;
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -66,12 +66,12 @@
     "react-native-css-interop": "0.2.1",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-image-viewing": "^0.2.2",
-    "react-native-keyboard-controller": "^1.18.5",
+    "react-native-keyboard-controller": "^1.21.0",
     "react-native-markdown-display": "^7.0.2",
     "react-native-pdf": "7.0.3",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
+    "react-native-screens": "~4.19.0",
     "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.0",
     "react-native-webview": "13.15.0",
diff --git a/package.json b/package.json
@@ -39,7 +39,8 @@
   "pnpm": {
     "patchedDependencies": {
       "xcode@3.0.1": "patches/xcode@3.0.1.patch",
-      "playwright-extra@4.3.6": "patches/playwright-extra@4.3.6.patch"
+      "playwright-extra@4.3.6": "patches/playwright-extra@4.3.6.patch",
+      "react-native-keyboard-controller@1.21.4": "patches/react-native-keyboard-controller@1.21.4.patch"
     }
   }
 }
diff --git a/patches/react-native-keyboard-controller@1.21.4.patch b/patches/react-native-keyboard-controller@1.21.4.patch
@@ -0,0 +1,31 @@
+diff --git a/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt b/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt
+index 8cf1ff5..30ec8e3 100644
+--- a/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt
++++ b/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt
+@@ -76,7 +76,12 @@ fun View.replaceStatusBarInsets(
+     val sysBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+     val navBars = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
+     val ime = insets.getInsets(WindowInsetsCompat.Type.ime())
+-    val adjustedTop = if (isStatusBarTranslucent) 0 else sysBars.top
++    // Always pass through the real status bar inset so downstream native views
++    // (e.g. react-native-screens' CustomToolbar) can apply proper padding.
++    // The content margin in setupWindowInsets() already handles the layout offset
++    // (0 when translucent, sysBars.top when not).
++    // Upstream issue: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1013
++    val adjustedTop = sysBars.top
+     // pick bottom: use IME if present, otherwise nav bar bottom (respect translucency)
+     val bottomFromImeOrNav = if (ime.bottom > 0) ime.bottom else navBars.bottom
+     val adjustedInsets =
+@@ -91,9 +96,11 @@ fun View.replaceStatusBarInsets(
+   } else {
+     val defaultInsets = ViewCompat.onApplyWindowInsets(this, insets)
+
++    // Always pass through the real status bar inset (see comment above)
++    // Upstream issue: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1013
+     return defaultInsets.replaceSystemWindowInsets(
+       defaultInsets.systemWindowInsetLeft,
+-      if (isStatusBarTranslucent) 0 else defaultInsets.systemWindowInsetTop,
++      defaultInsets.systemWindowInsetTop,
+       defaultInsets.systemWindowInsetRight,
+       defaultInsets.systemWindowInsetBottom,
+     )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
