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


NotificationServiceInterface

The following table lists the methods of NotificationServiceInterface.

MethodDescription

hasPushPermission(): Promise

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

requestPushPermission(): Promise

Requests for 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 methods of ClipboardServiceInterface.

MethodDescription

setString(text: string): void

Saves text to clipboard.

getString(): Promise

Retrieves text from clipboard.


FileServiceInterface

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

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

interface OpenResultListener {
    onOpenFailureWithToastMessage?: () => void;
}

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

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

type OpenDocumentOptions = OpenResultListener;

interface SaveOptions {
    fileUrl: string;
    fileName: string;
}
MethodDescription

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 for permission to 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 for permission to 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 for permission to 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 for permission to the user's save options.


Usage

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

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.

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) {
        // Check media library permission.
        // Request media file from media library.
        // Returns media file info.
    }

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

    async save(options: SaveOptions): Promise<string> {
        // 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();
    }
}