UIKit React Native v3

UIKit React Native

UIKit

React Native

Version 3

Home

UIKit

React Native

Send your first message

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 Typescript or Javascript.

Requirements

The minimum requirements for UIKit for React Native are:

React 16.13.1 or higher
React-Native 0.63.3 or higher
Sendbird Chat SDK for Javascript 4.3.0 or higher

Before you start

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.

Get started

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 Chat SDK.

Step 1 Create a project

To get started, create a new project using React Native CLI.

npx react-native init ChatApp

Step 2 Install UIKit and the required dependencies

You can install UIKit for React Native through npm. Enter the following code on the command line with npm or yarn.

npm install @sendbird/uikit-react-native \
            @sendbird/chat \
            date-fns \
            react-native-safe-area-context \
            @react-native-community/netinfo \
            @react-native-async-storage/async-storage

Step 3 Install native modules

In order to access native APIs that are not available in JavaScript, you need to use native modules within your React Native application. There are many native modules available for open source that you can use to create your app with. For this reason, Sendbird UIKit is built so that there isn't a dependency on a specific type of native module.

npm install react-native-video \
            react-native-permissions \
            react-native-file-access \
            react-native-image-picker \
            react-native-document-picker \
            react-native-create-thumbnail \
            @react-native-clipboard/clipboard \
            @react-native-camera-roll/camera-roll \
            @react-native-firebase/app \
            @react-native-firebase/messaging \
            @bam.tech/react-native-image-resizer

npx pod-install

Installation guide

Refer to the installation guide for each native module below.

Step 4 Implement platform service interfaces using native modules

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.

import {
    createNativeClipboardService,
    createNativeFileService,
    createNativeMediaService,
    createNativeNotificationService,
} from '@sendbird/uikit-react-native';

import Clipboard from '@react-native-clipboard/clipboard';
import { CameraRoll } from '@react-native-camera-roll/camera-roll';
import RNFBMessaging from '@react-native-firebase/messaging';
import Video from 'react-native-video';
import * as DocumentPicker from 'react-native-document-picker';
import * as FileAccess from 'react-native-file-access';
import * as ImagePicker from 'react-native-image-picker';
import * as Permissions from 'react-native-permissions';
import * as CreateThumbnail from 'react-native-create-thumbnail';
import * as ImageResizer from '@bam.tech/react-native-image-resizer';

const ClipboardService = createNativeClipboardService(Clipboard);
const NotificationService = createNativeNotificationService({
    messagingModule: RNFBMessaging,
    permissionModule: Permissions,
});
const FileService = createNativeFileService({
    fsModule: FileAccess,
    permissionModule: Permissions,
    imagePickerModule: ImagePicker,
    mediaLibraryModule: CameraRoll,
    documentPickerModule: DocumentPicker,
});
const MediaService = createNativeMediaService({
    VideoComponent: Video,
    thumbnailModule: CreateThumbnail,
    imageResizerModule: ImageResizer,
});

Note: If you wish to use your own existing native modules, go to the native modules page.

Step 5 Wrap your app in SendbirdUIKitContainer

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.

import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
    return (
        <SendbirdUIKitContainer
            appId={'APP_ID'}
            chatOptions={{ localCacheStorage: AsyncStorage }}
            platformServices={{
                file: FileService,
                notification: NotificationService,
                clipboard: ClipboardService,
                media: MediaService,
            }}
        >
            {/* Rest of your app */}
        </SendbirdUIKitContainer>
    );
};

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.

npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
npx pod-install

Step 7 Create a fragment and module components

You can now create a fragment and 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 GroupChannelCreateFragment and GroupChannelFragment in order to create and join a new group channel. Implement the codes below.

import { useNavigation, useRoute } from '@react-navigation/native';
import {
    useSendbirdChat,
    createGroupChannelListFragment,
    createGroupChannelCreateFragment,
    createGroupChannelFragment,
} from '@sendbird/uikit-react-native';
import { useGroupChannel } from '@sendbird/uikit-chat-hooks';

const GroupChannelListFragment = createGroupChannelListFragment();
const GroupChannelCreateFragment = createGroupChannelCreateFragment();
const GroupChannelFragment = createGroupChannelFragment();

const GroupChannelListScreen = () => {
    const navigation = useNavigation<any>();
    return (
        <GroupChannelListFragment
            onPressCreateChannel={(channelType) => {
                // Navigate to GroupChannelCreate function.
                navigation.navigate('GroupChannelCreate', { channelType });
            }}
            onPressChannel={(channel) => {
                // Navigate to GroupChannel function.
                navigation.navigate('GroupChannel', { channelUrl: channel.url });
            }}
        />
    );
};

const GroupChannelCreateScreen = () => {
    const navigation = useNavigation<any>();

    return (
        <GroupChannelCreateFragment
            onCreateChannel={async (channel) => {
                // Navigate to GroupChannel function.
                navigation.replace('GroupChannel', { channelUrl: channel.url });
            }}
            onPressHeaderLeft={() => {
                // Go back to the previous screen.
                navigation.goBack();
            }}
        />
    );
};

const GroupChannelScreen = () => {
    const navigation = useNavigation<any>();
    const { params } = useRoute<any>();

    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;

    return (
        <GroupChannelFragment
            channel={channel}
            onChannelDeleted={() => {
                // Navigate to GroupChannelList function.
                navigation.navigate('GroupChannelList');
            }}
            onPressHeaderLeft={() => {
                // Go back to the previous screen.
                navigation.goBack();
            }}
            onPressHeaderRight={() => {
                // Navigate to GroupChannelSettings function.
                navigation.navigate('GroupChannelSettings', { channelUrl: params.channelUrl });
            }}
        />
    );
};

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.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator();
const Navigation = () => {
    const { currentUser } = useSendbirdChat();

    return (
        <NavigationContainer>
            <RootStack.Navigator screenOptions={{ headerShown: false }}>
                {!currentUser ? (
                    <RootStack.Screen name={'SignIn'} component={SignInScreen} />
                ) : (
                    <>
                        <RootStack.Screen name={'GroupChannelList'} component={GroupChannelListScreen} />
                        <RootStack.Screen name={'GroupChannelCreate'} component={GroupChannelCreateScreen} />
                        <RootStack.Screen name={'GroupChannel'} component={GroupChannelScreen} />
                    </>
                )}
            </RootStack.Navigator>
        </NavigationContainer>
    );
};

const App = () => {
    return (
        <SendbirdUIKitContainer
            appId={'APP_ID'}
            chatOptions={{ localCacheStorage: AsyncStorage }}
            platformServices={{
                file: FileService,
                notification: NotificationService,
                clipboard: ClipboardService,
                media: MediaService,
            }}
        >
            <Navigation />
        </SendbirdUIKitContainer>
    );
};

Note: If you wish to integrate with a different navigation library, go to the screen navigation page.

Step 9 Connect to the Sendbird server

Call the useConnection() hook to connect a user to the Sendbird server.

import { Pressable, Text, View } from 'react-native';
import { useConnection } from '@sendbird/uikit-react-native';

const SignInScreen = () => {
    const { connect } = useConnection();

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Pressable
                style={{
                    width: 120,
                    height: 30,
                    backgroundColor: '#742DDD',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
                onPress={() => connect('USER_ID', { nickname: 'NICKNAME' })}
            >
                <Text>{'Sign in'}</Text>
            </Pressable>
        </View>
    );
};

Step 10 Send your first message

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.