[Android] Extra vertical padding in bottom tab bar upon app launch

[chitrakshtarun]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Bottom Tab Bar on Android has extra vertical padding when the app is launched. This padding goes away when I minimise the app to the foreground, and re-open it. If I close the app completely and re-open it, the padding returns.

Running on a physical Android device, using a development build created using EAS (issue arises in other builds too).

Image 1: When the app is first launched, it has extra padding.
Image 2: When the app is foregrounded and gone back to, padding goes away.

Library version

0.78

Environment info

System:
  OS: Linux 4.4 Ubuntu 20.04.3 LTS (Focal Fossa)
  CPU: "(16) x64 AMD Ryzen 7 5800H with Radeon Graphics         "
  Memory: 4.23 GB / 15.86 GB
  Shell:
    version: 5.0.17
    path: /bin/bash
Binaries:
  Node:
    version: 20.18.0
    path: ~/.nvm/versions/node/v20.18.0/bin/node
  Yarn:
    version: 1.22.19
    path: /mnt/c/Users/Fevenir/AppData/Roaming/npm/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Create an Expo app and install the react-native-bottom-tabs dependencies.
2. Replace JS tabs with the Native Bottom Tabs.
3. Create a development build for the app.
4. Launch the app on Android.

Reproducible sample code

import React from "react";
import { Tabs } from "@/components/NativeBottomTabs";
import { useColorsForUI } from "@/hooks/useColorsForUI";
import { storage } from "@/lib/utils/mmkv";
import { Platform } from "react-native";
import { useMMKVBoolean } from "react-native-mmkv";

export default function TabLayout() {
  const [haptics, setHaptics] = useMMKVBoolean("settings-haptics", storage);
  const { tintColor, backgroundColor, tabBarTintColor } = useColorsForUI();

  return (
    <Tabs
      ignoresTopSafeArea
      hapticFeedbackEnabled={haptics}
      activeIndicatorColor={tabBarTintColor}
      tabBarActiveTintColor={tintColor}
      barTintColor={Platform.select({
        ios: undefined,
        android: backgroundColor,
      })}
    >

        {/* <<<Tab Screens>>> */}

    </Tabs>
  );
}

[chitrakshtarun]

This would be my first GitHub issue so please let me know if I should submit anything other information regarding it.
For context, this implementation is from the following project: https://github.com/ChitrakshTarun/PaceManApp (dev branch)
Thank you in advance!

[okwasniewski]

Hey, @chitrakshtarun

Thanks for creating the issue. Can you check if it happens on a device without the bottom buttons (system navigation bar)?

I've tested only without it so it might be an issue

[chitrakshtarun]

Hi @okwasniewski, thank you for the response!
Yep, the issue seems to persist when system navigation bar is enabled as well, but the padding is a little less subtle. Placing them side by side can give a better idea:

Image 1: When the app is first launched.
Image 2: When the app is foregrounded and gone back to.

[okwasniewski]

Thanks for checking it! I'm planning to refactor how the bottom bar is placed on the screen inside of the library, hopefully this refactor will address this issue. Will keep you posted.

[guillaumehcht]

Hey just commenting to follow the topic as I'm experiencing a similar issue it seems! :)

[okwasniewski]

Hey @chitrakshtarun @guillaumehcht I've published a canary version of 0.8.0 0.8.0-canary-20250115141919 if you could please test if this version solves your issues it would help me a lot 🙏

[chitrakshtarun]

Hi, seems like I still have the same issue occurring. However this time, the extra padding has a different color than the set backgroundColor property.
Also tried updating react-native-edge-to-edge to the latest version as well as setting enforceNavigationBarContrast to false, however it seems like the issue persists.

Device: OnePlus 6T
OS: Android 11

Here is the tested repository and the build:

• Repository (dev Branch)
• EAS Build (Development Build)

Screen recording recreating the error:

Issue-Reprod-NavButton.mp4

[okwasniewski]

@chitrakshtarun Thanks for checking it. Can you create a separate example app to see if the issue persists?

Maybe it's something in your App that's causing this jump and it will help us track it down

[chitrakshtarun]

Sure, I'll try spinning up a new project and see if the issue still persists, then update back in this issue accordingly

[chitrakshtarun]

Hi @okwasniewski, tried spinning up a new expo project with the canary build of the package and the issue seems to persist.

Additional packages apart from default expo packages:

• @bottom-tabs/react-navigation@0.8.0-canary-20250115141919
• react-native-bottom-tabs@0.8.0-canary-20250115141919
• react-native-edge-to-edge@1.4.0

Notes:

• Scaffolded using npx create-expo-app@latest with the default template.
• Repository
• (tabs)/_layout.tsx file
• EAS Build (Development Build)

Screen Recording:

Bottom-Tabs-Padding-Test.mp4

[okwasniewski]

@chitrakshtarun I found the root cause, using <StatusBar style="auto" /> causes this shift(!).

Looks like changing StatusBar properties messes with the sizing. I will investigate further but as a workaround you can test without it.

Update: Looks like its a specific combination of StatusBar + Edge To Edge that causes a layout jump.

From my research it looks like:

• Bottom Tabs Alone: addOnLayoutChangeListener called 1x
• BT + Edge To Edge: addOnLayoutChangeListener called 1x
• BT + StatusBar: addOnLayoutChangeListener called 1x
• BT + StatusBar + Edge To Edge: addOnLayoutChangeListener called 2x, causing shift

[okwasniewski]

@chitrakshtarun looks like using <StatusBar/> + RN Edge To Edge conflict with each other.. Maybe @zoontek seen this before but for me it looks like they shouldn't be used together.

Here is an example of just rendering a view, and calling Alert when layout happens.

The root cause of this is that when StatusBar + Edge To Edge is used bottom navigation is first rendered under the system navigation bar and then it's pushed up. The video below shows that when returning to the app Edge To Edge starts working properly and then measurements are fixed.

CleanShot.2025-01-16.at.12.49.40.mp4