starred/karakeep

Fork 0

mirror of https://github.com/karakeep-app/karakeep.git synced 2026-04-24 23:46:06 +03:00

[PR #2524] fix(mobile): disable KeyboardProvider on Android to fix header inset #2139

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/2524
Author: @esimkowitz
Created: 2/26/2026
Status: 🔄 Open

Base: main ← Head: fix/android-header-inset-keyboard-controller

📝 Commits (3)

294e670 fix(mobile): disable KeyboardProvider on Android to fix header inset
05aaded fix header color regression
75fb33c revert all transparent header changes

📊 Changes

1 file changed (+19 additions, -5 deletions)

View changed files

📝 apps/mobile/app/_layout.tsx (+19 -5)

📄 Description

Summary

Skip KeyboardProvider from react-native-keyboard-controller on Android entirely via a RootKeyboardProvider wrapper that returns bare children on Android

Problem

On Android, KeyboardProvider's EdgeToEdgeReactViewGroup installs a window insets listener at the root view level and zeros out the status bar top inset when isStatusBarTranslucent=true. Since react-native-is-edge-to-edge (used in Expo SDK 54+) unconditionally returns isEdgeToEdge() => true, this flag is always forced on.

This prevents react-native-screens' CustomToolbar from receiving the correct systemBarInsets.top value, causing all native stack headers to appear cramped against the status bar with no padding.

Known upstream issues

Trade-offs

Disabling KeyboardProvider on Android means KeyboardAwareScrollView and KeyboardGestureArea from this library won't function on Android. These are used in 3 screens (server-address, custom headers modal, bookmark info edit). React Native's built-in keyboard avoidance will need to handle those cases instead.

Test plan

Verify all tab screens (Home, Lists, Tags, Highlights, Settings) show headers with proper spacing below the status bar on Android
Verify pushed screens (bookmark detail, favourites, archive, search, settings sub-pages) have correct header positioning on Android
Verify modal screens (new bookmark, manage tags, manage lists, edit bookmark, new list, edit list) are not affected
Verify keyboard behavior on affected screens (server-address, bookmark info edit) is still usable
Verify iOS is not affected by these changes

_{🔄 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/2524 **Author:** [@esimkowitz](https://github.com/esimkowitz) **Created:** 2/26/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `fix/android-header-inset-keyboard-controller` --- ### 📝 Commits (3) - [`294e670`](https://github.com/karakeep-app/karakeep/commit/294e67064de08a00093f56bd133a6d9a93614853) fix(mobile): disable KeyboardProvider on Android to fix header inset - [`05aaded`](https://github.com/karakeep-app/karakeep/commit/05aaded09f78255a085419ea5e6e927ae9808adc) fix header color regression - [`75fb33c`](https://github.com/karakeep-app/karakeep/commit/75fb33c8017dfbeedc5bbb0ad34a2be3827562db) revert all transparent header changes ### 📊 Changes **1 file changed** (+19 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `apps/mobile/app/_layout.tsx` (+19 -5) </details> ### 📄 Description ## Summary Skip `KeyboardProvider` from `react-native-keyboard-controller` on Android entirely via a `RootKeyboardProvider` wrapper that returns bare children on Android ## Problem On Android, `KeyboardProvider`'s `EdgeToEdgeReactViewGroup` installs a window insets listener at the root view level and zeros out the status bar top inset when `isStatusBarTranslucent=true`. Since `react-native-is-edge-to-edge` (used in Expo SDK 54+) unconditionally returns `isEdgeToEdge() => true`, this flag is always forced on. This prevents `react-native-screens`' `CustomToolbar` from receiving the correct `systemBarInsets.top` value, causing all native stack headers to appear cramped against the status bar with no padding. ## Known upstream issues - https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1013 - https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1292 ## Trade-offs Disabling `KeyboardProvider` on Android means `KeyboardAwareScrollView` and `KeyboardGestureArea` from this library won't function on Android. These are used in 3 screens (server-address, custom headers modal, bookmark info edit). React Native's built-in keyboard avoidance will need to handle those cases instead. ## Test plan - [ ] Verify all tab screens (Home, Lists, Tags, Highlights, Settings) show headers with proper spacing below the status bar on Android - [ ] Verify pushed screens (bookmark detail, favourites, archive, search, settings sub-pages) have correct header positioning on Android - [ ] Verify modal screens (new bookmark, manage tags, manage lists, edit bookmark, new list, edit list) are not affected - [ ] Verify keyboard behavior on affected screens (server-address, bookmark info edit) is still usable - [ ] Verify iOS is not affected by these changes --- <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#2139

No description provided.

Rows
Columns