{"_id":"@2hats/react-native-image-picker","_rev":"2-19037e7740540ad98bae38c84e6f0542","name":"@2hats/react-native-image-picker","description":"A React Native module that allows you to use native UI to select media from the device library or directly from the camera","dist-tags":{"latest":"0.26.4"},"versions":{"0.26.2":{"name":"@2hats/react-native-image-picker","description":"A React Native module that allows you to use native UI to select media from the device library or directly from the camera","version":"0.26.2","main":"index.js","repository":{"type":"git","url":"git+https://github.com/marcshilling/react-native-image-picker.git"},"nativePackage":true,"author":{"name":"Marc Shilling","url":"marcshilling"},"contributors":[{"name":"Matheus Santos","email":"vorj.dux@gmail.com"},{"name":"Yoann Fuks","email":"yfuks@student.42.fr"},{"name":"Alexander Ustinov","email":"rusfearuth@gmail.com"}],"keywords":["react-native","react-native-image-picker","react","native","image","picker"],"scripts":{"prepublish":"rm -rf android/build Example/android/build Example/android/app/build node_modules"},"types":"./index.d.ts","gitHead":"2c318fceb5d3b8e25f2cafa0ee6c8bd31ab9c7af","bugs":{"url":"https://github.com/marcshilling/react-native-image-picker/issues"},"homepage":"https://github.com/marcshilling/react-native-image-picker#readme","_id":"@2hats/react-native-image-picker@0.26.2","_npmVersion":"5.0.4","_nodeVersion":"8.1.2","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-2FKtjAOm5FhPP8jPHpuyVAwny0O+RmOs/UpuMlZpPAvfUZI/KgxuF1Zom28rmIcjXify/0vKE1TpIG+7RBBktg==","shasum":"dda50fa795fd110abe3f8f220982eddb4ecda488","tarball":"https://registry.npmjs.org/@2hats/react-native-image-picker/-/react-native-image-picker-0.26.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCefBZl9nSA7m9GVrCMvL2ZhxjNggyvLw21uIYJtZokLQIhAJunKmgRm06tkp2QdJqWX9Zjr1TfTQoIFLGUnGEKYzFf"}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-picker-0.26.2.tgz_1499861713643_0.49240109720267355"}},"0.26.4":{"name":"@2hats/react-native-image-picker","description":"A React Native module that allows you to use native UI to select media from the device library or directly from the camera","version":"0.26.4","main":"index.js","repository":{"type":"git","url":"git+https://github.com/marcshilling/react-native-image-picker.git"},"nativePackage":true,"author":{"name":"Marc Shilling","url":"marcshilling"},"contributors":[{"name":"Matheus Santos","email":"vorj.dux@gmail.com"},{"name":"Yoann Fuks","email":"yfuks@student.42.fr"},{"name":"Alexander Ustinov","email":"rusfearuth@gmail.com"}],"keywords":["react-native","react-native-image-picker","react","native","image","picker"],"scripts":{"prepare":"rm -rf android/build Example/android/build Example/android/app/build node_modules"},"types":"./index.d.ts","gitHead":"14fb933a73571c72227739ee8a0d5e73a07f0f4d","bugs":{"url":"https://github.com/marcshilling/react-native-image-picker/issues"},"homepage":"https://github.com/marcshilling/react-native-image-picker#readme","_id":"@2hats/react-native-image-picker@0.26.4","_npmVersion":"5.3.0","_nodeVersion":"7.5.0","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-l8JPX2DD/5FRS9zGTu78V3FGVf45Wcur+0WOaVmV8BKMOe2nr2wEo5SuqC1FwVN+LAdTBDrzD3WoipOVyn18ZA==","shasum":"f9e5f0a3396463057df596e0bdf7feed37677376","tarball":"https://registry.npmjs.org/@2hats/react-native-image-picker/-/react-native-image-picker-0.26.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRyTa4NRZA7XaEWB7jcp94VBNryR2j9DKwIEFmba70bgIgXZ16dMtrUxut3qWxT6aWUGA2osCuC1PP58DfeKzF1oY="}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-picker-0.26.4.tgz_1502932550949_0.32389177940785885"}}},"readme":"\n# React Native Image Picker [![npm version](https://badge.fury.io/js/react-native-image-picker.svg)](https://badge.fury.io/js/react-native-image-picker) [![npm](https://img.shields.io/npm/dt/react-native-image-picker.svg)](https://www.npmjs.org/package/react-native-image-picker) ![MIT](https://img.shields.io/dub/l/vibe-d.svg) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) [![Gitter chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-native-image-picker/Lobby)\n\nA React Native module that allows you to use native UI to select a photo/video from the device library or directly from the camera, like so:\n\niOS | Android\n------- | ----\n<img title=\"iOS\" src=\"https://github.com/marcshilling/react-native-image-picker/blob/master/images/ios-image.png\"> | <img title=\"Android\" src=\"https://github.com/marcshilling/react-native-image-picker/blob/master/images/android-image.png\">\n\n#### _Before you open an issue_\nThis library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native `UIImagePickerController` supports will not be supported here. **Multiple image selection, more control over the crop tool, and landscape support** are things missing from the native iOS functionality - **not issues with my library**. If you need these things, [react-native-image-crop-picker](https://github.com/ivpusic/react-native-image-crop-picker) might be a better choice for you.   \n\n## Table of contents\n- [Install](#install)\n- [Usage](#usage)\n- [Direct launch](#directly-launching-the-camera-or-image-library)\n- [Options](#options)\n- [Response object](#the-response-object)\n\n## Install\n\n### NOTE: THIS PACKAGE IS NOW BUILT FOR REACT NATIVE 0.40 OR GREATER! IF YOU NEED TO SUPPORT REACT NATIVE < 0.40, YOU SHOULD INSTALL THIS PACKAGE `@0.24`\n\n`npm install react-native-image-picker@latest --save`\n\n### Automatic Installation\n\n`react-native link`\n\nIMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2, 3, and 5 for Android of the manual instructions below.\n\n### Manual Installation\n\n#### iOS\n\n1. In the XCode's \"Project navigator\", right click on your project's Libraries folder ➜ `Add Files to <...>`\n2. Go to `node_modules` ➜ `react-native-image-picker` ➜ `ios` ➜ select `RNImagePicker.xcodeproj`\n3. Add `RNImagePicker.a` to `Build Phases -> Link Binary With Libraries`\n4. For iOS 10+, Add the `NSPhotoLibraryUsageDescription`, `NSCameraUsageDescription`, and `NSMicrophoneUsageDescription` (if allowing video) keys to your `Info.plist` with strings describing why your app needs these permissions. **Note: You will get a SIGABRT crash if you don't complete this step**\n5. Compile and have fun\n\n#### Android\n1. Add the following lines to `android/settings.gradle`:\n    ```gradle\n    include ':react-native-image-picker'\n    project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')\n    ```\n    \n2. Update the android build tools version to `2.2.+` in `android/build.gradle`:\n    ```gradle\n    buildscript {\n        ...\n        dependencies {\n            classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version\n        }\n        ...\n    }\n    ...\n    ``` \n    \n3. Update the gradle version to `2.14.1` in `android/gradle/wrapper/gradle-wrapper.properties`:\n    ```\n    ...\n    distributionUrl=https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip\n    ```\n    \n4. Add the compile line to the dependencies in `android/app/build.gradle`:\n    ```gradle\n    dependencies {\n        compile project(':react-native-image-picker')\n    }\n    ```\n    \n5. Add the required permissions in `AndroidManifest.xml`:\n    ```xml\n    <uses-permission android:name=\"android.permission.CAMERA\" />\n    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>\n    ```\n    \n6. Add the import and link the package in `MainApplication.java`:\n    ```java\n    import com.imagepicker.ImagePickerPackage; // <-- add this import\n\n    public class MainApplication extends Application implements ReactApplication {\n        @Override\n        protected List<ReactPackage> getPackages() {\n            return Arrays.<ReactPackage>asList(\n                new MainReactPackage(),\n                new ImagePickerPackage() // <-- add this line\n                // OR if you want to customize dialog style\n                new ImagePickerPackage(R.style.my_dialog_style)\n            );\n        }\n    }\n    ```\n\n##### Android (Optional)\n\nCustomization settings of dialog `android/app/res/values/themes.xml`:\n```xml\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<resources>\n    <style name=\"DefaultExplainingPermissionsTheme\" parent=\"Theme.AppCompat.Light.Dialog.Alert\">\n        <!-- Used for the buttons -->\n        <item name=\"colorAccent\">@color/your_color</item>\n\n        <!-- Used for the title and text -->\n        <item name=\"android:textColorPrimary\">@color/your_color</item>\n\n        <!-- Used for the background -->\n        <item name=\"android:background\">@color/your_color</item>\n    </style>\n<resources>\n```\n\nIf `MainActivity` is not instance of `ReactActivity`, you will need to implement `OnImagePickerPermissionsCallback` to `MainActivity`:\n```java\nimport com.imagepicker.permissions.OnImagePickerPermissionsCallback; // <- add this import\nimport com.facebook.react.modules.core.PermissionListener; // <- add this import\n\npublic class MainActivity extends YourActivity implements OnImagePickerPermissionsCallback {\n  private PermissionListener listener; // <- add this attribute\n\n  // Your methods here\n\n  // Copy from here\n\n  @Override\n  public void setPermissionListener(PermissionListener listener)\n  {\n    this.listener = listener;\n  }\n\n  @Override\n  public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults)\n  {\n    if (listener != null)\n    {\n      listener.onRequestPermissionsResult(requestCode, permissions, grantResults);\n    }\n    super.onRequestPermissionsResult(requestCode, permissions, grantResults);\n  }\n\n  // To here\n}\n```\nThis code allows to pass result of request permissions to native part.\n\n## Usage\n\n```javascript\nvar ImagePicker = require('react-native-image-picker');\n\n// More info on all the options is below in the README...just some common use cases shown here\nvar options = {\n  title: 'Select Avatar',\n  customButtons: [\n    {name: 'fb', title: 'Choose Photo from Facebook'},\n  ],\n  storageOptions: {\n    skipBackup: true,\n    path: 'images'\n  }\n};\n\n/**\n * The first arg is the options object for customization (it can also be null or omitted for default options),\n * The second arg is the callback which sends object: response (more info below in README)\n */\nImagePicker.showImagePicker(options, (response) => {\n  console.log('Response = ', response);\n\n  if (response.didCancel) {\n    console.log('User cancelled image picker');\n  }\n  else if (response.error) {\n    console.log('ImagePicker Error: ', response.error);\n  }\n  else if (response.customButton) {\n    console.log('User tapped custom button: ', response.customButton);\n  }\n  else {\n    let source = { uri: response.uri };\n\n    // You can also display the image using data:\n    // let source = { uri: 'data:image/jpeg;base64,' + response.data };\n\n    this.setState({\n      avatarSource: source\n    });\n  }\n});\n```\nThen later, if you want to display this image in your render() method:\n```javascript\n<Image source={this.state.avatarSource} style={styles.uploadAvatar} />\n```\n\n### Directly Launching the Camera or Image Library\n\nTo Launch the Camera or Image Library directly (skipping the alert dialog) you can\ndo the following:\n```javascript\n// Launch Camera:\nImagePicker.launchCamera(options, (response)  => {\n  // Same code as in above section!\n});\n\n// Open Image Library:\nImagePicker.launchImageLibrary(options, (response)  => {\n  // Same code as in above section!\n});\n```\n\n\n#### Note\nOn iOS, don't assume that the absolute uri returned will persist. See [#107](/../../issues/107)\n\n### Options\n\noption | iOS  | Android | Info\n------ | ---- | ------- | ----\ntitle | OK | OK | Specify `null` or empty string to remove the title\ncancelButtonTitle | OK | OK | Specify `null` or empty string to remove this button (Android only)\ntakePhotoButtonTitle | OK | OK | Specify `null` or empty string to remove this button\nchooseFromLibraryButtonTitle | OK | OK | Specify `null` or empty string to remove this button\ncustomButtons | OK | OK | An array containing objects with the name and title of buttons\ncameraType | OK | - | 'front' or 'back'\nmediaType | OK | OK | 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android\nmaxWidth | OK | OK | Photos only\nmaxHeight | OK | OK | Photos only\nquality | OK | OK | 0 to 1, photos only\nvideoQuality | OK |  OK | 'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android\ndurationLimit | OK | OK | Max video recording time, in seconds\nrotation | - | OK | Photos only, 0 to 360 degrees of rotation\nallowsEditing | OK | - | bool - enables built in iOS functionality to resize the image after selection\nnoData | OK | OK | If true, disables the base64 `data` field from being generated (greatly improves performance on large photos)\nstorageOptions | OK | OK | If this key is provided, the image will be saved in your app's `Documents` directory on iOS, or your app's `Pictures` directory on Android (rather than a temporary directory)\nstorageOptions.skipBackup | OK | - | If true, the photo will NOT be backed up to iCloud\nstorageOptions.path | OK | - | If set, will save the image at `Documents/[path]/` rather than the root `Documents`\nstorageOptions.cameraRoll | OK | OK | If true, the cropped photo will be saved to the iOS Camera Roll or Android DCIM folder.\nstorageOptions.waitUntilSaved | OK | - | If true, will delay the response callback until after the photo/video was saved to the Camera Roll. If the photo or video was just taken, then the file name and timestamp fields are only provided in the response object when this is true.\npermissionDenied.title | - | OK | Title of explaining permissions dialog. By default `Permission denied`.\npermissionDenied.text | - | OK | Message of explaining permissions dialog. By default `To be able to take pictures with your camera and choose images from your library.`.\npermissionDenied.reTryTitle | - | OK | Title of re-try button. By default `re-try`\npermissionDenied.okTitle | - | OK | Title of ok button. By default `I'm sure`\n\n### The Response Object\n\nkey | iOS | Android | Description\n------ | ---- | ------- | ----------------------\ndidCancel | OK | OK | Informs you if the user cancelled the process\nerror | OK | OK | Contains an error message, if there is one\ncustomButton | OK | OK | If the user tapped one of your custom buttons, contains the name of it\ndata | OK | OK | The base64 encoded image data (photos only)\nuri | OK | OK | The uri to the local file asset on the device (photo or video)\norigURL | OK | - | The URL of the original asset in photo library, if it exists\nisVertical | OK | OK | Will be true if the image is vertically oriented\nwidth | OK | OK | Image dimensions\nheight | OK | OK | Image dimensions\nfileSize | OK | OK | The file size (photos only)\ntype | - | OK | The file type (photos only)\nfileName | OK (photos and videos) | OK (photos) | The file name\npath | - | OK | The file path\nlatitude | OK | OK | Latitude metadata, if available\nlongitude | OK | OK | Longitude metadata, if available\ntimestamp | OK | OK | Timestamp metadata, if available, in ISO8601 UTC format\noriginalRotation | - | OK | Rotation degrees (photos only) *See [#109](/../../issues/199)*\n","maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"time":{"modified":"2022-04-04T10:42:18.043Z","created":"2017-07-12T12:15:13.897Z","0.26.2":"2017-07-12T12:15:13.897Z","0.26.4":"2017-08-17T01:15:51.048Z"},"homepage":"https://github.com/marcshilling/react-native-image-picker#readme","keywords":["react-native","react-native-image-picker","react","native","image","picker"],"repository":{"type":"git","url":"git+https://github.com/marcshilling/react-native-image-picker.git"},"contributors":[{"name":"Matheus Santos","email":"vorj.dux@gmail.com"},{"name":"Yoann Fuks","email":"yfuks@student.42.fr"},{"name":"Alexander Ustinov","email":"rusfearuth@gmail.com"}],"author":{"name":"Marc Shilling","url":"marcshilling"},"bugs":{"url":"https://github.com/marcshilling/react-native-image-picker/issues"},"readmeFilename":"README.md"}