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

PlatformServiceProvider

Copy link

In order to use the APIs and features of the native module, you need to implement the platform service interfaces that Sendbird provides. Each interface comes with a set of methods and helper functions. The PlatformServiceProvider component passes down the platform service interfaces to the child components so they can be applied across the UIKit.

List of platform service interfaces

Copy link
InterfaceMemberHelper function

NotificationServiceInterface

hasPushPermission
requestPushPermission
getAPNSToken
getFCMToken
onTokenRefresh

createNativeNotificationService

createExpoNotificationService

ClipboardServiceInterface

setString
getString

createNativeClipboardService

createExpoClipboardService

FileServiceInterface

openMediaLibrary
openCamera
openDocument
save
createRecordFilePath

createNativeFileService

createExpoFileService

MediaServiceInterface

VideoComponent
getVideoThumbnail
compressImage

createNativeMediaService

createExpoMediaService

RecorderServiceInterface

requestPermission
record
stop
reset

createNativeRecorderService

createExpoRecorderService

PlayerServiceInterface

requestPermission
play
pause
stop
reset
seek

createNativePlayerService

createExpoPlayerService


NotificationServiceInterface

Copy link

The following table lists the properties of NotificationServiceInterface.

PropertyDescription

hasPushPermission(): Promise

Checks for push notification permission and returns either true or false.

requestPushPermission(): Promise

Requests push notification permission and returns either true or false.

getAPNSToken(): Promise<string/null>

Retrieves an APNS token and returns either the token string or null.

getFCMToken(): Promise<string/null>

Retrieves a FCM token and returns either the token string or null.

onTokenRefresh(handler: (token: string) => void): () => void / undefined

Refreshes the push token and returns the unsubscribe function or undefined.


ClipboardServiceInterface

Copy link

The following table lists the properties of ClipboardServiceInterface.

PropertyDescription

setString(text: string): void

Saves text to clipboard.

getString(): Promise

Retrieves text from clipboard.


FileServiceInterface

Copy link

The following table lists the properties of FileServiceInterface.

PropertyDescription

openMediaLibrary(options?: OpenMediaLibraryOptions): Promise<null/FilePickerResponse[]>

Opens the media library to retrieve a media file. This method returns the image file info.
* You should check and request permission to access the user's media library.

openCamera(options?: OpenCameraOptions): Promise

Opens the phone camera to retrieve a media file. This method returns the image file info.
* You should check and request permission to access the user's camera.

openDocument(options?: OpenDocumentOptions): Promise

Opens the document file library and retrieves a file. This method returns the file info.
* You should check and request permission to access the user's file library.

save(options: SaveOptions): Promise

Downloads a file to the mobile device and returns the download path.
* You should check and request permission to access the user's save options on the mobile device.

createRecordFilePath(customExtension?: string): { recordFilePath: string; uri: string }

Creates a file path for recording.


MediaServiceInterface

Copy link

The following table lists the properties of MediaServiceInterface.

PropertyDescription

VideoComponent(props: VideoProps): JSX.Element

Specifies a video component.

getVideoThumbnail(options: GetVideoThumbnailOptions): void

Generates a thumbnail for the video.

compressImage(options: CompressImageOptions): CompressImageResult

Compresses an image.


RecorderServiceInterface

Copy link

The following table lists the properties of RecorderServiceInterface.

PropertyDescription

uri?: string

The URI of the recording. (Optional)

options: object

An object containing recording options such as minDuration (minimum recording duration in milliseconds), maxDuration (maximum recording duration in milliseconds).

state: string

The current state of the recorder, which can be one of the following: idle, preparing, recording, or completed.

requestPermission(): Promise

A method to check and request permission for the recorder.

addRecordingListener(callback: Function): Function

A method to add a recording listener that takes a callback function with parameters: currentTime (current recording time) and completed (boolean indicating if recording is completed).

addStateListener(callback: Function): Function

A method to add a state listener that takes a callback function with the state parameter indicating the current recorder state.

record(uri?: string): Promise

A method to start recording.

stop(): Promise

A method to stop recording.

reset(): Promise

A method to reset the recorder to the idle state.


PlayerServiceInterface

Copy link

The following table lists the properties of PlayerServiceInterface.

PropertyDescription

uri?: string

The URI of the media to be played. (Optional)

state: string

The current state of the player, which can be one of the following: idle, preparing, playing, paused, or stopped.

requestPermission(): Promise

A method to check and request permission for the player.

addPlaybackListener(callback: Function): Function

A method to add a playback listener that takes a callback function with parameters: currentTime (current playback time), duration (total duration of the media), and stopped (boolean indicating if playback is stopped).

addStateListener(callback: Function): Function

A method to add a state listener that takes a callback function with the state parameter indicating the current player state.

play(uri: string): Promise

A method to start playback of the media specified by the URI.

pause(): Promise

A method to pause playback.

stop(): Promise

A method to stop playback.

reset(): Promise

A method to reset the player to the idle state.

seek(time: number): Promise

A method to seek to a specific time in the media.


The platform service interfaces are set as properties of SendbirdUIKitContainer and they can be applied to the entire Sendbird UIKit through PlatformServiceProvider.

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

const Component = () => {
    const { clipboardService } = usePlatformService();
};

Once the interfaces are internally set in UIKit for React Native, they can be called when you need to use native APIs such as downloading a media file or sending an image.


Direct implementation

Copy link

If you're already using a native module that isn't supported by Sendbird UIKit, you can implement the interfaces directly as shown in the code below.

import {
    FilePickerResponse,
    FileServiceInterface,
    OpenCameraOptions,
    OpenDocumentOptions,
    OpenMediaLibraryOptions,
    SaveOptions,
    SBUError,
} from '@sendbird/uikit-react-native';

class MyFileService implements FileServiceInterface {
    async openCamera(_options?: OpenCameraOptions): Promise<FilePickerResponse> {
        // Check camera permission.
        // Request media file with camera.
        // Returns media file info.
    }

    async openMediaLibrary(_options: OpenMediaLibraryOptions): Promise<null | FilePickerResponse[]> {
        // Check media library permission.
        // Request media file from media library.
        // Returns media file info.
    }

    async openDocument(options?: OpenDocumentOptions): Promise<FilePickerResponse> {
        try {
            const response = await MyDocumentPickerModule.getDocumentAsync({
                type: '*/*',
            });
            if (response.type === 'cancel') return null;
            const { mimeType, uri, size, name } = response;
            return { uri, size, name, type: mimeType };
        } catch {
            options?.onOpenFailure?.(SBUError.UNKNOWN);
            return null;
        }
    }

    async save(options: SaveOptions): Promise<string> {
        // As an example, use `rn-fetch-blob` instead of `react-native-file-access`.
        const response = await RNFetchBlob.config({ fileCache: true }).fetch('GET', options.fileUrl);

        if (isMediaFile(response.path())) {
            const granted = await MyMediaLibraryModule.requestPermission();
            if (granted) await MyMediaLibraryModule.saveToLibrary(response.path());
        }

        return response.path();
    }
}