Skip to content

FullWindowOverlay gets in the way of element inspector #272

@SpasiboKojima

Description

@SpasiboKojima

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

Beta 13 now puts FullWindowOverlay seemingly on every page when you use BottomSheet on at least one of them. As far as I know, this makes it really impossible to use element inspector on anything on the page, event when the sheet is closed.
Trying this on Expo 55.0.0-preview.5 with their new default template.

Library version

1.0.0-beta.13

Environment info

System:
  OS: macOS 26.2
  CPU: (14) arm64 Apple M4 Pro
  Memory: 3.01 GB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:                                                                                            Node:
    version: 22.19.0
    path: /Users/andreikatsevich/.nvm/versions/node/v22.19.0/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/andreikatsevich/.nvm/versions/node/v22.19.0/bin/yarn
  npm:
    version: 10.9.3
    path: /Users/andreikatsevich/.nvm/versions/node/v22.19.0/bin/npm
  Watchman:
    version: 2025.10.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":                                                                       installed: 20.1.1
    wanted: ^20.1.1
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.1
    wanted: 0.83.1
  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. Have a simple BottomSheet rendered on a page, like this:
    <BottomSheet>
      <BottomSheet.Trigger asChild>
        <Button>Open</Button>
      </BottomSheet.Trigger>
      <BottomSheet.Portal>
        <BottomSheet.Overlay />
        <BottomSheet.Content>
          <View className='flex-row items-center justify-between px-4'>
            <BottomSheet.Title>Select Theme</BottomSheet.Title>
            <BottomSheet.Close />
          </View>
        </BottomSheet.Content>
      </BottomSheet.Portal>
    </BottomSheet>
  1. Open Expo Dev tools -> Toggle element inspector
  2. Try to inspect anything on the page

Reproducible example repository

https://github.com/SpasiboKojima/heroui-13-test

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions