Native modules

In order to access native APIs that are not available in JavaScript, you need to use native modules within your React Native application. There are many native modules available for open source that you can use to create your app with. For this reason, Sendbird UIKit is built so that it's not dependent on one specific type of native module.

Regardless of which native module you choose to build your app with, you need to implement the platform service interfaces that we provide in order to use the native APIs and features. Each interface comes with a set of methods and helper functions. Based on the interface, you can create a new class that includes the corresponding methods and implement them in UIKit. Then, use the helper functions to set the interface in the individual modules. To do so, pass the module as a parameter in the helper function.

List of platform service interfaces

The following table shows a list of interfaces and their corresponding methods and helper functions.

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 compressImage	createNativeMediaService createExpoMediaService

Note: To learn more about PlatformServiceProvider, go to the PlatformServiceProvider page under the core components section.

SendbirdUIKitContainer

After implementing all the interfaces, you can set them as props of SendbirdUIKitContainer to use the native module features across Sendbird UIKit.

<SendbirdUIKitContainer
    platformServices={{
        file: FileService,
        notification: NotificationService,
        clipboard: ClipboardService,
        media: MediaService
    }}
/>

Get native module permission

Client apps must acquire permission from users to get access to their media library and save files to their mobile storage. Once the permission is granted, users can send images and videos to other users and save media files.

Android

Add the following permissions to your android/app/src/main/AndroidManifest.xml file.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.your.app">

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

</manifest>

iOS

Add the following permission usage descriptions to your info.plist file.

Note: If you use react-native-permissions, you must update Podfile and run pod install.

permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary"
pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"

List of permissions

Key	Type	Value
Privacy - Camera Usage Description	string	$(PRODUCT_NAME) would like to use your camera
Privacy - Microphone Usage Description	string	$(PRODUCT_NAME) would like to use your microphone
Privacy - Media Library Usage Description	string	$(PRODUCT_NAME) would like access to your photo library
Privacy - Photo Library Usage Description	string	$(PRODUCT_NAME) would like access to your photo library
Privacy - Photo Library Additions Usage Description	string	$(PRODUCT_NAME) would like to save photos to your photo library

Helper functions

In order to implement the interfaces to your React Native app more easily, we provide various helper functions for each interface. There are two ways to install native APIs to your modules: React Native CLI and Expo CLI.

React Native CLI

The helper functions allow you to pass the native APIs as a parameter to the interface so you can install the features more efficiently. To develop your app using React Native CLI, follow the code below:

npm install react-native-video \
            react-native-permissions \
            react-native-file-access \
            react-native-image-picker \
            react-native-document-picker \
            react-native-create-thumbnail \
            @react-native-clipboard/clipboard \
            @react-native-camera-roll/camera-roll \
            @react-native-firebase/app \
            @react-native-firebase/messaging \
            @bam.tech/react-native-image-resizer

import Clipboard from '@react-native-clipboard/clipboard';
import { CameraRoll } from '@react-native-camera-roll/camera-roll';
import RNFBMessaging from '@react-native-firebase/messaging';
import Video from 'react-native-video';
import * as DocumentPicker from 'react-native-document-picker';
import * as FileAccess from 'react-native-file-access';
import * as ImagePicker from 'react-native-image-picker';
import * as Permissions from 'react-native-permissions';
import * as CreateThumbnail from 'react-native-create-thumbnail';
import * as ImageResizer from '@bam.tech/react-native-image-resizer';

const NativeClipboardService = createNativeClipboardService(Clipboard);
const NativeNotificationService = createNativeNotificationService({
    messagingModule: RNFBMessaging,
    permissionModule: Permissions,
});
const NativeFileService = createNativeFileService({
    fsModule: FileAccess,
    permissionModule: Permissions,
    imagePickerModule: ImagePicker,
    mediaLibraryModule: CameraRoll,
    documentPickerModule: DocumentPicker,
});
const NativeMediaService = createNativeMediaService({
    VideoComponent: Video,
    thumbnailModule: CreateThumbnail,
    imageResizerModule: ImageResizer,
});

Expo CLI

You can also pass the native APIs as a parameter to the interface using Expo CLI but there are some limitations on usage. To develop your app using Expo CLI, follow the code below:

expo install expo-image-picker \
             expo-document-picker \
             expo-media-library \
             expo-file-system \
             expo-clipboard \
             expo-notifications \
             expo-av \
             expo-video-thumbnails \
             expo-image-manipulator

import * as ExpoClipboard from 'expo-clipboard';
import * as ExpoDocumentPicker from 'expo-document-picker';
import * as ExpoFS from 'expo-file-system';
import * as ExpoImagePicker from 'expo-image-picker';
import * as ExpoMediaLibrary from 'expo-media-library';
import * as ExpoNotifications from 'expo-notifications';
import * as ExpoAV from 'expo-av';
import * as ExpoVideoThumbnail from 'expo-video-thumbnails';
import * as ExpoImageManipulator from 'expo-image-manipulator';

const ExpoNotificationService = createExpoNotificationService(ExpoNotifications);
const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
const ExpoFileService = createExpoFileService({
    fsModule: ExpoFS,
    imagePickerModule: ExpoImagePicker,
    mediaLibraryModule: ExpoMediaLibrary,
    documentPickerModule: ExpoDocumentPicker,
});
const ExpoMediaService = createExpoMediaService({
    avModule: ExpoAV,
    thumbnailModule: ExpoVideoThumbnail,
    imageManipulator: ExpoImageManipulator,
    fsModule: ExpoFS,
})