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

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,
        recorder: RecorderService,
        player: PlayerService,
    }}
/>

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.RECORD_AUDIO" />
    <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 run pod install after updating permissions.

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 - 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-audio-recorder-player \
            @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';
import * as AudioRecorderPlayer from 'react-native-audio-recorder-player';

const nativePlatformServices = {
  clipboard: createNativeClipboardService(Clipboard),
  notification: createNativeNotificationService({
    messagingModule: RNFBMessaging,
    permissionModule: Permissions,
  }),
  file: createNativeFileService({
    imagePickerModule: ImagePicker,
    documentPickerModule: DocumentPicker,
    permissionModule: Permissions,
    fsModule: FileAccess,
    mediaLibraryModule: CameraRoll,
  }),
  media: createNativeMediaService({
    VideoComponent: Video,
    thumbnailModule: CreateThumbnail,
    imageResizerModule: ImageResizer,
  }),
  player: createNativePlayerService({
    audioRecorderModule: AudioRecorderPlayer,
    permissionModule: Permissions,
  }),
  recorder: createNativeRecorderService({
    audioRecorderModule: AudioRecorderPlayer,
    permissionModule: Permissions,
  }),
};

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 expoPlatformServices = {
  clipboard: createExpoClipboardService(ExpoClipboard),
  notification: createExpoNotificationService(ExpoNotifications),
  file: createExpoFileService({
    fsModule: ExpoFS,
    imagePickerModule: ExpoImagePicker,
    mediaLibraryModule: ExpoMediaLibrary,
    documentPickerModule: ExpoDocumentPicker,
  }),
  media: createExpoMediaService({
    avModule: ExpoAV,
    thumbnailModule: ExpoVideoThumbnail,
    imageManipulator: ExpoImageManipulator,
    fsModule: ExpoFS,
  }),
  player: createExpoPlayerService({
    avModule: ExpoAV,
  }),
  recorder: createExpoRecorderService({
    avModule: ExpoAV,
  }),
};

On this page

SendbirdUIKitContainer Get native module permission

Android iOS

Helper functions

React Native CLI Expo CLI

Sample app