[PR #2523] feat(mobile): iOS 26 header compatibility and header icon fixes #2140

New issue

Open

opened 2026-03-02 12:00:43 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 12:00:43 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/2523
Author: @esimkowitz
Created: 2/26/2026
Status: 🔄 Open

Base: main ← Head: ios26-headers

📝 Commits (4)

d7705ec feat(mobile): add iOS 26 header compatibility
a422e0c fix(mobile): remove excess padding and use theme colors for header right icons
63c4a88 Upgrade react-native-screens to fix icon alignment issue in round iOS 26 right header buttons
361aaf2 fix padding in text header right buttons

📊 Changes

16 files changed (+64 additions, -39 deletions)

View changed files

📝 apps/mobile/app/_layout.tsx (+2 -1)
📝 apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx (+2 -1)
📝 apps/mobile/app/dashboard/(tabs)/(home)/_layout.tsx (+2 -1)
📝 apps/mobile/app/dashboard/(tabs)/(home)/index.tsx (+4 -2)
📝 apps/mobile/app/dashboard/(tabs)/(lists)/_layout.tsx (+2 -1)
📝 apps/mobile/app/dashboard/(tabs)/(lists)/index.tsx (+3 -2)
📝 apps/mobile/app/dashboard/(tabs)/(settings)/_layout.tsx (+2 -1)
📝 apps/mobile/app/dashboard/(tabs)/(tags)/_layout.tsx (+2 -1)
📝 apps/mobile/app/dashboard/_layout.tsx (+2 -1)
📝 apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx (+5 -2)
📝 apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx (+5 -1)
📝 apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx (+1 -1)
📝 apps/mobile/app/dashboard/lists/[slug]/index.tsx (+7 -2)
➕ apps/mobile/lib/ios.ts (+4 -0)
📝 apps/mobile/package.json (+1 -1)
📝 pnpm-lock.yaml (+20 -21)

📄 Description

Summary

Two improvements to mobile header styling:

iOS 26 header blur: Conditionally disables headerBlurEffect: "systemMaterial" on iOS 26+ so the native Liquid Glass gradient renders instead of the flat pre-iOS-26 blur. Applied to all 7 layout files. Uses a single isIOS26 constant in lib/ios.ts.
Header right icon fixes: Removes excess px-4 horizontal padding from header right icon wrappers that caused oval-shaped tap targets (especially visible on iOS 26 where Liquid Glass draws a visible outline). Also switches header icons from hardcoded blue/gray to theme foreground color so they match the navigation bar style across light/dark mode. For a few cases where the header right button is text-based, I've added a smaller px-2 padding.
Upgrade react-native-screens to 4.19.0 to fix an icon alignment issue in the header-right icons when no padding is applied.

Dependency changes

react-native-screens: ~4.16.0 → ~4.19.0
There was a bug in ~4.16.0 that affected the default alignment of icons, meaning that if no padding was applied to the inner contents, the contents would be improperly offset: https://github.com/software-mansion/react-native-screens/issues/2990

Why not ~4.20.0 or greater?
react-native-screens 4.20.0 renamed BottomTabs/BottomTabsScreen exports to Tabs.Host/Tabs.Screen. expo-router@~6.0.21 imports the old names directly, causing a runtime crash (TypeError: Cannot read property 'displayName' of undefined) in the tabs layout. 4.19.0 is the highest compatible version — it has both the bar button items support and the BottomTabs exports.

Test plan

iOS 26 simulator: headers show native Liquid Glass gradient, header icons are circular and match nav bar color
iOS < 26: existing systemMaterial blur still works, header icons render correctly
Android: header icons are visually balanced (not oval), colors match theme

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/karakeep-app/karakeep/pull/2523 **Author:** [@esimkowitz](https://github.com/esimkowitz) **Created:** 2/26/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `ios26-headers` --- ### 📝 Commits (4) - [`d7705ec`](https://github.com/karakeep-app/karakeep/commit/d7705eca3f5a146e5c4316853022fbe4b88fc043) feat(mobile): add iOS 26 header compatibility - [`a422e0c`](https://github.com/karakeep-app/karakeep/commit/a422e0cddfc67f6b57a15a0e86e212b19f19b272) fix(mobile): remove excess padding and use theme colors for header right icons - [`63c4a88`](https://github.com/karakeep-app/karakeep/commit/63c4a88d76b274d75f67de4a51745bbe730d2c0f) Upgrade react-native-screens to fix icon alignment issue in round iOS 26 right header buttons - [`361aaf2`](https://github.com/karakeep-app/karakeep/commit/361aaf22b473d75ee09645ac5acb052d4b4508e5) fix padding in text header right buttons ### 📊 Changes **16 files changed** (+64 additions, -39 deletions) <details> <summary>View changed files</summary> 📝 `apps/mobile/app/_layout.tsx` (+2 -1) 📝 `apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx` (+2 -1) 📝 `apps/mobile/app/dashboard/(tabs)/(home)/_layout.tsx` (+2 -1) 📝 `apps/mobile/app/dashboard/(tabs)/(home)/index.tsx` (+4 -2) 📝 `apps/mobile/app/dashboard/(tabs)/(lists)/_layout.tsx` (+2 -1) 📝 `apps/mobile/app/dashboard/(tabs)/(lists)/index.tsx` (+3 -2) 📝 `apps/mobile/app/dashboard/(tabs)/(settings)/_layout.tsx` (+2 -1) 📝 `apps/mobile/app/dashboard/(tabs)/(tags)/_layout.tsx` (+2 -1) 📝 `apps/mobile/app/dashboard/_layout.tsx` (+2 -1) 📝 `apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx` (+5 -2) 📝 `apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx` (+5 -1) 📝 `apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx` (+1 -1) 📝 `apps/mobile/app/dashboard/lists/[slug]/index.tsx` (+7 -2) ➕ `apps/mobile/lib/ios.ts` (+4 -0) 📝 `apps/mobile/package.json` (+1 -1) 📝 `pnpm-lock.yaml` (+20 -21) </details> ### 📄 Description ## Summary Two improvements to mobile header styling: 1. **iOS 26 header blur**: Conditionally disables `headerBlurEffect: "systemMaterial"` on iOS 26+ so the native Liquid Glass gradient renders instead of the flat pre-iOS-26 blur. Applied to all 7 layout files. Uses a single `isIOS26` constant in `lib/ios.ts`. 2. **Header right icon fixes**: Removes excess `px-4` horizontal padding from header right icon wrappers that caused oval-shaped tap targets (especially visible on iOS 26 where Liquid Glass draws a visible outline). Also switches header icons from hardcoded blue/gray to theme foreground color so they match the navigation bar style across light/dark mode. For a few cases where the header right button is text-based, I've added a smaller `px-2` padding. 3. Upgrade `react-native-screens` to 4.19.0 to fix an icon alignment issue in the header-right icons when no padding is applied. ## Dependency changes react-native-screens: ~4.16.0 → ~4.19.0 There was a bug in ~4.16.0 that affected the default alignment of icons, meaning that if no padding was applied to the inner contents, the contents would be improperly offset: https://github.com/software-mansion/react-native-screens/issues/2990 Why not ~4.20.0 or greater? react-native-screens 4.20.0 renamed BottomTabs/BottomTabsScreen exports to Tabs.Host/Tabs.Screen. expo-router@~6.0.21 imports the old names directly, causing a runtime crash (TypeError: Cannot read property 'displayName' of undefined) in the tabs layout. 4.19.0 is the highest compatible version — it has both the bar button items support and the BottomTabs exports. ## Test plan - [x] iOS 26 simulator: headers show native Liquid Glass gradient, header icons are circular and match nav bar color - [x] iOS < 26: existing `systemMaterial` blur still works, header icons render correctly - [x] Android: header icons are visually balanced (not oval), colors match theme --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem added the

pull-request

label

2026-03-02 12:00:43 +03:00

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/karakeep#2140

No description provided.

Rows
Columns