Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
Haitao Li committed May 12, 2018
2 parents 96ce16d + 75f2ae8 commit 200d276
Show file tree
Hide file tree
Showing 11 changed files with 153 additions and 36 deletions.
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -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 ---
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,5 @@ yarn.lock

## Android iml
*.iml

.vscode/
46 changes: 31 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -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:

Expand All @@ -8,7 +8,7 @@ iOS | Android
<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">

#### _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)
Expand All @@ -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

Expand All @@ -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**

```
<plist version="1.0">
<dict>
...
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery</string>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to your microphone (for videos)</string>
</dict>
</plist>
```
5. Compile and have fun

#### Android
Expand All @@ -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 {
Expand All @@ -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
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
```
6. Add the import and link the package in `MainApplication.java`:
```java
import com.imagepicker.ImagePickerPackage; // <-- add this import
Expand All @@ -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
<?xml version="1.0" encoding="utf-8"?>
<resources>
Expand All @@ -110,7 +126,7 @@ Customization settings of dialog `android/app/res/values/themes.xml`:
<!-- Used for the background -->
<item name="android:background">@color/your_color</item>
</style>
<resources>
</resources>
```

If `MainActivity` is not instance of `ReactActivity`, you will need to implement `OnImagePickerPermissionsCallback` to `MainActivity`:
Expand Down Expand Up @@ -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`
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion android/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
>
<application>
<provider
android:name="android.support.v4.content.FileProvider"
android:name="com.imagepicker.FileProvider"
android:authorities="${applicationId}.provider"
android:exported="false"
android:grantUriPermissions="true">
Expand Down
4 changes: 4 additions & 0 deletions android/src/main/java/com/imagepicker/FileProvider.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
package com.imagepicker;

public class FileProvider extends android.support.v4.content.FileProvider {
}
25 changes: 23 additions & 2 deletions android/src/main/java/com/imagepicker/ImagePickerModule.java
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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");
Expand All @@ -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<ResolveInfo> 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);
Expand Down Expand Up @@ -570,7 +589,9 @@ public void onReTry(WeakReference<ImagePickerModule> moduleInstance,
innerActivity.startActivityForResult(intent, 1);
}
});
dialog.show();
if (dialog != null) {
dialog.show();
}
return false;
}
else
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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");
Expand Down
22 changes: 15 additions & 7 deletions android/src/main/java/com/imagepicker/utils/MediaUtils.java
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
{
Expand Down
60 changes: 60 additions & 0 deletions index.js.flow
Original file line number Diff line number Diff line change
@@ -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<CustomButtonOptions>;
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;
11 changes: 3 additions & 8 deletions ios/ImagePickerManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
#import <AssetsLibrary/AssetsLibrary.h>
#import <AVFoundation/AVFoundation.h>
#import <Photos/Photos.h>
#import <React/RCTUtils.h>

@import MobileCoreServices;

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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];
});
};
Expand Down
Loading

0 comments on commit 200d276

Please sign in to comment.