Rendering inside a `TabView` (`react-native-tab-view`) breaks safe area and gives a warning

[MonsterDeveloper]

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

When rendering a TrueSheet from a TabView using react-native-tab-view, the following error occurs:

[UIKitCore] Presenting view controller <TrueSheet.TrueSheetViewController: 0x11b03e400> from detached view controller <UIViewController: 0x119e53db0> is not supported, and may result in incorrect safe area insets and a corrupt root
presentation. Make sure <UIViewController: 0x119e53db0> is in the view controller hierarchy before presenting from it. Will become a hard exception in a future release.

As the message suggests, the SafeAreaView also breaks and doesn't correctly set the bottom inset.

---

Library version

2.0.5

Environment info

info Fetching system and libraries information... System: OS: macOS 15.5 CPU: (12) arm64 Apple M2 Pro Memory: 175.09 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 22.12.0 path: ~/.local/state/fnm_multishells/89272_1748357710080/bin/node Yarn: version: 1.22.22 path: ~/.bun/bin/yarn npm: version: 10.9.0 path: ~/.local/state/fnm_multishells/89272_1748357710080/bin/npm Watchman: version: 2025.04.28.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: Not Found Xcode: version: 16.3/16E140 path: /usr/bin/xcodebuild Languages: Java: Not Found 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: Not found newArchEnabled: Not found iOS: hermesEnabled: true newArchEnabled: true

Steps to reproduce

Minimal reproduction:

import { TrueSheet } from "@lodev09/react-native-true-sheet"
import { useRef, useState } from "react"
import { Button, Text, View, useWindowDimensions } from "react-native"
import { SceneMap, TabView } from "react-native-tab-view"

function Route() {
  return (
    <View>
      <Text>123</Text>
      <Sheet />
    </View>
  )
}

const renderScene = SceneMap({
  first: Route,
  second: Route,
})

const routes = [
  { key: "first", title: "First" },
  { key: "second", title: "Second" },
]

export default function TabViewExample() {
  const layout = useWindowDimensions()
  const [index, setIndex] = useState(0)

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  )
}

const Sheet = () => {
  const sheet = useRef<TrueSheet>(null)

  // Present the sheet ✅
  const present = async () => {
    await sheet.current?.present()
    console.log("horray! sheet has been presented 💩")
  }

  // Dismiss the sheet ✅
  const dismiss = async () => {
    await sheet.current?.dismiss()
    console.log("Bye bye 👋")
  }

  return (
    <View>
      <Button onPress={present} title="Present" />
      <TrueSheet ref={sheet} sizes={["auto", "large"]} cornerRadius={24}>
        <Button onPress={dismiss} title="Dismiss" />
      </TrueSheet>
    </View>
  )
}

Reproducible example repository

https://github.com/MonsterDeveloper/true-sheet-tab-view-bug-repro

[admcodemize]

Thanks for posting. Having the same warning message. Are there any news?

[lodev09]

Can you update your repro using v3? I'll check it out! thank you!