diff --git a/packages/uikit-react-native/README.md b/packages/uikit-react-native/README.md
index 228782ae9..926c9239e 100644
--- 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">
+
@@ -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,
}}
>