In order to access native APIs that are not available in JavaScript, you need to use a native module 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 there isn't a dependency on a 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.
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.
$(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:
import Clipboard from '@react-native-clipboard/clipboard';
import CameraRoll from '@react-native-community/cameraroll';
import RNFBMessaging from '@react-native-firebase/messaging';
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';
const ClipboardService = createNativeClipboardService(Clipboard);
const NotificationService = createNativeNotificationService({
messagingModule: RNFBMessaging,
permissionModule: Permissions,
});
const FileService = createNativeFileService({
fsModule: FileAccess,
permissionModule: Permissions,
imagePickerModule: ImagePicker,
mediaLibraryModule: CameraRoll,
documentPickerModule: DocumentPicker,
});
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:
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';
const NotificationService = createExpoNotificationService(ExpoNotifications);
const ClipboardService = createExpoClipboardService(ExpoClipboard);
const FileService = createExpoFileService({
fsModule: ExpoFS,
imagePickerModule: ExpoImagePicker,
mediaLibraryModule: ExpoMediaLibrary,
documentPickerModule: ExpoDocumentPicker,
});