Navigation bar isn't handled well in Android #27

New issue

Closed

opened 2026-08-30 23:32:21 +00:00 by uwayss · 2 comments

uwayss commented

2026-08-30 23:32:21 +00:00

Owner

look at the tab bar in the bottom. I don't know why but i feel like it should start above the navigation bar and not under it. I guess we could use the safe area for the bottom part of the app

look at the tab bar in the bottom. I don't know why but i feel like it should start above the navigation bar and not under it. I guess we could use the safe area for the bottom part of the app ![adb_20260827_140201](/attachments/a934719a-753e-47a5-86b1-8289cc4eebf8)

adb_20260827_140201.png

159 KiB

uwayss added the

bug

label

2026-08-30 23:32:21 +00:00

uwayss commented

2026-08-31 07:00:57 +00:00

Author

Owner

@claude can you try to solve it pls?

claude-bot commented

2026-08-31 07:01:05 +00:00

Collaborator

Pushed the fix to claude/fix-tab-bar-nav-bar-27.

Root cause

App.tsx never wrapped the app tree in <SafeAreaProvider> (from react-native-safe-area-context, already a project dependency). Without it, every useSafeAreaInsets() call in the app — including the one @react-navigation/bottom-tabs uses internally to pad the tab bar — resolves to zero insets. On Android's edge-to-edge layout (default since RN 0.86 / Expo SDK 57), that means the tab bar draws flush to the bottom of the screen, right under the system navigation bar, instead of sitting above it.

Fix

Wrapped the whole app in SafeAreaProvider in App.tsx:

 export default function App() {
   return (
-    <ThemeProvider>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <NavigationContainer>
-          <AppContent />
-          <StatusBar style={'auto'} />
-        </NavigationContainer>
-      </GestureHandlerRootView>
-    </ThemeProvider>
+    <SafeAreaProvider>
+      <ThemeProvider>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <NavigationContainer>
+            <AppContent />
+            <StatusBar style={'auto'} />
+          </NavigationContainer>
+        </GestureHandlerRootView>
+      </ThemeProvider>
+    </SafeAreaProvider>
   );
 }

No changes were needed in AppNavigator.tsx — the bottom tab bar already picks up safe-area insets automatically once a SafeAreaProvider exists in the tree, since its tabBarStyle doesn't override height.

npm run checks:tsc and npm run checks:lint both pass. I couldn't run the app in an emulator in this CI environment, so please verify on-device that the tab bar now sits above the gesture/nav bar.

Pushed the fix to `claude/fix-tab-bar-nav-bar-27`. ## Root cause `App.tsx` never wrapped the app tree in `<SafeAreaProvider>` (from `react-native-safe-area-context`, already a project dependency). Without it, every `useSafeAreaInsets()` call in the app — including the one `@react-navigation/bottom-tabs` uses internally to pad the tab bar — resolves to zero insets. On Android's edge-to-edge layout (default since RN 0.86 / Expo SDK 57), that means the tab bar draws flush to the bottom of the screen, right under the system navigation bar, instead of sitting above it. ## Fix Wrapped the whole app in `SafeAreaProvider` in `App.tsx`: ```diff export default function App() { return ( - <ThemeProvider> - <GestureHandlerRootView style={{ flex: 1 }}> - <NavigationContainer> - <AppContent /> - <StatusBar style={'auto'} /> - </NavigationContainer> - </GestureHandlerRootView> - </ThemeProvider> + <SafeAreaProvider> + <ThemeProvider> + <GestureHandlerRootView style={{ flex: 1 }}> + <NavigationContainer> + <AppContent /> + <StatusBar style={'auto'} /> + </NavigationContainer> + </GestureHandlerRootView> + </ThemeProvider> + </SafeAreaProvider> ); } ``` No changes were needed in `AppNavigator.tsx` — the bottom tab bar already picks up safe-area insets automatically once a `SafeAreaProvider` exists in the tree, since its `tabBarStyle` doesn't override `height`. `npm run checks:tsc` and `npm run checks:lint` both pass. I couldn't run the app in an emulator in this CI environment, so please verify on-device that the tab bar now sits above the gesture/nav bar.

uwayss closed this issue

2026-08-31 08:38:16 +00:00