Navbar (Expo Router) always appears beneath TrueSheet – zIndex/elevation ignored

[Valwars]

Before submitting a new issue

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

Bug summary

On Expo SDK 49 (RN 0.72) with @lodev09/react-native-true-sheet ^1.3.0,
any sheet always renders above my custom tab-bar (built with Expo Router / @react-navigation/bottom-tabs).
Changing zIndex or elevation on the tab-bar has no effect.

Adding FullWindowOverlay around my navbar solves the problem for iOS, but there's no way of getting a similar rendering on android. I've also tried using portals, with no convincing results.

Library version

2.0.5

Environment info

System: OS: macOS 15.4.1 CPU: (12) arm64 Apple M4 Pro Memory: 769.30 MB / 24.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 23.11.0 path: /opt/homebrew/bin/node Yarn: Not Found npm: version: 10.9.2 path: /opt/homebrew/bin/npm Watchman: Not Found Managers: CocoaPods: version: 1.16.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 24.2 - iOS 18.2 - macOS 15.2 - tvOS 18.2 - visionOS 2.2 - watchOS 11.2 Android SDK: Not Found IDEs: Android Studio: 2024.3 AI-243.25659.59.2432.13423653 Xcode: version: 16.2/16C5032a path: /usr/bin/xcodebuild Languages: Java: version: 17.0.15 path: /opt/homebrew/opt/openjdk@17/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: Not Found react-native: Not Found react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Steps to reproduce

1. Create the project
2. Add the code

app/_layout.tsx

import { Tabs } from 'expo-router';
import TabBar from '../components/TabBar';

export default function Root() {
  return (
    <Tabs tabBar={(p) => <TabBar {...p} />}>
      <Tabs.Screen name="(tabs)/home" options={{ headerShown: false }} />
    </Tabs>
  );
}

components/TabBar.tsx

import { View, Text } from 'react-native';

export default function TabBar() {
  return (
    <View
      style={{
        position: 'absolute',
        bottom: 30,
        alignSelf: 'center',
        padding: 16,
        borderRadius: 80,
        backgroundColor: 'white',
        zIndex: 9_999,
        elevation: 50,
      }}
    >
      <Text>Tab bar</Text>
    </View>
  );
}

app/(tabs)/home.tsx

import { useRef } from 'react';
import { View, Button } from 'react-native';
import { TrueSheet } from '@lodev09/react-native-true-sheet';

export default function Home() {
  const sheet = useRef<TrueSheet>(null);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open" onPress={() => sheet.current?.present()} />

      <TrueSheet ref={sheet} sizes={['auto', 'large']}>
        <View style={{ height: 300, backgroundColor: '#eee' }} />
      </TrueSheet>
    </View>
  );
}

Reproducible example repository

https://github.com/lodev09/react-native-true-sheet

[marijang]

+1

[dertuman]

I'm also facing this issue, could not get it behind the tab bar at all no matter what. I've tried gorhom, then react-native-actions-sheet , and now this library and they all have some issue or another. Gorhom had the best API, but unfortunately it has broken my app, the app is totally slowed down I believe the library has issues with memory leaks. But this problem in this library is the only thing stoppijng me from being able to migrate :(

[dithanurcahya]

up on this one @lodev09

[Valwars]

Hello, the only way I found for Android was to use a Gorhom bottom for this use case.

[dithanurcahya]

Hello, the only way I found for Android was to use a Gorhom bottom for this use case.

Oh no😭 got it, thanks for the update anyway!

[lodev09]

Can you provide repro and use the new v3? I'll check it out. Thanks!