For every key function, there's a fragment that represents the entire screen. A fragment is made up of a module, context, and hook. The fragment uses a module to build and display the UI of the view. Each module is composed of several components, which combined together, make up a single screen. You can customize the view on a component-level, allowing you to easily make small style changes.
A fragment also contains a hook and context, which retrieve data from the Chat SDK and send them to the provider of the module and the props of the module components. Using this data, the module and its components build a view of the fragment for the corresponding key function.
Create a fragment and build a view
There's a create method for every key function that generates a default fragment in UIKit for React Native. The method contains other functions that allow you to initialize the module and props.
Once a default fragment in Sendbird UIKit is created, you can build a screen using the module components and connect the screen to the client app's navigator.
You can replace the default module components or properties of the module with your own custom components by passing the custom module component or property as a parameter in the create fragment method.
Customize a fragment
While Sendbird UIKit provides a default fragment, you can create a custom fragment by using the interfaces to build your own modules and hooks. If you wish to customize the fragment, you can render your own module components in the fragment in addition to the default components that UIKit offers. See the code below on how to customize a fragment in a key function and render your own module component.
You can also customize a fragment in a key function by re-using modules. See the example below on how to use
UserListModule to create a custom fragment that shows a list of friends.