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.

To view the image in full screen, click on the

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.

To view the image in full screen, click on the

The basic architecture of a module constitutes the following properties:

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.

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.

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

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.

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.

To view the image in full screen, click on the

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.

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) {
            guard let emptyView = emptyView as? SBUEmptyView else { return }

            // Update the value of `isOverlay` of `emptyView`.
            emptyView.isOverlay = {YOUR_FLAG}

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

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

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.

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