README.md
1<p>
2 <a href="https://docs.expo.dev/versions/latest/sdk/imagepicker/">
3 <img
4 src="../../.github/resources/expo-image-picker.svg"
5 alt="expo-image-picker"
6 height="64" />
7 </a>
8</p>
9
10Provides access to the system's UI for selecting images and videos from the phone's library or taking a photo with the camera.
11
12# API documentation
13
14- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/imagepicker.mdx)
15- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/imagepicker/)
16
17# Installation in managed Expo projects
18
19For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/imagepicker/).
20
21# Installation in bare React Native projects
22
23For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
24
25### Add the package to your npm dependencies
26
27```
28npx expo install expo-image-picker
29```
30
31### Configure for iOS
32
33> This is only required for usage in bare React Native apps.
34
35Add `NSPhotoLibraryUsageDescription`, `NSCameraUsageDescription`, and `NSMicrophoneUsageDescription` keys to your `Info.plist`:
36
37```xml
38<key>NSPhotoLibraryUsageDescription</key>
39<string>Give $(PRODUCT_NAME) permission to save photos</string>
40<key>NSCameraUsageDescription</key>
41<string>Give $(PRODUCT_NAME) permission to access your camera</string>
42<key>NSMicrophoneUsageDescription</key>
43<string>Give $(PRODUCT_NAME) permission to use your microphone</string>
44```
45
46Run `npx pod-install` after installing the npm package.
47
48### Configure for Android
49
50> This is only required for usage in bare React Native apps.
51
52This package automatically adds the `CAMERA`, `READ_EXTERNAL_STORAGE`, and `WRITE_EXTERNAL_STORAGE` permissions. They are used when picking images from the camera directly, or from the camera roll.
53
54```xml
55<!-- Added permissions -->
56<uses-permission android:name="android.permission.CAMERA" />
57<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
58<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
59```
60
61## Config Plugin
62
63> This plugin is applied automatically in EAS Build, only add the config plugin if you want to pass in extra properties.
64
65After installing this npm package, add the [config plugin](https://docs.expo.dev/config-plugins/introduction) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:
66
67```json
68{
69 "expo": {
70 "plugins": ["expo-image-picker"]
71 }
72}
73```
74
75Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.dev/workflow/customizing/) guide.
76
77### API
78
79The plugin provides props for extra customization. Every time you change the props or plugins, you'll need to rebuild (and `prebuild`) the native app. If no extra properties are added, defaults will be used.
80
81- `photosPermission` (_string | false_): Sets the iOS `NSPhotoLibraryUsageDescription` permission message to the `Info.plist`. Setting `false` will skip adding the permission on iOS and **does not** skip the permission on Android. Defaults to `Allow $(PRODUCT_NAME) to access your photos`.
82- `cameraPermission` (_string | false_): Sets the iOS `NSCameraUsageDescription` permission message to the `Info.plist`. Setting `false` will skip adding the permission on iOS and **does not** skip the permission on Android. Defaults to `Allow $(PRODUCT_NAME) to access your camera`.
83- `microphonePermission` (_string | false_): Sets the iOS `NSCameraUsageDescription` permission message to the `Info.plist`. Setting `false` will skip adding the permission on iOS and skips adding the `android.permission.RECORD_AUDIO` Android permission. Defaults to `Allow $(PRODUCT_NAME) to access your photos`.
84
85### Example
86
87```json
88{
89 "expo": {
90 "plugins": [
91 [
92 "expo-image-picker",
93 {
94 "photosPermission": "custom photos permission",
95 "cameraPermission": "Allow $(PRODUCT_NAME) to open the camera",
96
97 "//": "Disables the microphone permission",
98 "microphonePermission": false
99 }
100 ]
101 ]
102 }
103}
104```
105
106# Contributing
107
108Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
109
