status-im/react-native-image-crop-picker
2
0
Fork 0
mirror of https://github.com/status-im/react-native-image-crop-picker.git synced 2025-02-23 10:58:16 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #148 from theseansy/camera-cropper-tint-color

Browse Source 
Allow user to specify brand color for cropper
This commit is contained in:
Ivan Pusic 2016-11-18 03:09:48 +01:00 committed by GitHub
commit 0e7f318cb5
2 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -67,6 +67,7 @@ ImagePicker.clean().then(() => {
| height | number | Height of result image when used with `cropping` option |
| multiple | bool (default false) | Enable or disable multiple image selection |
| includeBase64 | bool (default false) | Enable or disable returning base64 data with image |
| cropperTintColor (android only) | string (default `"#424242"`) | When cropping image, determines the color of Toolbar and other UX elements. Uses UCrop's `setToolbarColor, setActiveWidgetColor, and setStatusBarColor` with color specified. |
| maxFiles (ios only) | number (default 5) | Max number of files to select when using `multiple` option |
| compressVideo (ios only) | bool (default true) | When video is selected, compress it and convert it to mp4 |
| smartAlbums (ios only) | array (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']) | List of smart albums to choose from |

30
android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
View File

@ -5,6 +5,7 @@ import android.content.ClipData;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.media.MediaMetadataRetriever;
import android.net.Uri;
import android.os.Build;
@ -65,6 +66,15 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
private boolean cropping = false;
private boolean multiple = false;
private boolean includeBase64 = false;
//Default colors from from https://material.google.com/style/color.html#
//Grey 800
private final String DEFAULT_TINT = "#424242";
private String cropperTintColor = DEFAULT_TINT;
//Light Blue 500
private final String DEFAULT_WIDGET_COLOR = "#03A9F4";
private int width = 200;
private int height = 200;
private final ReactApplicationContext mReactContext;
@ -95,6 +105,8 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
width = options.hasKey("width") ? options.getInt("width") : width;
height = options.hasKey("height") ? options.getInt("height") : height;
cropping = options.hasKey("cropping") ? options.getBoolean("cropping") : cropping;
cropperTintColor = options.hasKey("cropperTintColor") ? options.getString("cropperTintColor") : cropperTintColor;
}
private void deleteRecursive(File fileOrDirectory) {
@ -440,9 +452,27 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
return image;
}
private void configureCropperColors(UCrop.Options options) {
int color = Color.parseColor(cropperTintColor);
options.setToolbarColor(color);
options.setStatusBarColor(color);
if (cropperTintColor.equals(DEFAULT_TINT)) {
/*
Default tint is grey => use a more flashy color that stands out more as the call to action
Here we use 'Light Blue 500' from https://material.google.com/style/color.html#color-color-palette
*/
options.setActiveWidgetColor(Color.parseColor(DEFAULT_WIDGET_COLOR));
} else {
//If they pass a custom tint color in, we use this for everything
options.setActiveWidgetColor(color);
}
}
private void startCropping(Activity activity, Uri uri) {
UCrop.Options options = new UCrop.Options();
options.setCompressionFormat(Bitmap.CompressFormat.JPEG);
configureCropperColors(options);
UCrop.of(uri, Uri.fromFile(new File(this.getTmpDir(), UUID.randomUUID().toString() + ".jpg")))
.withMaxResultSize(width, height)