From 020a90f0d308ef182a0fea8e38620677c718743f Mon Sep 17 00:00:00 2001
From: Admin <1+admin@noreply.git.dcntrlized.org>
Date: Mon, 19 Oct 2026 16:03:17 +0100
Subject: [PATCH] [fix](client): apply the window insets so nothing draws under
the system bars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
React Native has Flutter's SafeArea under another name: react-native-safe-area-
context. The app mounted SafeAreaProvider but never consumed a single inset, so
on Android 15+ — where targetSdk 36 forces edge-to-edge and the window extends
behind both system bars — the Home header's settings gear sat underneath the
notification bar and could not be tapped.
A single SafeAreaFrame pads the tree by all four insets once, above the
navigator, so every present and future screen inherits the safe area instead of
each one re-deriving it.
---
App.tsx | 51 ++++++++++++++++++++++++++++++++++++++++-----------
1 file changed, 40 insertions(+), 11 deletions(-)
diff --git a/App.tsx b/App.tsx
index e18ef2f..456919c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,8 +1,8 @@
import React, { useEffect, useRef } from 'react';
-import { StatusBar } from 'react-native';
+import { StatusBar, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { HeroUINativeProviderRaw } from 'heroui-native/provider-raw';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import { DarkTheme, NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -149,21 +149,50 @@ function Root() {
);
}
+/**
+ * React Native's equivalent of Flutter's `SafeArea`: pad the whole tree by the
+ * platform's window insets once, so no screen can draw its header under the
+ * status bar or its buttons under the navigation bar.
+ *
+ * This is not optional on Android 15+: with `targetSdk 36` the system enforces
+ * edge-to-edge, so the window extends behind both system bars and the app is
+ * responsible for the padding. Without it the Home header's settings gear sat
+ * underneath the notification bar and could not be tapped.
+ */
+function SafeAreaFrame({ children }: { children: React.ReactNode }) {
+ const insets = useSafeAreaInsets();
+ return (
+
+ {children}
+
+ );
+}
+
function App() {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+