docs(uikit): update native modules section

sendbird · Oct 4, 2023 · 42a3b81 · 42a3b81
1 parent 045bd8a
commit 42a3b81
Showing 1 changed file with 64 additions and 39 deletions.
diff --git a/packages/uikit-react-native/README.md b/packages/uikit-react-native/README.md
@@ -78,6 +78,7 @@ Add the following permissions to your `android/app/src/main/AndroidManifest.xml`
           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" />
@@ -123,6 +124,8 @@ const App = () => {
         notification: NotificationService,
         clipboard: ClipboardService,
         media: MediaService,
+        recorder: RecorderService,
+        player: PlayerService,
       }}
     >
       {/* ... */}
@@ -147,6 +150,7 @@ npm install react-native-video \
             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 \
@@ -157,34 +161,45 @@ npx pod-install
 ```
 
 ```ts
-import * as ImageResizer from '@bam.tech/react-native-image-resizer';
-import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFBMessaging from '@react-native-firebase/messaging';
-import * as CreateThumbnail from 'react-native-create-thumbnail';
+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 Video from 'react-native-video';
-
-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,
-});
+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,
+  }),
+};
 ```
 
 **Using Expo CLI**
@@ -204,30 +219,38 @@ expo install expo-image-picker \
 ```
 
 ```ts
-import * as ExpoAV from 'expo-av';
 import * as ExpoClipboard from 'expo-clipboard';
 import * as ExpoDocumentPicker from 'expo-document-picker';
 import * as ExpoFS from 'expo-file-system';
-import * as ExpoImageManipulator from 'expo-image-manipulator';
 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,
-});
+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,
+  }),
+};
 ```
 
 ### Local caching (required)
@@ -236,7 +259,7 @@ You can implement Local caching easily.
 
 ```shell
 npm i @react-native-async-storage/async-storage
-npx pod-isntall
+npx pod-install
 ```
 
 ```tsx
@@ -420,6 +443,8 @@ const App = () => {
         notification: NotificationService,
         clipboard: ClipboardService,
         media: MediaService,
+        recorder: RecorderService,
+        player: PlayerService,
       }}
     >
       <Navigation />