Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: permissions issue on expo sample app on iOS and add docs for the same #2546

Merged
merged 3 commits into from
Jun 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions docusaurus/docs/reactnative/basics/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
23 changes: 22 additions & 1 deletion examples/ExpoMessaging/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
]
]
}
}
16 changes: 8 additions & 8 deletions examples/ExpoMessaging/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
Loading
Loading