Offset (maybe) not being calculated properly

[vcapretz]

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

I'm trying to implement a FAB action and when trying to absolute position the button right above the tab bar I was sort of expecting that I can use bottom: 0 in my style, and it would correctly offset the tab bar height (and precisely as it works with the non-native bottom tab component from React Navigation)

if I use useBottomTabBarHeight and create a marginBottom in my outer view or use bottom: tabBarHeight it does work, but I wonder if that's intended

here's my _layout.tsx and home screen codes:

import { Tabs } from "@/components/tabs";
import { NAV_THEME } from "@/components/theme";
import React from "react";
import { useColorScheme } from "react-native";

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      hapticFeedbackEnabled
      screenOptions={{
        tabBarActiveTintColor: NAV_THEME[colorScheme ?? "light"].primary,
      }}
    >
      <Tabs.Screen
        name="home"
        options={{
          title: "Home",
          tabBarIcon: () => ({ sfSymbol: "house" }),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explore",
          tabBarIcon: () => ({ sfSymbol: "person" }),
        }}
      />
    </Tabs>
  );
}

import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { View } from "react-native";
import { useBottomTabBarHeight } from "react-native-bottom-tabs";

export default function HomeScreen() {
  const tabBarHeight = useBottomTabBarHeight();

  return (
    <View
      className="flex-1 justify-center px-5"
      style={{ marginBottom: tabBarHeight }} // without this, the button is below the tab bar
    >
      {Array(100)
        .fill(undefined)
        .map((_a, i) => (
          <Text key={i} className="text-2xl">
            test
          </Text>
        ))}
      <Button className="absolute right-0 bottom-0">
        <Text>action</Text>
      </Button>
    </View>
  );
}

without margin bottom	with margin bottom

Library version

0.9.0

Environment info

System:
  OS: macOS 15.3.2
  CPU: (12) arm64 Apple M2 Pro
  Memory: 151.05 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.12.0
    path: ~/.volta/tools/image/node/22.12.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: ~/.volta/tools/image/npm/10.9.2/bin/npm
  Watchman:
    version: 2024.11.25.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/vcapretz/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.0
    wanted: 0.79.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. with expo router, create a tab layout
2. try to place an absolute button to the bottom, button is shown behind the tab

Reproducible sample code

import { Tabs } from "@/components/tabs";
import { NAV_THEME } from "@/components/theme";
import React from "react";
import { useColorScheme } from "react-native";

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      hapticFeedbackEnabled
      screenOptions={{
        tabBarActiveTintColor: NAV_THEME[colorScheme ?? "light"].primary,
      }}
    >
      <Tabs.Screen
        name="home"
        options={{
          title: "Home",
          tabBarIcon: () => ({ sfSymbol: "house" }),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explore",
          tabBarIcon: () => ({ sfSymbol: "person" }),
        }}
      />
    </Tabs>
  );
}


// for the screen
function HomeScreen() {
  const tabBarHeight = useBottomTabBarHeight();

  return (
    <View
      className="flex-1 justify-center px-5"
      style={{ marginBottom: tabBarHeight }} // without this, the button is below the tab bar
    >
      {Array(100)
        .fill(undefined)
        .map((_a, i) => (
          <Text key={i} className="text-2xl">
            test
          </Text>
        ))}
      <Button className="absolute right-0 bottom-0">
        <Text>action</Text>
      </Button>
    </View>
  );
}

[vcapretz]

btw, let me know if that's the expected behavior, I could create a wrapper or something that always adds the tab bar height offset, but I threw me off as this was not needed in react-navigation bottom tabs

[okwasniewski]

Hey @vcapretz,

Yeah, this is expected. Native bottom tabs always require using the useBottomTabBarHeight hook to place something above the tab bar. You have to do the same when you add blur to the JavaScript bottom tabs: https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarbackground

Native bottom tabs automatically offset the views on the bottom, but placing something as bottom: 0 places it under the tab bar (as expected).

[vcapretz]

@okwasniewski thank you very much for clarifying! ☺️