Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Send your first message

Copy link

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 supports both group channels amd open channels. Follow the guide below to start sending a message from scratch using Typescript or Javascript.


Requirements

Copy link

The minimum requirements for UIKit for React Native are:

  • React 17.0.2 or higher
  • React-Native 0.65.0 or higher
  • Sendbird Chat SDK for Javascript 4.10.8 or higher

Before you start

Copy link

In this quickstart guide, you will be installing Sendbird SDK, implementing codes to create a open channel with a user, and send a message within a few minutes. Before you start, you need to have the following:

Create a Sendbird application from dashboard

Copy link

A Sendbird application comprises everything required in a chat service including users, messages, and channels. You need the Application ID of your Sendbird application from the dashboard when initializing the Chat SDK.

  1. Go to Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.

  2. Create a new application by clicking Create + at the bottom right of your screen.

  3. Enter a name for your application. Choose a Product Type and Region. Then, click Confirm.

  4. Click the application you just created under Applications. You will see the application's Application ID which you will need 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.

Create a user in the Sendbird application

Copy link

In order to send a message, you need a user in a channel. You can either create a user on the Sendbird dashboard first or you can use a new unique ID that hasn’t been taken by any of your Sendbird application users. In the latter case, a new user is automatically created in your Sendbird application before being connected.

In this guide, we will create a user on the Sendbird dashboard first.

  1. Go to the Users menu on the left-hand side of the dashboard and click Create user+.

  2. Enter the User ID and Nickname. It is recommended that you check the box next to Issue access token for user authentication. Then, click Create.

Note: Sendbird supports user authentication through access token for stronger security. However, on the dashboard, you can also configure the token permission in Settings > Application > Security > Access token permission to allow users without a token to access our functionalities. To learn more, see Authentication.

  1. Copy and store the user ID. You will use it to connect to the Sendbird server.

Get started

Copy link

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

Copy link

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

npx react-native init ChatApp

Step 2 Install UIKit and the required dependencies

Copy link

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

Note: If you're using React-Native 0.72 or higher, you don't need to install @sendbird/react-native-scrollview-enhancer.

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

Step 3 Install native modules

Copy link

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

Copy link

Refer to the installation guide for each native module below.

Step 4 Implement platform service interfaces using native modules

Copy link

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,
  createNativePlayerService,
  createNativeRecorderService,
  SendbirdUIKitContainerProps
} 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';
import * as AudioRecorderPlayer from 'react-native-audio-recorder-player';

export const platformServices: SendbirdUIKitContainerProps['platformServices'] = {
  clipboard: createNativeClipboardService(Clipboard),
  notification: createNativeNotificationService({
    messagingModule: RNFBMessaging,
    permissionModule: Permissions,
  }),
  file: createNativeFileService({
    imagePickerModule: ImagePicker,
    documentPickerModule: DocumentPicker,
    permissionModule: Permissions,
    fsModule: FileAccess,
    mediaLibraryModule: CameraRoll,
  }),
  media: createNativeMediaService({
    VideoComponent: Video,
    thumbnailModule: CreateThumbnail,
    imageResizerModule: ImageResizer,
  }),
  player: createNativePlayerService({
    audioRecorderModule: AudioRecorderPlayer,
    permissionModule: Permissions,
  }),
  recorder: createNativeRecorderService({
    audioRecorderModule: AudioRecorderPlayer,
    permissionModule: Permissions,
  }),
};

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

Step 5 Wrap your app in SendbirdUIKitContainer

Copy link

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={platformServices}
    >
      {/* Rest of your app */}
    </SendbirdUIKitContainer>
  );
};

Step 6 Install navigation library

Copy link

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

Copy link

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 });
      }}
    />
  );
};

Step 8 Register navigation library to the screen

Copy link

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={platformServices}
    >
      <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

Copy link

Here, you will to call the useConnection() hook to connect a user to the Sendbird server so that they can send a message through the SDK. The USER_ID in the code below is the unique ID set to the user you've created on the dashboard. If you haven't created a user yet, specifying a unique userId in the code snippet provided will automatically generate a new user in your Sendbird application and connect it to the Sendbird server.

Note: Sendbird supports user authentication via access tokens, but defaults to allowing access without a token for ease of initial use. For enhanced security, we recommend adjusting the access settings of new users under Settings > Application > Security > Access token permission on the dashboard. To learn about authentication, see the Authentication guide.

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',
                }}
                // TODO: Use the ID of a user you've created on the dashboard.
                // If there isn't one, specify a unique ID so that a new user can be created with the value.
                onPress={() => connect('USER_ID', { nickname: 'NICKNAME' })}
            >
                <Text>{'Sign in'}</Text>
            </Pressable>
        </View>
    );

};

Step 10 Send your first message

Copy link

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.