UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

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

InterfaceMethodHelper 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.

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

The following table lists the properties of ClipboardServiceInterface.

PropertyDescription

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;
}
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.


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;
}
PropertyDescription

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