diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 60c514479..b88d34d37 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,4 +1,4 @@ -* Fixedse read the following carefully before opening a new issue. +* Please read the following carefully before opening a new issue. Your issue may be closed if it does not provide the information required by this template. --- Delete everything above this line --- diff --git a/.gitignore b/.gitignore index e58ac8608..5b258f672 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,5 @@ yarn.lock ## Android iml *.iml + +.vscode/ \ No newline at end of file diff --git a/README.md b/README.md index fd1951c12..ab47336d9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -# 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) +# 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://npmcharts.com/compare/react-native-image-picker?minimal=true) ![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) A 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: @@ -8,7 +8,7 @@ iOS | Android | #### _Before you open an issue_ -This 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. +This 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. ## Table of contents - [Install](#install) @@ -27,7 +27,7 @@ This library started as a basic bridge of the native iOS image picker, and I wan `react-native link` -IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2, 3, and 5 for Android of the manual instructions below. +IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2 and 5 for Android of the manual instructions below. ### Manual Installation @@ -36,7 +36,23 @@ IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2, 3, and 1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ `Add Files to <...>` 2. Go to `node_modules` ➜ `react-native-image-picker` ➜ `ios` ➜ select `RNImagePicker.xcodeproj` 3. Add `RNImagePicker.a` to `Build Phases -> Link Binary With Libraries` -4. 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** +4. For iOS 10+, Add the `NSPhotoLibraryUsageDescription`, `NSCameraUsageDescription`, `NSPhotoLibraryAddUsageDescription` 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** + +``` + + + ... + NSPhotoLibraryUsageDescription + $(PRODUCT_NAME) would like access to your photo gallery + NSCameraUsageDescription + $(PRODUCT_NAME) would like to use your camera + NSPhotoLibraryAddUsageDescription + $(PRODUCT_NAME) would like to save photos to your photo gallery + NSMicrophoneUsageDescription + $(PRODUCT_NAME) would like to your microphone (for videos) + + +``` 5. Compile and have fun #### Android @@ -45,7 +61,7 @@ IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2, 3, and include ':react-native-image-picker' project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android') ``` - + 2. Update the android build tools version to `2.2.+` in `android/build.gradle`: ```gradle buildscript { @@ -56,27 +72,27 @@ IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2, 3, and ... } ... - ``` - + ``` + 3. Update the gradle version to `2.14.1` in `android/gradle/wrapper/gradle-wrapper.properties`: ``` ... distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip ``` - + 4. Add the compile line to the dependencies in `android/app/build.gradle`: ```gradle dependencies { compile project(':react-native-image-picker') } ``` - + 5. Add the required permissions in `AndroidManifest.xml`: ```xml ``` - + 6. Add the import and link the package in `MainApplication.java`: ```java import com.imagepicker.ImagePickerPackage; // <-- add this import @@ -96,7 +112,7 @@ IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2, 3, and ##### Android (Optional) -Customization settings of dialog `android/app/res/values/themes.xml`: +Customization settings of dialog `android/app/res/values/themes.xml` (`android/app/res/values/style.xml` is a valid path as well): ```xml @@ -110,7 +126,7 @@ Customization settings of dialog `android/app/res/values/themes.xml`: @color/your_color - + ``` If `MainActivity` is not instance of `ReactActivity`, you will need to implement `OnImagePickerPermissionsCallback` to `MainActivity`: @@ -239,7 +255,7 @@ storageOptions | OK | OK | If this key is provided, the image will be saved in y storageOptions.skipBackup | OK | - | If true, the photo will NOT be backed up to iCloud storageOptions.path | OK | - | If set, will save the image at `Documents/[path]/` rather than the root `Documents` storageOptions.cameraRoll | OK | OK | If true, the cropped photo will be saved to the iOS Camera Roll or Android DCIM folder. -storageOptions.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. +storageOptions.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 AND `cameraRoll` are both true. permissionDenied.title | - | OK | Title of explaining permissions dialog. By default `Permission denied`. permissionDenied.text | - | OK | Message of explaining permissions dialog. By default `To be able to take pictures with your camera and choose images from your library.`. permissionDenied.reTryTitle | - | OK | Title of re-try button. By default `re-try` @@ -256,8 +272,8 @@ data | OK | OK | The base64 encoded image data (photos only) uri | OK | OK | The uri to the local file asset on the device (photo or video) origURL | OK | - | The URL of the original asset in photo library, if it exists isVertical | OK | OK | Will be true if the image is vertically oriented -width | OK | OK | Image dimensions -height | OK | OK | Image dimensions +width | OK | OK | Image dimensions (photos only) +height | OK | OK | Image dimensions (photos only) fileSize | OK | OK | The file size (photos only) type | - | OK | The file type (photos only) fileName | OK (photos and videos) | OK (photos) | The file name diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml index 49c58f119..7cb436039 100644 --- a/android/src/main/AndroidManifest.xml +++ b/android/src/main/AndroidManifest.xml @@ -5,7 +5,7 @@ > diff --git a/android/src/main/java/com/imagepicker/FileProvider.java b/android/src/main/java/com/imagepicker/FileProvider.java new file mode 100644 index 000000000..9c706e6d3 --- /dev/null +++ b/android/src/main/java/com/imagepicker/FileProvider.java @@ -0,0 +1,4 @@ +package com.imagepicker; + +public class FileProvider extends android.support.v4.content.FileProvider { +} diff --git a/android/src/main/java/com/imagepicker/ImagePickerModule.java b/android/src/main/java/com/imagepicker/ImagePickerModule.java index 479fea268..c3cb1ac14 100644 --- a/android/src/main/java/com/imagepicker/ImagePickerModule.java +++ b/android/src/main/java/com/imagepicker/ImagePickerModule.java @@ -6,8 +6,10 @@ import android.content.Context; import android.content.DialogInterface; import android.content.Intent; +import android.content.pm.ResolveInfo; import android.graphics.BitmapFactory; import android.net.Uri; +import android.os.Build; import android.provider.MediaStore; import android.provider.Settings; import android.support.annotation.NonNull; @@ -44,6 +46,7 @@ import java.io.InputStream; import java.io.OutputStream; import java.lang.ref.WeakReference; +import java.util.List; import com.facebook.react.modules.core.PermissionListener; @@ -250,7 +253,12 @@ public void launchCamera(final ReadableMap options, final Callback callback) final File original = createNewFile(reactContext, this.options, false); imageConfig = imageConfig.withOriginalFile(original); - cameraCaptureURI = RealPathUtil.compatUriFromFile(reactContext, imageConfig.original); + if (imageConfig.original != null) { + cameraCaptureURI = RealPathUtil.compatUriFromFile(reactContext, imageConfig.original); + }else { + responseHelper.invokeError(callback, "Couldn't get file path for photo"); + return; + } if (cameraCaptureURI == null) { responseHelper.invokeError(callback, "Couldn't get file path for photo"); @@ -267,6 +275,17 @@ public void launchCamera(final ReadableMap options, final Callback callback) this.callback = callback; + // Workaround for Android bug. + // grantUriPermission also needed for KITKAT, + // see https://code.google.com/p/android/issues/detail?id=76683 + if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT) { + List resInfoList = reactContext.getPackageManager().queryIntentActivities(cameraIntent, PackageManager.MATCH_DEFAULT_ONLY); + for (ResolveInfo resolveInfo : resInfoList) { + String packageName = resolveInfo.activityInfo.packageName; + reactContext.grantUriPermission(packageName, cameraCaptureURI, Intent.FLAG_GRANT_WRITE_URI_PERMISSION | Intent.FLAG_GRANT_READ_URI_PERMISSION); + } + } + try { currentActivity.startActivityForResult(cameraIntent, requestCode); @@ -570,7 +589,9 @@ public void onReTry(WeakReference moduleInstance, innerActivity.startActivityForResult(intent, 1); } }); - dialog.show(); + if (dialog != null) { + dialog.show(); + } return false; } else diff --git a/android/src/main/java/com/imagepicker/permissions/PermissionUtils.java b/android/src/main/java/com/imagepicker/permissions/PermissionUtils.java index 8147114f5..cb62cbf2a 100644 --- a/android/src/main/java/com/imagepicker/permissions/PermissionUtils.java +++ b/android/src/main/java/com/imagepicker/permissions/PermissionUtils.java @@ -7,10 +7,12 @@ import android.support.v7.app.AlertDialog; import com.facebook.react.bridge.ReadableMap; +import com.facebook.react.bridge.ReadableNativeMap; import com.imagepicker.ImagePickerModule; import com.imagepicker.R; import java.lang.ref.WeakReference; +import java.util.HashMap; /** * Created by rusfearuth on 03.03.17. @@ -26,7 +28,16 @@ public class PermissionUtils { return null; } + if (!options.hasKey("permissionDenied")) + { + return null; + } final ReadableMap permissionDenied = options.getMap("permissionDenied"); + if (((ReadableNativeMap) permissionDenied).toHashMap().size() == 0) + { + return null; + } + final String title = permissionDenied.getString("title"); final String text = permissionDenied.getString("text"); final String btnReTryTitle = permissionDenied.getString("reTryTitle"); diff --git a/android/src/main/java/com/imagepicker/utils/MediaUtils.java b/android/src/main/java/com/imagepicker/utils/MediaUtils.java index 851bd13c2..b499c22ce 100644 --- a/android/src/main/java/com/imagepicker/utils/MediaUtils.java +++ b/android/src/main/java/com/imagepicker/utils/MediaUtils.java @@ -79,13 +79,23 @@ public class MediaUtils public static @NonNull ImageConfig getResizedImage(@NonNull final Context context, @NonNull final ReadableMap options, @NonNull final ImageConfig imageConfig, - final int initialWidth, - final int initialHeight, + int initialWidth, + int initialHeight, final int requestCode) { BitmapFactory.Options imageOptions = new BitmapFactory.Options(); imageOptions.inScaled = false; - // FIXME: OOM here + imageOptions.inSampleSize = 1; + + if (imageConfig.maxWidth != 0 || imageConfig.maxHeight != 0) { + while ((imageConfig.maxWidth == 0 || initialWidth > 2 * imageConfig.maxWidth) && + (imageConfig.maxHeight == 0 || initialHeight > 2 * imageConfig.maxHeight)) { + imageOptions.inSampleSize *= 2; + initialHeight /= 2; + initialWidth /= 2; + } + } + Bitmap photo = BitmapFactory.decodeFile(imageConfig.original.getAbsolutePath(), imageOptions); if (photo == null) @@ -165,11 +175,9 @@ public class MediaUtils result = result.withResizedFile(resized); - FileOutputStream fos; - try + try (FileOutputStream fos = new FileOutputStream(result.resized)) { - fos = new FileOutputStream(result.resized); - fos.write(bytes.toByteArray()); + bytes.writeTo(fos); } catch (IOException e) { diff --git a/index.js.flow b/index.js.flow new file mode 100644 index 000000000..7dc90d144 --- /dev/null +++ b/index.js.flow @@ -0,0 +1,60 @@ +// @flow + +export type Response = { + customButton: string; + didCancel: boolean; + error: string; + data: string; + uri: string; + origURL?: string; + isVertical: boolean; + width: number; + height: number; + fileSize: number; + type?: string; + fileName?: string; + path?: string; + latitude?: number; + longitude?: number; + timestamp?: string; +} + +export type CustomButtonOptions = { + name?: string; + title?: string; +} + +export type Options = { + title?: string; + cancelButtonTitle?: string; + takePhotoButtonTitle?: string; + chooseFromLibraryButtonTitle?: string; + customButtons?: Array; + cameraType?: 'front' | 'back'; + mediaType?: 'photo' | 'video' | 'mixed'; + maxWidth?: number; + maxHeight?: number; + quality?: number; + videoQuality?: 'low' | 'medium' | 'high'; + durationLimit?: number; + rotation?: number; + allowsEditing?: boolean; + noData?: boolean; + storageOptions?: StorageOptions; +} + +export type StorageOptions = { + skipBackup?: boolean; + path?: string; + cameraRoll?: boolean; + waitUntilSaved?: boolean; +} + +declare export function showImagePicker(options: ?Options, callback: (response: Response) => any): void; +declare export function showImagePicker(callback: (response: Response) => any): void; + +declare export function launchCamera(options: ?Options, callback: (response: Response) => any): void; +declare export function launchCamera(callback: (response: Response) => any): void; + +declare export function launchImageLibrary(options: ?Options, callback: (response: Response) => any): void; +declare export function launchImageLibrary(callback: (response: Response) => any): void; diff --git a/ios/ImagePickerManager.m b/ios/ImagePickerManager.m index 9bb0a206e..d748364d6 100644 --- a/ios/ImagePickerManager.m +++ b/ios/ImagePickerManager.m @@ -3,6 +3,7 @@ #import #import #import +#import @import MobileCoreServices; @@ -80,10 +81,7 @@ @implementation ImagePickerManager } dispatch_async(dispatch_get_main_queue(), ^{ - UIViewController *root = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; - while (root.presentedViewController != nil) { - root = root.presentedViewController; - } + UIViewController *root = RCTPresentedViewController(); /* On iPad, UIAlertController presents a popover view rather than an action sheet like on iPhone. We must provide the location of the location to show the popover in this case. For simplicity, we'll just display it on the bottom center of the screen @@ -189,10 +187,7 @@ - (void)launchImagePicker:(RNImagePickerTarget)target // Check permissions void (^showPickerViewController)() = ^void() { dispatch_async(dispatch_get_main_queue(), ^{ - UIViewController *root = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; - while (root.presentedViewController != nil) { - root = root.presentedViewController; - } + UIViewController *root = RCTPresentedViewController(); [root presentViewController:self.picker animated:YES completion:nil]; }); }; diff --git a/package.json b/package.json index 1790dc81b..1b0ac5650 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "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", + "version": "0.26.8", "main": "index.js", "repository": { "type": "git", @@ -32,7 +32,7 @@ "picker" ], "scripts": { - "prepublish": "rm -rf android/build Example/android/build Example/android/app/build node_modules" + "prepare": "rm -rf android/build Example/android/build Example/android/app/build node_modules" }, "types": "./index.d.ts" }