[expo-ui] BottomSheet

[MateuszLeo]

Minimal reproducible example

https://github.com/MateuszLeo/expo-sheet-example

Steps to reproduce

🐛 BottomSheet

Screen.Recording.2025-05-22.at.22.55.30.mov

Summary

When using the @expo/ui BottomSheet component (from @expo/ui/src/swift-ui/BottomSheet), the component itself should not consume space or render any visible frame. Only its children should render inside the SwiftUI-backed sheet.

Currently, it seems the BottomSheet component might be influencing layout or not behaving as expected — it's unclear if it's fully invisible or if it's affecting the parent view’s layout.

---

🔍 Code Example

import { BottomSheet } from "@expo/ui/src/swift-ui/BottomSheet";
import { useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";

export default function HomeScreen() {
  const [isOpen, setIsOpen] = useState(false);
  const [height, setHeight] = useState(0);

  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <View
        onLayout={(event) => {
          const { height } = event.nativeEvent.layout;
          setHeight(Math.floor(height));
        }}
        style={{
          backgroundColor: "pink",
          position: "relative",
        }}
      >
        <Text style={{ position: "absolute", top: 0, left: 0 }}>
          The `BottomSheet` component takes {height}px when declared. It should
          be invisible and not occupy any layout space. Only its children should be visible,
          rendered inside the native SwiftUI sheet.
        </Text>

        <TouchableOpacity
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            zIndex: 1,
          }}
          onPress={() => setIsOpen(true)}
        >
          <Text>Open Bottom Sheet</Text>
        </TouchableOpacity>

        <BottomSheet
          isOpened={isOpen}
          onIsOpenedChange={(isOpened: boolean) => setIsOpen(isOpened)}
        >
          <View
            style={{
              height: height || 300,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "white",
            }}
          >
            <Text>Hello, world!</Text>
          </View>
        </BottomSheet>
      </View>
    </View>
  );
}


### Environment

```text
expo-env-info 1.3.3 environment info:
    System:
      OS: macOS 15.4.1
      Shell: 4.0.2 - /opt/homebrew/bin/fish
    Binaries:
      Node: 22.13.1 - ~/.volta/tools/image/node/22.13.1/bin/node
      npm: 10.9.2 - ~/.volta/tools/image/node/22.13.1/bin/npm
    Managers:
      CocoaPods: 1.16.2 - /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
    IDEs:
      Android Studio: 2024.3 AI-243.24978.46.2431.13208083
      Xcode: 16.3/16E140 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~53.0.9 => 53.0.9
      expo-router: ~5.0.6 => 5.0.7
      react: 19.0.0 => 19.0.0
      react-dom: 19.0.0 => 19.0.0
      react-native: 0.79.2 => 0.79.2
      react-native-web: ~0.20.0 => 0.20.0
    Expo Workflow: managed

Expo Doctor Diagnostics

ok

[aleqsio]

@Kudo I think we lost position: absolute on the bottomsheet – https://github.com/expo/expo/pull/35455/files#diff-cc0a2dcb07bebdccecb5a2708557a14d040455b6e170974333a3c59fd93458a3R29

[MateuszLeo]

@aleqsio Is this the only way to fix it in Expo/React Native? I'm assuming it's necessary due to how React Native views are rendered. Is there any way to render only the bottom sheet without needing an additional wrapping view?

[aleqsio]

I think adding the position absolute style back in is a sufficient solution – yoga will not adjust container size based on sheet contents, and sheet contents will still render correctly.