Closed
Description
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
- Create an Expo app and install the react-native-bottom-tabs dependencies.
- Replace JS tabs with the Native Bottom Tabs.
- Create a development build for the app.
- 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>
);
}