How to Customize Views in Group Channel Input

[lookdeceline]

Question

How do we customize a view component in Group Channel Input component?

Answer

You can use InputItem view adaptor to customize the Views in Group Channel Input.
The below code snippet customizes the visual style of the add button, which is the button on the left side of the Group Channel Input component.
See Result below to see the code in action.

// Inside your View's Body

GroupChannelView(
    provider: GroupChannelViewProvider(
        channelURL: {CHANNEL_URL},
        startingPoint: {STARTING_POINT},
        messageListParams: {MESSAGE_LIST_PARAMS}
    ),
    inputItem: {
        .init()
        .addButton { viewConfig in
            Button {
                // default action is automatically applied
            } label: {
                VStack {
                    Image(systemName: "plus.circle")
                        .resizable()
                        .frame(
                            width: viewConfig.buttonSize.width,
                            height: viewConfig.buttonSize.width
                        )
                        .foregroundStyle(Color.pink)
                        .background(
                            Circle()
                                .frame(width: viewConfig.buttonSize.width)
                                .foregroundStyle(Color.pink.opacity(0.3))
                        )
                }
                .frame(height: viewConfig.buttonSize.height)
            }
        }
    }
    
)

Result