bamlab / react-native-image-resizer

🗻 Resize local images with React Native

React Native Image Resizer

⚠ Warning Since version 3.0.0 this library has been moved from react-native-image-resizer to @bam.tech/react-native-image-resizer

Setup

React Native >= 0.61

Since the version version 3.0.0 this package support the new architecture out of the box (Turbo Module). It also has retrocompatibility with the old one.

yarn add @bam.tech/react-native-image-resizer
cd ios && pod install

React Native <= 0.60

yarn add [email protected]
cd ios && pod install

Android

Note: on latest versions of React Native, you may have an error during the Gradle build on Android (com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim). Run cd android && ./gradlew clean to fix this.

Manual linking

Manual link information for Android: Link

Usage example

import ImageResizer from '@bam.tech/react-native-image-resizer';

ImageResizer.createResizedImage(
  path,
  maxWidth,
  maxHeight,
  compressFormat,
  quality,
  rotation,
  outputPath
)
  .then((response) => {
    // response.uri is the URI of the new image that can now be displayed, uploaded...
    // response.path is the path of the new image
    // response.name is the name of the new image with the extension
    // response.size is the size of the new image
  })
  .catch((err) => {
    // Oops, something went wrong. Check that the filename is correct and
    // inspect err to get more details.
  });

Sample app

A basic, sample app is available in the example folder. It uses the module to resize a photo from the Camera Roll.

API

createResizedImage(
  /**
   * uri parameter accepts`path` or `uri`.
   * This property has been tested with the output of @bam.tech/react-native-image-picker,
   * react-native-vision-camera, @react-native-camera-roll/camera-roll and http link
   **/
  uri,
  maxWidth,
  maxHeight,
  compressFormat,
  quality,
  (rotation = 0),
  outputPath,
  (keepMeta = false),
  (options = {})
); // Returns a Promise

The promise resolves with an object containing: path, uri, name, size (bytes), width (pixels), and height of the new file. The URI can be used directly as the source of an <Image> component.

Option	Description
path	Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png.
width	Width to resize to (see mode for more details)
height	Height to resize to (see mode for more details)
compressFormat	Can be either JPEG, PNG or WEBP (android only).
quality	A number between 0 and 100. Used for the JPEG compression.
rotation	Rotation to apply to the image, in degrees, for android. On iOS, rotation is limited (and rounded) to multiples of 90 degrees.
outputPath	The resized image path. If null, resized image will be stored in cache folder. To set outputPath make sure to add option for rotation too (if no rotation is needed, just set it to 0).
keepMeta	If true, will attempt to preserve all file metadata/exif info, except the orientation value since the resizing also does rotation correction to the original image. Defaults to false, which means all metadata is lost. Note: This can only be true for JPEG images which are loaded from the file system (not Web).
options.mode	Similar to react-native Image's resizeMode: either contain (the default), cover, or stretch. contain will fit the image within width and height, preserving its ratio. cover preserves the aspect ratio, and makes sure the image is at least width wide or height tall. stretch will resize the image to exactly width and height.
options.onlyScaleDown	If true, will never enlarge the image, and will only make it smaller.

Limitations

• If you are using @react-native-camera-roll/camera-roll with new architecture enabled this library is not going to work. If you try to display an image with the uri of the library using <Image /> you are going to have the following error: No suitable image URL loader found for ph://.... This error come from the ReactNative ImageLoader, which is the one we are currently using. Help/PR for solving this are welcome. Until then, we recommend using react-native-image-picker.
• Image EXIF orientation are correctly handled on Android only, But not yet on IOS #402.

👉 About Bam

We are a 100 people company developing and designing multiplatform applications with React Native using the Lean & Agile methodology. To get more information on the solutions that would suit your needs, feel free to get in touch by email or through or contact form!

We will always answer you with pleasure 😁

react-native-image-resizer's Issues

Error resizing base64 image

image is defined and a valid base64 image data.

        ImageResizer.createResizedImage(`data:image/jpeg${image}`, 800, 600, 'JPEG', 80).then( uri => {
        }).catch( err => Alert.alert(JSON.stringify(err)))

When I run this, it retuns returns no useful information telling me what went wrong:

{"line":85298,"column":40,"sourceURL":"http://192.168.0.12:8081/imdex.ios.bundle?platform=ios&dev=true&hot=true"}

react-natvie: 0.24.1
react-native-image-resizer: 0.0.12

Invalid crop rectangle: [0, -473, 360, 473]

Fatal Exception: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Invalid crop rectangle: [0, -473, 360, 473]
       at com.facebook.react.modules.camera.ImageEditingManager$CropTask.<init>(ImageEditingManager.java:222)
       at com.facebook.react.modules.camera.ImageEditingManager$CropTask.<init>(ImageEditingManager.java:199)
       at com.facebook.react.modules.camera.ImageEditingManager.cropImage(ImageEditingManager.java:189)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
       at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:746)
       at android.os.Handler.dispatchMessage(Handler.java:95)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
       at android.os.Looper.loop(Looper.java:148)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
       at java.lang.Thread.run(Thread.java:818)

Feature request: image cropping / reshaping

Would anyone else find this useful?

[iOS]loadImageWithTag is deprecated

Resize image succeed in ios, but there is a warning message in console. It seems to some function's name changed in new React Native version.

[RCTImageLoader loadImageWithTag:callback:] is deprecated. Instead use [RCTImageLoader loadImageWithURLRequest:callback:]

Feature request: support gifs (and animated gifs)

Bitmap.getWidth() on null object Refference

Hi,

I got this error when createResizedImage

and my code:
ImageResizer.createResizedImage(source.uri, 800, 600, 'JPEG', 80) {....}
where source.uri is from ImagePicker.

Thanks

TypeError: undefined is not an object: evaluating ImageResizerAndroid.createResizedImage

Hi all,
I get the error above when I select an image. I am using Google Nexus 6 emulator and here's my code snippet:

..
import ImageResizer from 'react-native-image-resizer';
..
resize(uri) {
        // source = { uri: response.uri.replace('file://', ''), isStatic: true };
        alert(ImageResizer);
        ImageResizer.createResizedImage(uri, 600, 400, 'JPEG', 80)
            .then((resizedImageUri) => {
                this.setState({
                    isLoadingImage: false,
                    imageSource: { uri: resizedImageUri, isStatic: true }
                });
            }).catch((err) => {
                alert(err)
                return Alert.alert('Unable to resize the photo',
                    'Check the console for full the error message');
            });
    }

Thanks for your time in advance.

[Feature] Automatic releasing

Can you add commitizen and semantic-release for better release notes, automated NPM publish?

https://github.com/commitizen/cz-cli
https://github.com/semantic-release/semantic-release

TypeError: Cannot read property 'createResizedImage' of undefined

IOS does work as expected, but Android returns this error: "TypeError: Cannot read property 'createResizedImage' of undefined" -- ('Nexus 5 - 6.0.1', "react-native": "^0.24.1", and "react-native-image-resizer": "0.0.3"). I appreciate any help or feedback.

(note: I can see the object and function)
console.log(' ImageResizer: ' + (typeof ImageResizer)); //ImageResizer: object
console.log('createResizedImage: ' + (typeof ImageResizer.createResizedImage)); //createResizedImage: function

thanks

Cannot read file with React Native FS

Not sure what's going on here:
Here's a sample app I am working on and am debugging.

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import Camera from 'react-native-camera';

import ImageResizer from 'react-native-image-resizer';

var cv = require('./computervision');
global.Buffer = global.Buffer || require('buffer').Buffer;
import RNFS from 'react-native-fs';

class testcase2 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}>
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
        </Camera>
      </View>
    );
  }

  takePicture() {
    this.camera.capture()
      .then((data) => {
        console.log(data);
        ImageResizer.createResizedImage(data.path, 736, 500, 'JPEG', 25, 0)
        .then((cv_image) => {
          var img = 'file:///' + (cv_image.replace('file:/', ''));

          setTimeout(() => {

            RNFS.readFile(img, 'UTF8')
            .then((file) => {
              console.log(file);
              file = new Buffer(file);
              console.log("Running CV App");
              cv(file);
            })

          }, 2500);

        })
        .catch((err) => {
          if (err) throw err;
        });
      })
      .catch(err => console.error(err));
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
});

AppRegistry.registerComponent('testcase2', () => testcase2);

rn 0.32 ios is not working

return imageResizer.createResizedImage(imageUri, newWidth, newHeight, 'JPEG', 50).then(resizedImageUri => {
// resizeImageUri is the URI of the new image that can now be displayed, uploaded...
return {uri:resizedImageUri, width: newWidth, height:newHeight};
});

imageUri:
assets-library://asset/asset.JPG?id=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED&ext=JPG"

output filename has two periods before file ext

On iOS, I'm getting output paths like this: /var/mobile/Containers/Data/Application/D06BD11D-5917-457D-91A8-88605D8F57A2/Library/Caches/1EF212DD-2F31-40F5-B1CF-BB46EEA3F3A2..jpg

Notice the filename is 1EF212DD-2F31-40F5-B1CF-BB46EEA3F3A2..jpg; there are two periods between the basename and file extension. Not cool (not fatal, tho).

Here's the relevant snippet of code:

// input file; a 1920x1080 png captured using react-native-camera
let rawUri = '/var/mobile/Containers/Data/Application/D06BD11D-5917-457D-91A8-88605D8F57A2/Documents/218341f0-1315-11e6-b13e-e7a9c5726d5b.png';

return ImageResizer.createResizedImage(rawUri, 80, 1000, 'JPEG', 80)
.then((thumbUri) => {
    console.log(thumbUri);
    //=> /var/mobile/Containers/Data/Application/D06BD11D-5917-457D-91A8-88605D8F57A2/Library/Caches/1EF212DD-2F31-40F5-B1CF-BB46EEA3F3A2..jpg
});

Have not tested on Android (yet).

outputPath should include filename

Currently there isn't a way to set the filename of the resized image.
I know I can do a rename afterward, but it would be cleaner to set the target image name within the API

Image creation seems to work fine, but image does not exist

I am using RNFS to set a default folder for all my images. When I call the createResizedImage everything seems to work fine, but the media folder does not exist.

Event if the method returns a valid path:
.../CoreSimulator/Devices/FADDB296-99A6-4113-9FB6-EB8B915A2EE0/data/Containers/Data/Application/6324EDE0-C4E5-4415-AD8C-7940099BF82A/Documents/media/E49386B7-82FE-4CE9-9654-0C0B4100F1C0.jpg

var path = RNFS.DocumentDirectoryPath + '/media/';

            ImageResizer.createResizedImage(AppState.recipe.image, 200, 200, 'JPEG', 80, 0, path).then((resizedImageUri) => {
                AppState.recipe.image = resizedImageUri;
                console.log('IMAGE SAVED!!!', resizedImageUri);
                this.saveNewRecipe();
            }).catch((err) => {
                console.log('ERROR!!!', err);
            });

The image and folder are not there

Compress image without resizing

Hi, is there a way to only compress the image without resizing using this library? I was thinking if I am able to find the actual image's height and width, I can just provide while invoking the API and provide the compression properties as needed which would result in the image of same dimensions but compressed. But, I didn't find any API that I can use in React Native JS code to figure out the height and width of an image. I see that you are finding out the height and width of the image in the native code. I wanted to ask if there is a way to compress an image without resizing in the current API. If not, is it possible to add such an API? Thanks!

The bitmap couldn't be resized

I got 'The bitmap couldn't be resized' error when trying to resize the second image

not sure what was going on, the first image resized successfully and I push the view to another page after image resized.

when I pop back to select another image, the 'The bitmap couldn't be resized' error shows up.

`resizeFile()
{
var uri = this.state.displaied;

    /*reduce img size*/
    ImageResizer.createResizedImage(uri, 680, 680, 'JPEG', 100).then((resizedImageUri) => {
        var resizedImageUri2 = resizedImageUri.substring(5);
        this.setState({ 
            uploading: true,
            resizedImage: resizedImageUri2
        }, function() {
            this.transferFile();
        });

    }).catch((err) => {
        this.setState({ 
            uploading: false,
            uploadingText: err, // got  The bitmap couldn't be resized
        });
    });      

}`

my device : Nexus 6 android 5.0.1
react native version : 0.24.1

Resize Image Without Preserving Pixel Ratio

First of all thank you for component. It works as expected.

I wonder if it is possible to resize image withour preserving pixel ratio. Assume that I want to keep my all images 200x200.

Image rotation on android

I've got an issue with some images being rotated incorrectly. Not sure what the problem is, indeed even how to reproduce reliably. But here's an example, the original large image gets resized to a thumbnail but its upside down. If you view the original in a browser window on its own it appears the correct way up, but the thumbnail never does.

Original:

`build/` should not be a part of it.

you should delete those build/ folders before checkin.

How to upload image using the URI

in RN there seems to be no way to upload an image through the URI.

Using xhr,

var xhr = new XMLHttpRequest();
xhr.open('POST', "http://" + 'makeuroffer.s3.amazonaws.com');
xhr.onload = () => {
console.log('status ' + xhr.status);
};
var formdata = new FormData();

this.textParams.forEach((param) => {
    formdata.append(param.name, param.value)
  }
);
//formdata.append('file', pic.data);// {...'.\test.jpg', name: ('first'+".jpg") });
formdata.append('image', {..., pic.uri });
debugger;

xhr.send(formdata);

URI returned from android is invalid

I'm seeing the file uri returned is of the form file:/path. I believe this should be file://path, no? Maybe it doesn't matter.

duplicate entry: android/support/v7/appcompat/R$anim.class

dependencies {
compile project(':react-native-image-resizer')
compile project(':react-native-fetch-blob')
compile project(':react-native-android-permissions')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}
The above are my dependencies in build.gradle in android\app\

and on running I get this error:

:app:packageAllDebugClassesForMultiDex FAILED
Error:Execution failed for task ':app:packageAllDebugClassesForMultiDex'.

java.util.zip.ZipException: duplicate entry: android/support/v7/appcompat/R$anim.class
Information:BUILD FAILED

I needed some help resolving this.

[Android] outputPath is null, need to remove isEmpty check

Hi!

In using image-resizer, the Android build crashed when running the createResizedImage function. Specifically, on line 112 of ImageResizer.java, the isEmpty() check fails if I don't set an outputPath. This conditional:

if (outputPath != null || !outputPath.isEmpty()) {
  path = new File(outputPath);
}

Needs to be:

if (outputPath != null) {
  path = new File(outputPath);
}

Android Studio actually highlights the second part of the if statement saying that "outputPath is always null". I don't use an outputPath as saving to cache suits me perfectly. But the implementation seems broken.

Thanks for a great and focused library!

Image gets cropped

I have an image from android camera and want to make it smaller.
It should be at max 1024 pixels in width and height but keeping the original ratio.

I tried

ImageResizer.createResizedImage(url, 1024, 1024, "PNG", 100)

but that's making a square out of it.

/cc @jayp33

Published version is out of date (0.1.0)

Please publish the latest code to npm :) The current version is v0.1.0 which is over 2 months old and doesn't include several changes. Thanks.

v0.1 not working with react native 0.41

It seems v0.1 is not working with react native 0.41 under android:

Output path seems to be ignored, image still lands in cached dir's

I may well have the syntax wrong here but at moment for iOS tests, this lib fails (doesn't crash, but also doesn't provide a resized image) if we specify a specific output path. We want to do this so we can move the image out of the '../../cache/..' dir and into the Documents folder on iOS.

here is our code:

      ImageResizer
      .createResizedImage(source.uri, 50, 50, 'PNG', 80, 0, `${dirs.DocumentDir}/ourImages` )
      .then((resizedImageUri) => {
         this.setState({
            imageUri: resizedImageUri
         });         
      }).catch((err) => {
         console.log('error resizing image', err);
      });

if we make the same call, but without the last 2 params, ie like this:

      ImageResizer
      .createResizedImage(source.uri, 50, 50, 'PNG', 80 )

then we get a resized image in the caches directory folder structure.

Are we doing something wrong in terms of the required parameter syntax ? Can you provide a working example if so ? Many thanks.

resized image quality is very poor

Nexus 6 - 5.1.1
"react": "15.2.1",
"react-native": "^0.28.0",
"name": "react-native-image-resizer",
"version": "0.0.6",

original image:

resized image with 100 in quality in parameter setting:
ImageResizer.createResizedImage(uri, 100, 100, 'JPEG', 100)

I just need to resize the image and stay on original quality, please help, thanks

No visible @interface for 'RCTImageLoader' declares the selector loadImageWithURLRequest:callback:'

using react-native 0.24.1

using react-native-image-resizer v. 0.0.12 like the README says

[iOS] Exception: unrecognized selector sent to instance when calling createResizedImage

I get this error when trying to use this module on the iOS side:

Exception '-[__NSCFString URL]: unrecognized selector sent to instance 0x7fa3cbd0ed60' was thrown while invoking createResizedImage on target ImageResizer

I know nothing about objective-c, so I sadly cannot fix this as easily as on the Android side. I'm on React-Native 0.29.

can no longer load images from http:// urls on android

I used to be able to load images from the web directly into this module, and I still can on iOS. But it's broken on android. I just get a url back "file:"... which also feels like the error handling has got worse.

I think it may be to do with this commit: 8a485bf

[Android] ImageResizerAndroid.createResizedImage argument error

When running against master and 0.0.6

ImageResizer.createResizedImage(media.url, 720, 560, "PNG", 75).then((resizedImageUri) => {

NPE in 0.0.12

E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
                                                   java.lang.NullPointerException
                                                       at fr.bamlab.rnimageresizer.ImageResizer.rotateImage(ImageResizer.java:63)
                                                       at fr.bamlab.rnimageresizer.ImageResizer.createResizedImage(ImageResizer.java:231)
                                                       at fr.bamlab.rnimageresizer.ImageResizerModule.createResizedImageWithExceptions(ImageResizerModule.java:49)
                                                       at fr.bamlab.rnimageresizer.ImageResizerModule.createResizedImage(ImageResizerModule.java:37)

Build failed with [email protected] and [email protected]

The build error is as follow.

/Users/jagger/projects/zaiqiuchang/app/node_modules/react-native-image-resizer/ios/RCTImageResizer/RCTImageResizer.m:53:26: No visible @interface for 'RCTImageLoader' declares the selector 'loadImageWithTag:callback:'

ImageResizer err - Can't retrieve the file from the path: rct-image-store://0

When I crop the image with the default native module "ImageEditingManager.cropImage" the resulting image has a path of "rct-image-store://xxx". This path can not be resized with this library. Any chance you could change this behaviour?

Thanks a lot.

edit: would be perfect if we could specify the output too e.g. fileUri or base64 data after resize

output to base64 string

is this currently possible?

Uri Err

I used your program code , but Andrews in dealing uri of an error , I read you have modified , can you publish it?

Getting Execution failed for task ':app:packageAllDebugClassesForMultiDex'. > java.util.zip.ZipException: duplicate entry: android/support/v7/appcompat/R$anim.class while launching my app through command promt

Cannot read property 'createResizedImage' of undefined

Hi Guys,

I'm using react ~15.4.2 and react-native 0.42.0 and am getting this error when I try to use the resizeImages in Android. Works fine in iOS. I have install node modules, run rnpm link and everything seems to link fine. Do you have instructions on how I can link this manually?

Thanks

index.js require can not find the createresizedimage function.

after changed to this, it works

exports.createResizedImage = function (path, width, height, format, quality) {
if (format !== 'JPEG') {
throw new Error('Only JPEG format is supported by createResizedImage');
}

return new Promise((resolve, reject) => {
  NativeModules.ImageResizerModule.createResizedImage(path, width, height, quality, (err, resizedPath) => {
    if (err) {
      return reject(err);
    }

    resolve(resizedPath);
  });
});

};

ImagUrl

this imageUrl Such this : content://media/external/images/media/86,
can not be resized?

Question: Any Plans to do this For Video?

If you have no plans to extend this to video resizing/compression, do you know of any other RN libraries that do? Google search was not helpful :-(

Could not invoke ImageResizerAndroid exception

JPEG works well, but when trying to compress PNG format, it throws:

Could not invoke ImageResizerAndroid.createResizedImage

exception.

Tried setting the compressFormat to both JPEG and PNG, but didn't work.

"Can't retrieve the file from the path"

I am unable to input an image path into the resizer, am I missing something? RN version 0.39.2

Here is my code:
ImageResizer.createResizedImage('./img/toast.png', 100, 100, 'PNG', 100).then((resizedImageUri) => {
this.setState({image: resizedImageUri, loaded: true})
}).catch((err) => {
console.log(err)
});

Tmp file is named with jpg extension for both jpg and png

I was confused about this briefly, since i specified PNG type. It looks like this line is assuming the tmp file with be a jpeg:

https://github.com/bamlab/react-native-image-resizer/blob/master/ios/RCTImageResizer/RCTImageResizer.m#L97

New project failed on Java app:dexDebug

Execution failed for task ':app:dexDebug'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'Y:\Program Files\Java\jdk1.8.0_101\bin\java.exe'' finished with non-zero exit value 2

The project is completely new with rn 0.3

npm WARN [email protected] requires a peer of react@^15.4.0 but none was installed.

Can we remove this dependency from the build? I don't think it's valid.

Throws file not found error. Eventhough the file is present.

The following the path. Is there anything wrong in the path format?
"file:///data/user/0/com.anonimio/cache/c327d578-f31d-4ce9-a2e4-8f411c460d9e.jpg"

Request: change iOS deployment target to 7.0

I believe by default react-native apps are have a deployment target of 7.0. This project is linked to iOS 9.1:

It results in a warning at build time that I'd like not to have.

If its possible, could you change the iOS Deployment Target in Build Settings to 7.0 (or as low as the code will allow)?

Android build failure with react-native 0.31

I get the following error while running react-native run-android command in the my app after including the library. If I remove the library, then the application runs without errors. Also, I noticed that the when I ran the rnpm link command, it updated the MainActivity.java file instead of the MainApplication.java file. I guess the library has not been updated according to the changes introduced in react-native 0.29

Unknown source file : UNEXPECTED TOP-LEVEL EXCEPTION:
Unknown source file : com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim;
Unknown source file :   at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
Unknown source file :   at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554)
Unknown source file :   at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535)
Unknown source file :   at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
Unknown source file :   at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
Unknown source file :   at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:502)
Unknown source file :   at com.android.dx.command.dexer.Main.runMonoDex(Main.java:334)
Unknown source file :   at com.android.dx.command.dexer.Main.run(Main.java:277)
Unknown source file :   at com.android.dx.command.dexer.Main.main(Main.java:245)
Unknown source file :   at com.android.dx.command.Main.main(Main.java:106)

:app:dexDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:dexDebug'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/Library/Java/JavaVirtualMachines/jdk1.8.0_77.jdk/Contents/Home/bin/java'' finished with non-zero exit value 2