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

[Valwars]

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

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!

[ngdbao]

TrueSheet renders natively at the window level, so it sits over the tab bar.
I'm on V3 and still looking for the solutions.