fix: permissions issue on expo sample app on iOS and add docs for the…

… same (#2546) * fix: permissions issue on expo sample app on iOS and add docs for the same * fix: permissions text * fix: permissions message on sample apps
GetStream · Jun 10, 2024 · 6dbc9bf · 6dbc9bf
1 parent 0bc40bb
commit 6dbc9bf
Show file tree

Hide file tree

Showing 6 changed files with 277 additions and 96 deletions.
diff --git a/docusaurus/docs/reactnative/basics/installation.mdx b/docusaurus/docs/reactnative/basics/installation.mdx
@@ -147,6 +147,91 @@ values={[
 Please follow along the linked documentation of each optional dependencies so as to support them correctly in your application.
 :::
 
+### Configuring permissions
+
+Some dependencies(if you are using them on your application), require you to add additional permissions to the `Info.plist` file in iOS and `AndroidManifest.xml` file in Android. Please follow the steps mentioned in the links below for corresponding dependencies:
+
+<Tabs
+defaultValue='rncli'
+groupId='rn-platform'
+values={[
+  { label: 'RN CLI', value: 'rncli' },
+  { label: 'Expo', value: 'expo' },
+]}
+>
+<TabItem value='rncli'>
+
+- [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll?tab=readme-ov-file#permissions) for gallery/photo library access.
+- [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker?tab=readme-ov-file#step-3) for camera access.
+- [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player?tab=readme-ov-file#post-installation) for microphone access for voice recording.
+
+An example `AndroidManifest.xml` would look like this with permissions:
+
+```xml
+  <uses-permission android:name="android.permission.CAMERA" />
+  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
+  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
+  <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" />
+```
+
+An example `Info.plist` would look like this with permissions:
+
+```xml
+<key>NSPhotoLibraryUsageDescription</key>
+<string>$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.</string>
+<key>NSPhotoLibraryAddUsageDescription</key>
+<string>$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message.</string>
+<key>NSCameraUsageDescription</key>
+<string>$(PRODUCT_NAME) would like to use your camera to share image in a message.</string>
+<key>NSMicrophoneUsageDescription</key>
+<string>$(PRODUCT_NAME) would like to use your microphone for voice recording.</string>
+```
+
+</TabItem>
+<TabItem value="expo">
+
+- [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/#configurable-properties) for gallery/photo library access.
+- [`expo-image-picker`](https://docs.expo.dev/versions/latest/sdk/imagepicker/#configuration-in-appjsonappconfigjs) for camera access.
+- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/#configuration-in-appjsonappconfigjs) for microphone access for voice recording.
+
+An example `app.json` config for expo would look like this to add permissions to the `Info.plist` on iOS, using the config plugins:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "expo-media-library",
+        {
+          "photosPermission": "$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.",
+          "savePhotosPermission": "$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message."
+        }
+      ],
+      [
+        "expo-image-picker",
+        {
+          "cameraPermission": "$(PRODUCT_NAME) would like to use your camera to share image in a message."
+        }
+      ],
+      [
+        "expo-av",
+        {
+          "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
+        }
+      ]
+    ]
+  }
+}
+```
+
+For Android on Expo, most of the most permissions are added automatically by libraries that you use in your app either with config plugins or with a package-level `AndroidManifest.xml`. Read more [here](https://docs.expo.dev/guides/permissions/#android).
+
+</TabItem>
+</Tabs>
+
 ### Additional Steps
 
 Some dependencies require us to make changes to our application for all functionalities to be available.

diff --git a/examples/ExpoMessaging/app.json b/examples/ExpoMessaging/app.json
@@ -35,6 +35,27 @@
       "turboModules": true
     },
     "scheme": "ExpoMessaging",
-    "plugins": ["expo-router"]
+    "plugins": [
+      "expo-router",
+      [
+        "expo-media-library",
+        {
+          "photosPermission": "$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.",
+          "savePhotosPermission": "$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message."
+        }
+      ],
+      [
+        "expo-image-picker",
+        {
+          "cameraPermission": "$(PRODUCT_NAME) would like to use your camera to share image in a message."
+        }
+      ],
+      [
+        "expo-av",
+        {
+          "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
+        }
+      ]
+    ]
   }
 }
diff --git a/examples/ExpoMessaging/package.json b/examples/ExpoMessaging/package.json
@@ -12,20 +12,20 @@
   "dependencies": {
     "@react-native-community/netinfo": "11.1.0",
     "@react-navigation/elements": "^1.3.30",
-    "expo": "~50.0.14",
-    "expo-av": "~13.10.5",
+    "expo": "~50.0.19",
+    "expo-av": "~13.10.6",
     "expo-clipboard": "~5.0.1",
-    "expo-constants": "~15.4.5",
+    "expo-constants": "~15.4.6",
     "expo-document-picker": "~11.10.1",
-    "expo-file-system": "~16.0.8",
+    "expo-file-system": "~16.0.9",
     "expo-haptics": "~12.8.1",
     "expo-image-manipulator": "~11.8.0",
     "expo-image-picker": "~14.7.1",
     "expo-linking": "~6.2.2",
-    "expo-media-library": "~15.9.1",
-    "expo-router": "~3.4.8",
+    "expo-media-library": "~15.9.2",
+    "expo-router": "~3.4.10",
     "expo-sharing": "~11.10.0",
-    "expo-splash-screen": "~0.26.4",
+    "expo-splash-screen": "~0.26.5",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -39,7 +39,7 @@
     "react-native-web": "~0.19.6",
     "stream-chat-expo": "link:../../package/expo-package",
     "stream-chat-react-native-core": "link:../../package",
-    "typescript": "5.0.4"
+    "typescript": "^5.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",