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

Authentication

Copy link

In order to use the features of Sendbird UIKit for React Native in your client app, you need to wrap your app in the SendbirdUIKitContainer component. This page explains how to authenticate your user with the server.


Connect to the Sendbird server

Copy link

Connect a user to the Sendbird server using the connect() method of useConnection() hook with the information you provided. The connect() method also automatically updates the user profile on the server.

With local caching added to Sendbird Chat SDK, the latest user instance may be returned through the promise object even when the user is offline. The local caching functionality stores message and channel data in the local storage and the Sendbird server. As a result, even when a user is not connected to the server, the user information stored in the local cache is returned through the callback along with an error indicating the offline status.

Refer to the code below to see how to connect a user to the Sendbird server:

import { useConnection } from '@sendbird/uikit-react-native';

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

    connect('USER_ID', { nickname: 'NICKNAME', accessToken: 'ACCESS_TOKEN' })
        .then((_user) => {
            // 1. The user is online and connected to the server.
            // 2. The user is offline but you can access user information stored
            // in the local cache.
        })
        .catch((_err) => {
            // The user is offline and you can't access any user information stored
            // in the local cache.
        });
};

Disconnect from the Sendbird server

Copy link

Call the disconnect() method of useConnection() hook if a user requests to log out. If a user has been logged out and thus disconnected from the server, they will no longer receive messages.

const Component = () => {
    const { disconnect } = useConnection();

    disconnect();
}

Retrieve online status of current user

Copy link

By calling the useSendbirdChat() hook, you can retrieve the online status of the current user.

import { useSendbirdChat } from '@sendbird/uikit-react-native';

const Component = () => {
    const { currentUser } = useSendbirdChat();

    if (currentUser) {
        // User is online.
    } else {
        // User is offline.
    }
}

Register for push notifications

Copy link

Push notifications are a type of notification sent to your user's device when a client app is running in the background. In UIKit for React Native, you can automatically register or unregister push notifications while connecting/disconnecting a user from the server. In order to use the push notification service, you need to register the user's device token to Sendbird sever. To do so, set NotificationServiceInterface in SendbirdUIKitContainer as a platform service as shown in the code below.

import RNFBMessaging from '@react-native-firebase/messaging';
import * as Permissions from 'react-native-permissions';
import { SendbirdUIKitContainer, createNativeNotificationService } from '@sendbird/uikit-react-native';

const NotificationService = createNativeNotificationService({
    messagingModule: RNFBMessaging,
    permissionModule: Permissions,
});

const App = () => {
    return (
        <SendbirdUIKitContainer
            appId={'APP_ID'}
            platformServices={{ notification: NotificationService }}
        />
    );
};

Unregister push notifications

Copy link

You should unregister a user's push token from the Sendbird server if you don't want to send push notifications to the user. By default, the push token registration is turned on for every user. You can turn it off by setting the enableAutoPushTokenRegistration method to false.

const App = () => {
    return (
        <SendbirdUIKitContainer
            chatOptions={{ enableAutoPushTokenRegistration: false }}
        />
    );
};

Update user profile

Copy link

When a user first creates an account with a unique ID, UIKit automatically generates a nickname and profileImage based on the specified userId. Through the updateCurrentUserInfo method of useSendbirdChat() hook, you can modify user information and retrieve their online status.

const Component = () => {
    const { updateCurrentUserInfo } = useSendbirdChat();

    const update = async () => {
        const updatedUserWithUrl = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');

        // Or you can update the profile image file.
        const updatedUserWithFile = await updateCurrentUserInfo('NICKNAME', PROFILE_FILE);
    }
}