PlatformServiceProvider

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

Interface	Member	Helper 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

The following table lists the properties of NotificationServiceInterface.

Property	Description
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

The following table lists the properties of ClipboardServiceInterface.

Property	Description
setString(text: string): void	Saves text to clipboard.
getString(): Promise	Retrieves text from clipboard.

FileServiceInterface

The following table lists the properties of FileServiceInterface.

Property	Description
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

The following table lists the properties of MediaServiceInterface.

Property	Description
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

The following table lists the properties of RecorderServiceInterface.

Property	Description
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

The following table lists the properties of PlayerServiceInterface.

Property	Description
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.

Usage

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

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

On this page

NotificationServiceInterface ClipboardServiceInterface FileServiceInterface MediaServiceInterface RecorderServiceInterface PlayerServiceInterface Usage Direct implementation

Sample app