UIKit iOS v3
UIKit iOS
UIKit
iOS
Home
/
UIKit
/
iOS
This is the new Docs for UIKit v3 for iOS. To see the previous Docs, click here.

Modules

A module is a class that exists in every key function provided by Sendbird UIKit. Each module is composed of multiple components, also referred to as module components, that makes up a view. The corresponding view controller in a key function uses these components to create and display an interactive UI.


Modularization data flow

A component uses a delegate to send events to its corresponding view controller. It also has a data source object that gathers data needed to implement the component and update the view from the view controller.

The basic architecture of a module constitutes the following properties:

Module

In every key function, there's a module, which is composed of several components. The view controller can use any of these components along with data from a view model to create a functional view.

Component

A component, also referred to as module component, is what allows the view controller to build the view. It's written as a {MODULE_TYPE}.{COMPONENT_TYPE} property in the code as every component is part of a module. To initialize the configure method of the component, the loadView() method of the view controller will be called.

Component delegate

The view controller can receive all events that occur in a component through a delegate.

Component DataSource

A data source is used to access objects, such as data needed to update the view or implement the component, from a view controller.

To learn about the overall architecture of Sendbird UIKit, see the Key functions page.


Component life cycle

Every module component in Sendbird UIKit follows the same component life cycle to configure, implement, and update a view. It's a specific Sendbird UIKit life cycle that only apply to components and works in accordance with Apple's UIKit life cycle, meaning the methods are called at a set timing as shown in the image below.

When the configure method of a component is called, the interfaces of the component view life cycle are called to start building a view. The following table lists all the interfaces in the life cycle.

InterfaceDescription

configure(delegate:dataSource:theme:)

Configures the component. Depending on the component, there may not be a delegate or a DataSource parameter. In that case, there may be other required parameters. This method calls the setup methods listed below.

setupViews()

Sets the value of view properties used to implement the component and sets the hierarchy of subviews in the component.

setupLayouts()

Sets the layout of all the components in a view.

setupStyles(theme:)

Sets the style of a component, such as color and font. For certain components, there is a componentTheme parameter.

updateLayouts()

Updates the layout of the components and calls the setupLayouts() method again.

updateStyles(theme:)

Updates the style of a component and calls the setupStyles() method again. For certain components, there is a componentTheme parameter.

If you wish to override updateStyles(theme:) to customize the style of the component, you should call the super.updateStyles(theme:) method first before calling the setupStyles() method to update the style of each view property. Refer to the code below.

// `SBUOpenChannelModule.List` is used an example below.
// For some components that have an overlay style, you need to update the value of `isOverlay` before calling the `super` method.
override func updateStyles(theme: SBUChannelTheme? = nil, componentTheme: SBUComponentTheme) {
    // Update the value of `isOverlay` of `emptyView`.
    emptyView.isOverlay = {updated value}

    // Call the `super` method.
    super.updateStyles(theme: theme, componentTheme: componentTheme)

    // Call `setupStyles` of `emptyView`.
    emptyView.setupStyles()
}

Corresponding modules for key functions

In Sendbird UIKit, there is one view controller per key function and in each view controller, there is one module that contains multiple components. If you wish to create your own custom view controller, you can do so by using different components. Instead of using the set module in the view controller provided by our development kit, you can mix and match components of different modules to make your own view.

Key functionModuleComponent

List channels

SBUGroupChannelListModule

Header, List

Chat in a group channel

SBUGroupChannelModule

Header, List, Input

Chat in an open channel

SBUOpenChannelModule

Header, List, Input, Media

Create a group channel

SBUCreateChannelModule

Header, List

Invite users

SBUInviteUserModule

Header, List

Register members as operator

SBURegisterOperatorModule

Header, List

Register participants as operator

SBURegisterOperatorModule

Header, List

List users in a group channel

SBUUserListModule

Header, List

List users in an open channel

SBUUserListModule

Header, List

Configure group channel settings

SBUGroupChannelSettingsModule

Header, List

Configure open channel settings

SBUOpenChannelSettingsModule

Header, List

Moderate group channels and members

SBUModerationsModule

Header, List

Moderate open channels and participants

SBUModerationsModule

Header, List

Search messages

SBUMessageSearchModule

Header, List

Note: To learn more about each component go to the individually linked API reference page in the table.