Skip to content

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

Closed
@chitrakshtarun

Description

@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>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    AndroidbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions