Reaction Snapshot Overlay Mispositioned.

[kylelol]

Actual behaviour

I have a SwiftUI view with the following structure. On iPad I was to show the list of channels of the left 25% of the screen and the selected channel conversion on the right 75% of the screen:

    var body: some View {
        stackView
    }
    
    private var stackView: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                channelListView
                    .frame(width: geometry.size.width * 0.25)
                if let channel {
                    channelView(channel: channel)
                        .frame(width: geometry.size.width * 0.75)
                } else {
                    Text("No Conversation Selected")
                }
            }
        }
    }
    
    var channelListView: some View {
        StaffChatChannelListView(
            channelListController: chatClient.channelListController(
                query: ChannelListQuery(
                    filter: .and([
                        .containMembers(userIds: [chatClient.currentUserId ?? ""]),
                        .equal("student_status", to: true)
                    ])
                )
            )
        ) { channel in
            self.channel = channel
        }        
    }
    
    func channelView(channel: ChatChannel) -> some View {
        ChatChannelView(
            channelController: chatClient.channelController(
                for: channel.cid,
                messageOrdering: .topToBottom
            )
        )
        .id(channel.cid.rawValue)
    }

That renders the following screenshot:

However, whenever I hold to read on a message the snapshot and overlay get completely mispositioned:

Expected behaviour

I would expect the snapshot and overlays to be positioned correctly.

Steps to reproduce

1. Go to '...'
2. Tap on '...'
3. Scroll down to '...'
...

Which packages are you using?

No response

Which SDK version are you using?

4.76.0

Which iOS version is the issue reproducible?

iOS 18.4

Which iPhone Device is the issue reproducible?

iPad simulator

Which Xcode version are you using?

Xcode 16.2

[nuno-vieira]

Hello @kylelol,

Unfortunately, this is a known limitation at the moment. The context view is quite coupled with the view hierarchy. So, for now, you will need to replace and customize this view.

In order to properly fix this on our side without breaking change, it will most likely involve re-writing this view, so we don't have an ETA at the moment.

We will keep you posted once we have more details.

Best,
Nuno

[kylelol]

@nuno-vieira When you say replace and customize this view which part are you referring to specifically from the SDK?

[nuno-vieira]

Hi @kylelol,

You will need to provide your own view for ViewFactory.makeReactionsOverlayView()

Best,
Nuno

[kylelol]

@nuno-vieira Thanks, I assume that will include having to provide a view for the list of reactions / message actions?

[nuno-vieira]

Hi @kylelol,

Yes, exactly, unfortunately it will require rebuilding the whole view at the moment. Maybe you can try using the native contextMenu.

Please do let us know if you have any difficulties.

Best,
Nuno

[martinmitrevski]

You might also try changing the background:

public func makeReactionsBackgroundView(
        currentSnapshot: UIImage,
        popInAnimationInProgress: Bool
    ) -> some View {
          Color.black.opacity(0.3)
    }

Basically, instead of using the snapshot, to provide a transparent background.

Alternatively, you can even do an empty view that shows a menu or presentation detent, sth like this:

struct CustomReactionsContainer: View {
    
    @State var showDetent: Bool = false
    
    let messageDisplayInfo: MessageDisplayInfo
    var snapshot: UIImage
    var onBackgroundTap: () -> Void
    
    var body: some View {
        Color.clear.onAppear {
            showDetent = true
        }
        .sheet(isPresented: $showDetent, onDismiss: {
            onBackgroundTap()
        }, content: {
            CustomReactionOverlay(
                messageDisplayInfo: messageDisplayInfo,
                snapshot: snapshot,
                onBackgroundTap: onBackgroundTap
            )
            .presentationDetents([.height(height)])
        })
    }
    
    var height: CGFloat {
        if messageDisplayInfo.showsBottomContainer && !messageDisplayInfo.showsMessageActions {
            return 230
        } else {
            return 300
        }
    }
}

And then in the View Factory:

func makeReactionsOverlayView(
        channel: ChatChannel,
        currentSnapshot: UIImage,
        messageDisplayInfo: MessageDisplayInfo,
        onBackgroundTap: @escaping () -> Void,
        onActionExecuted: @escaping (MessageActionInfo) -> Void
    ) -> some View {
        CustomReactionsContainer(
            messageDisplayInfo: messageDisplayInfo,
            snapshot: currentSnapshot,
            onBackgroundTap: onBackgroundTap
        )
    }

Hope that helps, Martin

[kylelol]

Thanks I will give that a try