ReactionsOverlayView background and positioning issues when ChatChannelView is nested inside a TabView

[whitecl]

What did you do?

We're rendering ChatChannelView as a child of SwiftUI's TabView.

What happened instead?

When long-pressing a message to launch the reactions view, the background screenshot is taken with the the other elements of the VStack that wraps Tabview (see screenshot). I would not expect to see tabs in a view outside of ChatChannelView faded out in the background.

In addition, the Y positioning of the ReactionsOverlayView does not appear to be optimal based on the available frame that ChatChannelView exists in.

GetStream Environment

GetStream Chat version: 4.20.0 GetStream Chat frameworks: StreamChatSwiftUI iOS version: 15.5 Swift version: 5.6.1 Xcode version: 13.14.1 Device: iPhone 8 Plus Simulator

Additional context

[martinmitrevski]

Hey @whitecl,

Thanks for reporting this. We actually had a call with one of your engineers (Mikaela) about this issue. We have now exposed a way to customize the reactions background, so you can put any view you prefer here.

The usage is something like this:

public func makeReactionsBackgroundView(
        currentSnapshot: UIImage,
        popInAnimationInProgress: Bool
    ) -> some View {
        Image(uiImage: currentSnapshot)
            .overlay(Color.black.opacity(popInAnimationInProgress ? 0 : 0.1))
            .blur(radius: popInAnimationInProgress ? 0 : 4)
    }

Let us know how that works for you.

Best, Martin

[whitecl]

Thanks Martin! That is super helpful, and much better than the override we had in place previously.

We were overriding ViewFactory.makeReactionsOverlayView and passing our own currentSnapshot and messageDisplayInfo to override the background and positioning of the overlay message.

This gives us a path forward that is good enough for now.

Do you consider the demonstrated behavior of ChatChannelViewModel.showReactionOverlay - generating a snapshot - to be an improvable or customizable area? In my screenshot, the framing of the generated image doesn't work correctly, likely based on the context that we're using ChatChannelView in (a TabView).

[martinmitrevski]

Hey @whitecl,

Yes, you have a valid point here. Our snapshot generation is mostly applicable for a full screen chat view.

Therefore, we've exposed a way for you to customize the generation of a screenshot. That's already available on our main branch, so you can test it.

There's a new protocol called SnapshotCreator in the Utils class, which has one method: func makeSnapshot(for view: AnyView) -> UIImage. The default implementation is what we have already.

You can have your own implementation (the view passed in the method is the ChatChannelView), and you can use something like this example to generate a better snapshot.

In order to inject your own implementation, you will need to pass it like this:

let snapshotCreator = CustomSnapshotCreator()
let utils = Utils(snapshotCreator: snapshotCreator)
let streamChat = StreamChat(chatClient: chatClient, utils: utils)

Hope this helps. Martin

[whitecl]

Thanks Martin, that's helpful!