Sendbird UIKit for React Native is a set of prebuilt UI components that allows you to easily craft an in-app chat with all the essential messaging features. Our development kit includes light and dark themes, fonts, colors and more. You can customize these components to create an interactive messaging interface unique to your brand identity.
Sendbird UIKit for React Native only supports group channels. Follow the guide below to start sending a message from scratch using
The minimum requirements for UIKit for React Native are:
React 16.13.1 or higher
React-Native 0.63.3 or higher
Before installing Sendbird Chat SDK, you need to create a Sendbird application on Sendbird Dashboard, which comprises everything required in a chat service including users, messages, and channels. You will need the Application ID of your Sendbird application from the dashboard when initializing the Chat SDK.
Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
You can start building a messaging experience in your app by installing Sendbird UIKit. This developer kit is an add-on feature to Sendbird Chat SDK so installing it will also install the core Chat SDK.
To get started, create a new project using
React Native CLI.
You can install UIKit for React through
npm. Enter the following code on the command line with
Note: Make sure to install each native module separately.
Regardless of which native module you choose to build your app with, you need to implement the platform service interfaces that we provide in order to use the native APIs and features. Each interface comes with a set of methods and helper functions. Based on the interface, you can create a new class that includes the corresponding methods and implement them in UIKit. Then, you can use the helper functions to set the interface in the individual modules. To do so, pass the module as a parameter in the helper function.
Some of the features provided by Sendbird UIKit include attaching or saving media files and sending file messages. To learn more about using these features, refer to the get native module permission page.
Note: If you wish to use your own existing native modules, go to the native modules page.
You can now wrap your app in
SendbirdUIKitContainer to run it. It's a context provider container that passes the data from Chat SDK down to the child components.
You need to install a navigation library in order to let users transition between multiple screens. In React Native, there are several different types of navigation libraries you can use to create a navigation structure. Sendbird UIKit uses React navigation. See the code below on how to install the library.
You can now create a fragment and the module components to build the UI of the screen.
GroupChannelListFragment is the starting point for launching UIKit in your app. Then, you need to build
GroupChannelFragment in order to create and join a new group channel. Implement the codes below.
Once a fragment is created and the navigation props are set, you need to register the screen to a navigation library. This allows users to switch between the different screens.
Note: If you wish to integrate with a different navigation library, go to the screen navigation page.
useConnection() hook to connect a user to the Sendbird server.
You can now run the app on a device. To send a message, you must first create a group channel by tapping the icon in the top-right corner. Then, you can select users you wish to invite as members to your channel. Once the channel has been created, enter your first message and send.
You've successfully sent your first message with Sendbird.