StreamChatSwiftUI - Channel List item not able to customise with function makeChannelListItem

Question

From Stream SwiftUI document on customising channel list item, it stated that we will be able to change the custom UI by calling function makeChannelListItem in viewFactory and replace the return view by custom view class.

But the app is still calling the default function instead of my custom function, which makes me cannot update the UI.

Here is the implementation of the function

    public func makeChannelListItem(
        channel: ChatChannel,
        channelName: String,
        avatar: UIImage,
        onlineIndicatorShown: Bool,
        disabled: Bool,
        selectedChannel: Binding<ChannelSelectionInfo?>,
        swipedChannelId: Binding<String?>,
        channelDestination: @escaping (ChannelSelectionInfo) -> CustomChannelDestination,
        onItemTap: @escaping (ChatChannel) -> Void,
        trailingSwipeRightButtonTapped: @escaping (ChatChannel) -> Void,
        trailingSwipeLeftButtonTapped: @escaping (ChatChannel) -> Void,
        leadingSwipeButtonTapped: @escaping (ChatChannel) -> Void
    ) -> some View {
            Text("Custom List Item")
        }

Anyone know why the function cannot be override?

Answer 1

Currently you should be not able to build with directly write ChannelDestination when you use your own ViewFactory extended CustomFactory

You need to do few steps for making the function to be exact same with ViewFactory to override it.

1. Add Custom Channel Destination to file

struct CustomChannelDestination: View {
        var channel: ChatChannel
        var body: some View {
            VStack {
                Text("This is the channel \(channel.name ?? "")")
            }
        }
    }

2. Call makeChannelDestination to create ChannelDestination View

func makeChannelDestination() -> (ChannelSelectionInfo) -> CustomChannelDestination {
        { selectionInfo in
            CustomChannelDestination(channel: selectionInfo.channel)
        }
    }

3. Finally update channel destination in makeChannelListItem

public func makeChannelListItem(
        channel: ChatChannel,
        channelName: String,
        avatar: UIImage,
        onlineIndicatorShown: Bool,
        disabled: Bool,
        selectedChannel: Binding<ChannelSelectionInfo?>,
        swipedChannelId: Binding<String?>,
        channelDestination: @escaping (ChannelSelectionInfo) -> CustomChannelDestination,
        onItemTap: @escaping (ChatChannel) -> Void,
        trailingSwipeRightButtonTapped: @escaping (ChatChannel) -> Void,
        trailingSwipeLeftButtonTapped: @escaping (ChatChannel) -> Void,
        leadingSwipeButtonTapped: @escaping (ChatChannel) -> Void
    ) -> some View {
[YOUR CUSTOM VIEW]
}

The main point here is to init ViewFactory ChannelDestination.

Whole Code:

> class ChatCustomUIFactory: ViewFactory {
>     
>     @Injected(\.chatClient) public var chatClient
>     @Injected(\.utils) private var utils
> 
>     init() {}
> 
>     public func makeChannelListItem(
>         channel: ChatChannel,
>         channelName: String,
>         avatar: UIImage,
>         onlineIndicatorShown: Bool,
>         disabled: Bool,
>         selectedChannel: Binding<ChannelSelectionInfo?>,
>         swipedChannelId: Binding<String?>,
>         channelDestination: @escaping (ChannelSelectionInfo) -> CustomChannelDestination,
>         onItemTap: @escaping (ChatChannel) -> Void,
>         trailingSwipeRightButtonTapped: @escaping (ChatChannel) -> Void,
>         trailingSwipeLeftButtonTapped: @escaping (ChatChannel) -> Void,
>         leadingSwipeButtonTapped: @escaping (ChatChannel) -> Void
>     ) -> some View { [Custom View]
>         }
> 
>     func makeChannelDestination() -> (ChannelSelectionInfo) -> CustomChannelDestination {
>         { selectionInfo in
>             CustomChannelDestination(channel: selectionInfo.channel)
>         }
>     }
>     
>     struct CustomChannelDestination: View {
>         var channel: ChatChannel
>         var body: some View {
>             VStack {
>                 Text("This is the channel \(channel.name ?? "")")
>             }
>         }
>     } }