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

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.

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

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-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary"
pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"

List of permissions

KeyTypeValue

Privacy - Camera Usage Description

string

$(PRODUCT_NAME) would like to use your camera

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-permissions \
            react-native-image-picker \
            react-native-document-picker \
            @react-native-community/cameraroll \
            react-native-file-access \
            @react-native-clipboard/clipboard \
            @react-native-firebase/app \
            @react-native-firebase/messaging \
            react-native-video \
            react-native-create-thumbnail
import Clipboard from '@react-native-clipboard/clipboard';
import CameraRoll from '@react-native-community/cameraroll';
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';

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

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

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