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	Method	Helper function
NotificationServiceInterface	hasPushPermission requestPushPermission getAPNSToken getFCMToken onTokenRefresh	createNativeNotificationService createExpoNotificationService
ClipboardServiceInterface	setString getString	createNativeClipboardService createExpoClipboardService
FileServiceInterface	openMediaLibrary openCamera openDocument save	createNativeFileService createExpoFileService
MediaServiceInterface	VideoComponent getVideoThumbnail	createNativeMediaService createExpoMediaService

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

See the code below on how to use the properties to send a file message.

type FilePickerResponse = {
    uri: string;
    size: number;
    name: string;
    type: string;
} | null;

interface OpenResultListener {
    onOpenFailure?: (error: SBUError, originError?: unknown) => void;
}

interface OpenMediaLibraryOptions extends OpenResultListener {
    selectionLimit?: number;
    mediaType?: 'photo' | 'video' | 'all';
}

interface OpenCameraOptions extends OpenResultListener {
    cameraType?: 'front' | 'back';
    mediaType?: 'photo' | 'video' | 'all';
}

type OpenDocumentOptions = OpenResultListener;

interface SaveOptions {
    fileUrl: string;
    fileName: string;
    fileType?: string | null;
}

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.

MediaServiceInterface

The following table lists the properties of MediaServiceInterface.

interface VideoProps {
    source: { uri: string } | number;
    resizeMode?: 'cover' | 'contain' | 'stretch';
    onLoad?: () => void;
}

interface GetVideoThumbnailOptions {
    url: string;
    timeMills?: number;
    quality?: number;
}

Property	Description
VideoComponent(props: VideoProps): JSX.Element	Specifies a video component.
getVideoThumbnail(options: GetVideoThumbnailOptions): void	Generates a thumbnail for the video.

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 Usage Direct implementation