Scroll behavior inside a sheet

[mfreiwald]

What did you do?

I put the ChatChannelView inside a sheet (UIKit and SwiftUI sheets have the same behavior) with different presentationDetents (e.g. medium and large), but the scrolling/drag gesture doesn't react as usual.

There is an example video and project attached with a custom chat view which shows the desired behavior

What did you expect to happen?

When I'm at the bottom of the messages (newest messages) and scroll down again, the scrollview should bounce.

If I'm at the top of the scrollview (oldest messages) and try to scroll up, the sheet should go down in line with my finger.

What happened instead?

If I'm at the bottom (newest message) and try to scroll down (which is not possible because already at the bottom), the sheet gets also moved down (which is the opposite direction as my finger goes).

When the sheet is in the medium detent and I want to scroll up to older messages, the sheets get resized to large.

GetStream Environment

GetStream Chat version: 4.37.0 GetStream Chat frameworks: StreamChat, StreamChatSwiftUI iOS version: iOS 16 / iOS 17 Swift version: 5.8 / 5.9 Xcode version: 14.3.* / 15.0 Device: iPhone 14 Pro / iPhone 15 Pro

Additional context

My guess is the FlippedUpsideDown: ViewModifier inside of MessageListView.

Example project including a video of the problem: https://github.com/mfreiwald/ChatInASheet

[martinmitrevski]

Hey @mfreiwald,

This is a known issue, already reported here: https://github.com/GetStream/stream-chat-swiftui/issues/227. In a nutshell, you are correct in the assumption that it's caused by the flipped modifier.

If you can use it in UIKit context, you can use our StreamModalTransitioningDelegate, as described here https://github.com/GetStream/stream-chat-swift/issues/1307#issuecomment-1028036153.

A pure SwiftUI solution is not possible, since we don't have possibility to write custom navigation transitions. Therefore, in those cases we don't recommend using a sheet or detent until we can support this properly.

Hope this helps, Martin

[mfreiwald]

Hey @martinmitrevski, thanks for the quick reply. Didn't find the issues.

As visible in the demo video, the sheet should only be 2/3 of the screen height, possibly extending to a large detent. But this is not possible with our StreamModalPresentationController. Or you you already implemented something like that?

I just saw that this question already came up in the mentioned MR https://github.com/GetStream/stream-chat-swift/pull/1760#issuecomment-1238454980

[martinmitrevski]

Hey @mfreiwald,

Have you also tried with the modal transitioning delegate: https://github.com/GetStream/stream-chat-swift/blob/develop/Sources/StreamChatUI/ChatChannel/StreamModalTransitioningDelegate.swift? That should work for sheets, but I haven't tried detents.

If that doesn't work, then probably a custom drag-able view could be another option.

[mfreiwald]

Hey Martin, I tried it out, but it doesn't help to solve the features we need. So I created a custom sheet in SwiftUI 🙂 But thanks for your help!