Customizing Components

The SwiftUI SDK components are fully customizable and interchangeable through the ViewFactory protocol that holds all the reusable views of the SDK. You can find the full reference of the ViewFactory protocol here.

View Factory

The ViewFactory protocol defines the swappable views of the chat experience. There are default implementations for all the views used in the SDK. If you want to customize a view, you will need to implement the ViewFactory protocol, but only implement the view you want to swap.

In most cases, your custom view only needs to conform to the standard SwiftUI View protocol and provide a body property, there's no need to implement additional lifecycle methods or protocols. The only exception is when customizing the navigation bar, where your custom view must conform to SwiftUI's ToolbarContent protocol.

Options-Based API

All ViewFactory methods accept a single Options struct instead of individual parameters. Each Options struct groups together all the data and callbacks needed to create that view. This design makes it easy to add new parameters in future releases without breaking your existing implementations.

For example, if you want to change the default user avatar view that is used in multiple views, you implement the makeUserAvatarView(options:) slot in the ViewFactory protocol:

class CustomFactory: ViewFactory {

    @Injected(\.chatClient) public var chatClient

    public var styles = RegularStyles()

    private init() {}

    public static let shared = CustomFactory()

    func makeUserAvatarView(options: UserAvatarViewOptions) -> some View {
        CustomUserAvatarView(
            user: options.user,
            size: options.size
        )
    }
}

Afterwards, you need to inject the CustomFactory in your view. To do this, you pass the newly created factory to the ChatChannelListView. If you are only using the ChatChannelView, you can pass the factory to it instead.

var body: some Scene {
    WindowGroup {
        ChatChannelListView(viewFactory: CustomFactory.shared)
    }
}

And that's everything needed to provide custom views for the SwiftUI SDK.

Styles

In addition to ViewFactory, the SDK provides a Styles protocol that controls the overall look and layout of key UI surfaces. Every ViewFactory has a styles property that you can set to control styling independently from view swapping.

The two built-in implementations are:

To use a particular style, set the styles property on your factory:

class CustomFactory: ViewFactory {

    @Injected(\.chatClient) public var chatClient

    public var styles = LiquidGlassStyles()

    private init() {}

    public static let shared = CustomFactory()
}

You can also create your own custom Styles implementation to override specific parts:

class CustomStyles: Styles {
    var composerPlacement: ComposerPlacement = .docked

    func makeComposerInputViewModifier(options: ComposerInputModifierOptions) -> some ViewModifier {
        MyInputModifier()
    }

    func makeComposerButtonViewModifier(options: ComposerButtonModifierOptions) -> some ViewModifier {
        MyButtonModifier()
    }

    func makeScrollToBottomButtonModifier(options: ScrollToBottomButtonModifierOptions) -> some ViewModifier {
        MyScrollToBottomModifier()
    }

    func makeComposerViewModifier(options: ComposerViewModifierOptions) -> some ViewModifier {
        MyComposerBackgroundModifier()
    }

    func makeSuggestionsContainerModifier(options: SuggestionsContainerModifierOptions) -> some ViewModifier {
        MySuggestionsModifier()
    }

    func makeSearchableModifier(options: SearchableModifierOptions) -> some ViewModifier {
        DefaultSearchableModifier(
            searchText: options.searchText,
            prompt: "Search"
        )
    }
}

The full list of Styles hooks includes:

• makeComposerInputViewModifier – modifier applied to the composer text input area.
• makeComposerButtonViewModifier – modifier applied to composer action buttons.
• makeScrollToBottomButtonModifier – modifier applied to the scroll-to-bottom button.
• makeComposerViewModifier – modifier applied to the whole composer container.
• makeSuggestionsContainerModifier – modifier applied to the suggestions overlay.
• makeChannelListContentModifier – modifier for the full channel list content area.
• makeChannelListModifier – modifier applied to the channel list itself.
• makeSearchableModifier – modifier applied to built-in search UI such as the channel list search.
• makeMessageListModifier – modifier applied to the message list.
• makeMessageListContainerModifier – modifier applied to the message list container.
• makeMessageViewModifier – modifier applied to each individual message bubble.
• makeMessageAttachmentsViewModifier – modifier applied to the outer view that wraps a message's attachment stack.
• makeMessageAttachmentItemViewModifier – modifier applied to file, voice, link, image, video, and quoted-message reference bubbles. For quoted-message references, MessageAttachmentItemViewModifierOptions.attachmentType is nil.
• makeBouncedMessageActionsModifier – modifier for bounced-message action UI.

Complete ViewFactory reference

Below is the full list of ViewFactory hooks, grouped by area. Expand a section to see all available slots. You can also browse the full source here.

Accessing Dependencies

When building your own view components and you want to use the dependencies of the SwiftUI SDK, you can access them by using the @Injected(\.keyPath) property wrapper:

@Injected(\.chatClient) var chatClient
@Injected(\.colors) var colors
@Injected(\.fonts) var fonts
@Injected(\.images) var images
@Injected(\.utils) var utils

Extending with Custom Types

In some cases, you might also need to extend the @Injected property wrapper with your own types. For example, you may want to be able to access your custom types like this:

@Injected(\.customType) var customType

In order to achieve this, you first need to define your own InjectionKey, and define it's currentValue, which basically creates the new instance of your type.

class CustomType {
	// your custom logic here
}

struct CustomInjectionKey: InjectionKey {
    static var currentValue: CustomType = CustomType()
}

Next, you need to extend our InjectedValues with your own custom type, by defining its getter and setter.

extension InjectedValues {
    /// Provides access to the `CustomType` instance in the views and view models.
    var customType: CustomType {
        get {
            Self[CustomInjectionKey.self]
        }
        set {
            Self[CustomInjectionKey.self] = newValue
        }
    }
}

With these few simple steps, you can now access your custom type in both your app code and in your custom implementations of the views used throughout the SDK.

Build Time Improvements

If you are customizing many view slots (over 15) from the SDK, and you have many generics in your codebase, it's a good idea to explicitly specify the types of your custom views with typealias. This will improve the build time of your project.

For example, in our ViewFactory, the associatedType for creating the empty channels view is EmptyChannels:

associatedtype EmptyChannels: View
func makeEmptyChannelsView(options: EmptyChannelsViewOptions) -> EmptyChannels

In order to improve the build time, you would need to specify the associated type with a typealias, like this:

typealias EmptyChannels = CustomEmptyChannelsView

Then, your custom implementation of the factory method makeEmptyChannelsView will look like the following:

public func makeEmptyChannelsView(options: EmptyChannelsViewOptions) -> CustomEmptyChannelsView {
    CustomEmptyChannelsView()
}

You can find all the associated types we use in the ViewFactory here.