makeChannelHeaderViewModifier(for channel: ChatChannel) not being invoked?

[tciuro]

What did you do?

I have implemented a CustomFactory. I'm already customizing the ChatChannelView, which gets invoked fine in makeChannelDestination(). However, the custom ChannelHeaderView doesn't show. I followed the tutorial to customize the ChannelHeaderView, even using the exact code. However, the makeChannelHeaderViewModifier(for channel: ChatChannel) func doesn't get invoked.

I'm not sure what I'm missing here...

What did you expect to happen?

I expected the makeChannelHeaderViewModifier(for channel: ChatChannel) to be called, thus allowing my ChannelHeaderView to be displayed.

What happened instead?

The default UI is showing.

GetStream Environment

GetStream Chat version: 4.5.7
GetStream Chat frameworks: StreamChat, StreamChatSwiftUI: 4.57.0
iOS version: 17.2
Swift version: 5.10
Xcode version: 15.4
Device: Sim iPhone 15 Pro + iOS 17.2

Additional context

I followed this tutorial: https://getstream.io/chat/docs/sdk/ios/swiftui/swiftui-cookbook/custom-channel-header/

Code:

        CustomChannelListView(
            viewFactory: CustomFactory.shared,
            title: "Channels"
        )

import StreamChat
import StreamChatSwiftUI
import StreamChatUI
import SwiftUI

class CustomFactory: ViewFactory {
    @Injected(\.chatClient) public var chatClient

    private init() { }

    public static let shared = CustomFactory()

    func makeFileAttachmentView(
        for message: ChatMessage,
        isFirst: Bool,
        availableWidth width: CGFloat,
        scrolledId: Binding<String?>
    ) -> some View {
        FileAttachmentsContainer(factory: self, message: message, width: width, isFirst: isFirst, scrolledId: scrolledId)
    }
    
    func makeChannelDestination() -> (ChannelSelectionInfo) -> ChatChannelView<CustomFactory> {
        { [unowned self] selectionInfo in
            let controller = InjectedValues[\.utils]
                .channelControllerFactory
                .makeChannelController(for: selectionInfo.channel.cid)
            return ChatChannelView(
                viewFactory: self,
                channelController: controller,
                scrollToMessage: selectionInfo.message
            )
        }
    }
    
    func makeChannelHeaderViewModifier(for channel: ChatChannel) -> some ChatChannelHeaderViewModifier {
        CustomChatChannelModifier(channel: channel)
    }
}

import StreamChat
import SwiftUI
import StreamChatSwiftUI

/// View modifier for customizing the channel header.
public protocol ChatChannelHeaderViewModifier: ViewModifier {
    var channel: ChatChannel { get }
}

struct CustomChatChannelHeader: ToolbarContent {
    
    var channelName: String
    var onTapTrailing: () -> ()
    
    var body: some ToolbarContent {
        ToolbarItem(placement: .principal) {
            Text(channelName)
        }
        
        ToolbarItem(placement: .navigationBarTrailing) {
            Button {
                onTapTrailing()
            } label: {
                Image(systemName: "pencil")
                    .resizable()
            }
        }
    }
}

struct CustomChatChannelModifier: ChatChannelHeaderViewModifier {
    
    @State private var editShown = false
    var channel: ChatChannel
    
    func body(content: Content) -> some View {
        content.toolbar {
            CustomChatChannelHeader(channelName: channel.name ?? "Unknown") {
                editShown = true
            }
        }
        .sheet(isPresented: $editShown) {
            Text("Edit View")
        }
    }
}

[laevandus]

Hi @tciuro,

If you delete

/// View modifier for customizing the channel header.
public protocol ChatChannelHeaderViewModifier: ViewModifier {
    var channel: ChatChannel { get }
}

from your code then it will work. This protocol is defined in StreamChatSwiftUI and redefining the protocol in your app's module made the CustomChatChannelModifier to conform to <yourappmodule>.ChatChannelHeaderViewModifier and not to the StreamChatSwiftUI.ChatChannelHeaderViewModifier as required by the ViewFactory protocol.

Best,
Toomas

[tciuro]

Hello @laevandus!

Oh my! I can't believe I got stuck with these 3 lines. 😣 It totally works now. Thanks so much!