base on :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera. # react-native-image-picker 🎆 A React Native module that allows you to select a photo/video from the device library or camera. [](https://img.shields.io/npm/dw/react-native-image-picker) [](https://img.shields.io/npm/v/react-native-image-picker?color=red) [](https://github.com/react-native-image-picker/react-native-image-picker/blob/main/LICENSE.md) ## Installation ```bash yarn add react-native-image-picker ``` ### New Architecture To take advantage of the new architecture run- #### iOS ```bash RCT_NEW_ARCH_ENABLED=1 npx pod-install ios ``` #### Android Set `newArchEnabled` to `true` inside `android/gradle.properties` ### Pre-Fabric (AKA not using the new architecture) ```bash npx pod-install ios ``` ## Post-install Steps ### iOS Add the appropriate keys to your `Info.plist` depending on your requirement: | Requirement | Key | | ------------------------------ | --------------------------------------------------- | | Select image/video from photos | NSPhotoLibraryUsageDescription | | Capture Image | NSCameraUsageDescription | | Capture Video | NSCameraUsageDescription & NSMicrophoneUsageDescription | ### Android No permissions required (`saveToPhotos` requires permission [check](#note-on-file-storage)). Note: This library does not require `Manifest.permission.CAMERA`, if your app declares as using this permission in manifest then you have to obtain the permission before using `launchCamera`. #### Targeting Android API Levels Below 30 If your app's `minSdkVersion` is set to below 30 and it does not already include or depend on `androidx.activity:activity:1.9.+` or a newer version, you'll need to add the following line to the dependencies section of your `app/build.gradle` file to ensure support for the backported AndroidX Photo Picker: ```groovy dependencies { ... implementation("androidx.activity:activity:1.9.+") ... } ``` Additionally, you may need to update your `AndroidManifest.xml` to trigger the installation of the backported Photo Picker. For reference, you can check the example app's configuration in `example/android/app/src/main/AndroidManifest.xml` and `example/android/app/build.gradle`. For more details, consult the Android documentation on AndroidX Photo Picker: [https://developer.android.com/training/data-storage/shared/photopicker](https://developer.android.com/training/data-storage/shared/photopicker) ## API Reference ## Methods ```js import {launchCamera, launchImageLibrary} from 'react-native-image-picker'; ``` ### `launchCamera()` Launch camera to take photo or video. ```js launchCamera(options?, callback); // You can also use as a promise without 'callback': const result = await launchCamera(options?); ``` See [Options](#options) for further information on `options`. The `callback` will be called with a response object, refer to [The Response Object](#the-response-object). ### `launchImageLibrary` Launch gallery to pick image or video. ```js launchImageLibrary(options?, callback) // You can also use as a promise without 'callback': const result = await launchImageLibrary(options?); ``` See [Options](#options) for further information on `options`. The `callback` will be called with a response object, refer to [The Response Object](#the-response-object). ## Options | Option | iOS | Android | Web | Description | | ----------------------- | --- | ------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | mediaType | OK | OK | OK | `photo` or `video` or `mixed`(`launchCamera` on Android does not support 'mixed'). Web only supports 'photo' for now. | | maxWidth | OK | OK | NO | To resize the image. | | maxHeight | OK | OK | NO | To resize the image. | | videoQuality | OK | OK | NO | `low`, `medium`, or `high` on iOS, `low` or `high` on Android. | | durationLimit | OK | OK | NO | Video max duration (in seconds). | | quality | OK | OK | NO | 0 to 1, photos. | | cameraType | OK | OK | NO | 'back' or 'front' (May not be supported in few android devices). | | includeBase64 | OK | OK | OK | If `true`, creates base64 string of the image (Avoid using on large image files due to performance). | | includeExtra | OK | OK | NO | If `true`, will include extra data which requires library permissions to be requested (i.e. exif data). | | saveToPhotos | OK | OK | NO | (Boolean) Only for `launchCamera`, saves the image/video file captured to public photo. | | selectionLimit | OK | OK | OK | Supports providing any integer value. Use `0` to allow any number of files on iOS version >= 14 & Android version >= 13. Default is `1`. | | presentationStyle | OK | NO | NO | Controls how the picker is presented. `currentContext`, `pageSheet`, `fullScreen`, `formSheet`, `popover`, `overFullScreen`, `overCurrentContext`. Default is `currentContext`. | | formatAsMp4 | OK | NO | NO | Converts the selected video to MP4 (iOS Only). | | assetRepresentationMode | OK | NO | NO | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | ## The Response Object | key | iOS | Android | Web | Description | | ------------ | --- | ------- | --- | ------------------------------------------------------------------- | | didCancel | OK | OK | OK | `true` if the user cancelled the process | | errorCode | OK | OK | OK | Check [ErrorCode](#ErrorCode) for all error codes | | errorMessage | OK | OK | OK | Description of the error, use it for debug purpose only | | assets | OK | OK | OK | Array of the selected media, [refer to Asset Object](#Asset-Object) | ## Asset Object | key | iOS | Android | Web | Photo/Video | Requires Permissions | Description | | --------- | --- | ------- | --- | ----------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | base64 | OK | OK | OK | PHOTO ONLY | NO | The base64 string of the image (photos only) | | uri | OK | OK | OK | BOTH | NO | The file uri in app specific cache storage. Except when picking **video from Android gallery** where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | | originalPath | NO | OK | NO | BOTH | NO | The original file path. | | width | OK | OK | OK | BOTH | NO | Asset dimensions | | height | OK | OK | OK | BOTH | NO | Asset dimensions | | fileSize | OK | OK | NO | BOTH | NO | The file size | | type | OK | OK | NO | BOTH | NO | The file type | | fileName | OK | OK | NO | BOTH | NO | The file name | | duration | OK | OK | NO | VIDEO ONLY | NO | The selected video duration in seconds | | bitrate | --- | OK | NO | VIDEO ONLY | NO | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | | timestamp | OK | OK | NO | BOTH | YES | Timestamp of the asset. Only included if 'includeExtra' is true | | id | OK | OK | NO | BOTH | YES | local identifier of the photo or video. On Android, this is the same as fileName | ## Note on file storage Image/video captured via camera will be stored in temporary folder allowing it to be deleted any time, so don't expect it to persist. Use `saveToPhotos: true` (default is `false`) to save the file in the public photos. `saveToPhotos` requires `WRITE_EXTERNAL_STORAGE` permission on Android 28 and below (The permission has to obtained by the App manually as the library does not handle that). For web, this doesn't work. ## ErrorCode | Code | Description | | ------------------ | ------------------------------------------------- | | camera_unavailable | Camera not available on device | | permission | Permission not satisfied | | others | Other errors (check errorMessage for description) | ## License [MIT](LICENSE.md) ", Assign "at most 3 tags" to the expected json: {"id":"5247","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"