[🐛] 🔥 Attachment picker sheet covers the entire chat when rendered inside a collapsed container

[jakubdrozdek]

Issue

In my app, the <OverlayProvider> and <Chat> are initially rendered within a container that has height: 0 (collapsed state). Users can expand the container by pressing a button, which sets a different height for the container. When the user expands the container, the attachment picker sheet is rendered over the entire chat and covers it entirely, even though it's empty.

Steps to reproduce

Steps to reproduce the behavior:

1. Render the chat within a collapsed container (with height: 0). Let it initialize by connecting the user, and loading messages.
2. Click on a button that triggers the expansion of the container, resulting in the container to get height > 0.
3. Notice that the chat contents are hidden beneath the attachment picker sheet. The sheet is empty but it covers the entire chat area.
4. You can drag-to-close the attachment picker to reveal the chat contents.

Expected behavior

The attachment picker sheet should not be rendered in this case, as nothing triggered it to be opened.

Project Related Information

Customization

Click To Expand

(The same issue occurs when I use the default components.)

# N/A

Offline support

• [ ] I have enabled offline support.
• [ ] The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

{
  "dependencies": {
    "expo": "~50.0.13",
    "expo-apple-authentication": "~6.3.0",
    "expo-application": "~5.8.3",
    "expo-av": "~13.10.5",
    "expo-build-properties": "~0.11.1",
    "expo-camera": "~14.1.1",
    "expo-constants": "~15.4.5",
    "expo-datadog": "^50.1.0",
    "expo-dev-client": "~3.3.10",
    "expo-device": "~5.9.3",
    "expo-file-system": "~16.0.8",
    "expo-font": "~11.10.3",
    "expo-image-manipulator": "~11.8.0",
    "expo-image-picker": "~14.7.1",
    "expo-keep-awake": "~12.8.2",
    "expo-linking": "~6.2.2",
    "expo-localization": "~14.8.3",
    "expo-media-library": "~15.9.1",
    "expo-notifications": "~0.27.6",
    "expo-router": "~3.4.8",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.73.5",
    "react-native-reanimated": "^3.8.1",
    "react-native-svg": "14.1.0",
    "react-native-svg-transformer": "^1.3.0",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-tab-view": "^3.5.2",
    "stream-chat": "8.17.0",
    "stream-chat-expo": "^5.26.0",
  },
}

react-native info output:

System:
  OS: macOS 14.4
  CPU: (8) arm64 Apple M1
  Memory: 75.20 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
    System Images:
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.5
    wanted: 0.73.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

• Platform that you're experiencing the issue on:
  • [ ] iOS
  • [ ] Android
  • [x] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• stream-chat-react-native version you're using that has this issue:
  • 5.26.0
• Device/Emulator info:
  • [ ] I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

The bug doesn't happen when the container's height is positive on the initial render (in other places of our app).

Screenshots

Click To Expand

https://github.com/GetStream/stream-chat-react-native/assets/30927218/fdc7260c-67b8-49e7-9e62-535f87eaa778

---

[khushal87]

Hey @jakubdrozdek, we made some good improvements to our bottom sheet implementation in v5.28.1 version of our SDK. Can you test it and let us know if it is still a problem for you? We will investigate further if it still exists.

[khushal87]

Hey @jakubdrozdek, did you try the above?

[jakubdrozdek]

@khushal87 Thanks for the info. We've made a few temporary customizations and UI optimizations so the tests with the newest version might give inaccurate results. We have plans to revert some of those optimizations and try to rely on GetStream SDK alone. Once we're done, I'll let you know.

[khushal87]

Sure, I will close the issue until then. Feel free to reopen if you see any problems and we can look further. Thanks @jakubdrozdek 😄