Fix conflicts and update view support table

Author: ryanlntn

README.md

@@ -10,9 +10,9 @@ Snapshot a React Native view and save it to an image.
 ## Usage
 
 ```js
-import RNViewShot from "react-native-view-shot";
+import { takeSnapshot } from "react-native-view-shot";
 
-RNViewShot.takeSnapshot(viewRef, {
+takeSnapshot(viewRef, {
   format: "jpeg",
   quality: 0.8
 })
@@ -28,34 +28,68 @@ RNViewShot.takeSnapshot(viewRef, {
 
 ## Full API
 
-### `RNViewShot.takeSnapshot(view, options)`
+### `takeSnapshot(view, options)`
 
 Returns a Promise of the image URI.
 
 - **`view`** is a reference to a React Native component.
 - **`options`** may include:
- - **`width`** / **`height`** *(number)*: the width and height of the image to capture.
+ - **`width`** / **`height`** *(number)*: the width and height of the final image (resized from the View bound. don't provide it if you want the original pixel size).
  - **`format`** *(string)*: either `png` or `jpg`/`jpeg` or `webm` (Android). Defaults to `png`.
  - **`quality`** *(number)*: the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpeg)
  - **`result`** *(string)*, the method you want to use to save the snapshot, one of:
     - `"file"` (default): save to a temporary file *(that will only exist for as long as the app is running)*.
     - `"base64"`: encode as base64 and returns the raw string. Use only with small images as this may result of lags (the string is sent over the bridge). *N.B. This is not a data uri, use `data-uri` instead*.
     - `"data-uri"`: same as `base64` but also includes the [Data URI scheme](https://en.wikipedia.org/wiki/Data_URI_scheme) header.
- - **`filename`** *(string)*: the name of the generated file if any (Android only). Defaults to `ReactNative_snapshot_image_${timestamp}`.
- - **`snapshotContentContainer`** *(bool)*: if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height. (Android only)
+ - **`path`** *(string)*: The absolute path where the file get generated. See *`dirs` constants* for more information.
+ - **`snapshotContentContainer`** *(bool)*: if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height.
+
+### `dirs` constants
+
+By default, takeSnapshot will export in a temporary folder and the snapshot file will be deleted as soon as the app leaves. If you use the `path` option, you make the snapshot file more permanent and at a specific file location. To make file location more 'universal', the library exports some classic directory constants:
+
+```js
+import { takeSnapshot, dirs } from "react-native-view-shot";
+// cross platform dirs:
+const { CacheDir, DocumentDir, MainBundleDir, MovieDir, MusicDir, PictureDir } = dirs;
+// only available Android:
+const { DCIMDir, DownloadDir, RingtoneDir, SDCardDir } = dirs;
+
+takeSnapshot(viewRef, { path: PictureDir+"/foo.png" })
+.then(
+  uri => console.log("Image saved to", uri),
+  error => console.error("Oops, snapshot failed", error)
+);
+```
+
+## Supported views
+
+Model tested: iPhone 6 (iOS), Nexus 5 (Android).
+
+| System             | iOS                | Android           | Windows           |
+|--------------------|--------------------|-------------------|-------------------|
+| View,Text,Image,.. | YES                | YES               | YES               |                    
+| WebView            | YES                | YES<sup>1</sup>   | YES               |
+| gl-react v2        | YES                | NO<sup>2</sup>    | NO<sup>3</sup>    |
+| react-native-video | NO                 | NO                | NO
+| react-native-maps  | YES                | [NO](https://github.com/gre/react-native-view-shot/issues/36) | NO<sup>3</sup>
+
+>
+1. Only supported by wrapping a `<View collapsable={false}>` parent and snapshotting it.
+2. It returns an empty image (not a failure Promise).
+3. Component itself lacks platform support.
 
 ## Caveats
 
 Snapshots are not guaranteed to be pixel perfect. It also depends on the platform. Here is some difference we have noticed and how to workaround.
 
-- Support of special components like Video / GL views remains untested.
+- Support of special components like Video / GL views is not guaranteed to work. In case of failure, the `takeSnapshot` promise gets rejected (the library won't crash).
 - It's preferable to **use a background color on the view you rasterize** to avoid transparent pixels and potential weirdness that some border appear around texts.
 
 ### specific to Android implementation
 
-- you need to make sure `collapsable` is set to `false` if you want to snapshot a **View**. Otherwise that view won't reflect any UI View. ([found by @gaguirre](https://github.com/gre/react-native-view-shot/issues/7#issuecomment-245302844))
-- if you want to share out the screenshoted file, you will have to copy it somewhere first so it's accessible to an Intent, see comment: https://github.com/gre/react-native-view-shot/issues/11#issuecomment-251080804 .
--  if you implement a third party library and want to get back a File, you must first resolve the `Uri`. the `file` result returns an `Uri` so it's consistent with iOS and you can give it to `Image.getSize` for instance.
+- you need to make sure `collapsable` is set to `false` if you want to snapshot a **View**. Some content might even need to be wrapped into such `<View collapsable={false}>` to actually make them snapshotable! Otherwise that view won't reflect any UI View. ([found by @gaguirre](https://github.com/gre/react-native-view-shot/issues/7#issuecomment-245302844))
+-  if you implement a third party library and want to get back a File, you must first resolve the `Uri`. (the `file` result returns an `Uri` so it's consistent with iOS and can be given to APIs like `Image.getSize`)
 
 ## Getting started
 
@@ -100,7 +134,6 @@ react-native link react-native-view-shot
 3. In Visual Studio, in the solution explorer, right click on your Application project then select `Add` ➜ `Reference`
 4. Under the projects tab select `RNViewShot` (UWP) or `RNViewShot.Net46` (WPF)
 
-
 ## Thanks
 
 - To initial iOS work done by @jsierles in https://github.com/jsierles/react-native-view-snapshot

android/build.gradle

@@ -25,14 +25,17 @@ android {
     }
 }
 
-repositories {
-    mavenCentral()
-    maven {
-        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-        url "$projectDir/../../../node_modules/react-native/android"
+allprojects {
+    repositories {
+        mavenLocal()
+        jcenter()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
+        }
     }
 }
 
 dependencies {
-    compile "com.facebook.react:react-native:+"  // From node_modules
+    compile 'com.facebook.react:react-native:+'
 }

android/src/main/java/fr/greweb/reactnativeviewshot/RNViewShotModule.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import android.graphics.Bitmap;
 import android.os.AsyncTask;
+import android.os.Environment;
 import android.util.DisplayMetrics;
 import android.view.View;
 
@@ -22,6 +23,8 @@
 import java.io.File;
 import java.io.FilenameFilter;
 import java.io.IOException;
+import java.util.HashMap;
+import java.util.Map;
 
 public class RNViewShotModule extends ReactContextBaseJavaModule {
 
@@ -37,6 +40,11 @@ public String getName() {
         return "RNViewShot";
     }
 
+    @Override
+    public Map<String, Object> getConstants() {
+        return getSystemFolders(this.getReactApplicationContext());
+    }
+
     @Override
     public void onCatalystInstanceDestroy() {
         super.onCatalystInstanceDestroy();
@@ -66,17 +74,25 @@ public void takeSnapshot(int tag, ReadableMap options, Promise promise) {
         String result = options.hasKey("result") ? options.getString("result") : "file";
         Boolean snapshotContentContainer = options.hasKey("snapshotContentContainer") ? options.getBoolean("snapshotContentContainer") : false;
         try {
-            String name = options.hasKey("filename") ? options.getString("filename") : null;
-            File tmpFile = "file".equals(result) ? createTempFile(getReactApplicationContext(), format, name) : null;
+            File file = null;
+            if ("file".equals(result)) {
+                if (options.hasKey("path")) {
+                    file = new File(options.getString("path"));
+                    file.createNewFile();
+                }
+                else {
+                    file = createTempFile(getReactApplicationContext(), format);
+                }
+            }
             UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);
-            uiManager.addUIBlock(new ViewShot(tag, format, compressFormat, quality, width, height, tmpFile, result, snapshotContentContainer, promise));
+            uiManager.addUIBlock(new ViewShot(tag, format, compressFormat, quality, width, height, file, result, snapshotContentContainer, promise));
         }
         catch (Exception e) {
             promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Failed to snapshot view tag "+tag);
         }
     }
 
-    private static final String TEMP_FILE_PREFIX = "ReactNative_snapshot_image_";
+    private static final String TEMP_FILE_PREFIX = "ReactNative-snapshot-image";
 
     /**
      * Asynchronous task that cleans up cache dirs (internal and, if available, external) of cropped
@@ -116,11 +132,30 @@ public boolean accept(File dir, String filename) {
         }
     }
 
+    static private Map<String, Object> getSystemFolders(ReactApplicationContext ctx) {
+        Map<String, Object> res = new HashMap<>();
+        res.put("CacheDir", ctx.getCacheDir().getAbsolutePath());
+        res.put("DCIMDir", Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM).getAbsolutePath());
+        res.put("DocumentDir", ctx.getFilesDir().getAbsolutePath());
+        res.put("DownloadDir", Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS).getAbsolutePath());
+        res.put("MainBundleDir", ctx.getApplicationInfo().dataDir);
+        res.put("MovieDir", Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_MOVIES).getAbsolutePath());
+        res.put("MusicDir", Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_MUSIC).getAbsolutePath());
+        res.put("PictureDir", Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES).getAbsolutePath());
+        res.put("RingtoneDir", Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_RINGTONES).getAbsolutePath());
+        String state;
+        state = Environment.getExternalStorageState();
+        if (state.equals(Environment.MEDIA_MOUNTED)) {
+            res.put("SDCardDir", Environment.getExternalStorageDirectory().getAbsolutePath());
+        }
+        return res;
+    }
+
     /**
      * Create a temporary file in the cache directory on either internal or external storage,
      * whichever is available and has more free space.
      */
-    private File createTempFile(Context context, String ext, String name)
+    private File createTempFile(Context context, String ext)
             throws IOException {
         File externalCacheDir = context.getExternalCacheDir();
         File internalCacheDir = context.getCacheDir();
@@ -139,12 +174,6 @@ else if (internalCacheDir == null) {
         }
         String suffix = "." + ext;
         File tmpFile = File.createTempFile(TEMP_FILE_PREFIX, suffix, cacheDir);
-        if (name != null) {
-            File renamed = new File(cacheDir, name + suffix);
-            tmpFile.renameTo(renamed);
-            return renamed;
-        }
-
         return tmpFile;
     }
 

android/src/main/java/fr/greweb/reactnativeviewshot/ViewShot.java

@@ -124,7 +124,7 @@ private void captureView (View view, OutputStream os) {
         }
 
         //evaluate real height
-        if (this.snapshotContentContainer){
+        if (snapshotContentContainer) {
             h=0;
             ScrollView scrollView = (ScrollView)view;
             for (int i = 0; i < scrollView.getChildCount(); i++) {

index.js

@@ -1,19 +1,33 @@
 //@flow
-
 import { NativeModules, findNodeHandle } from "react-native";
-
 const { RNViewShot } = NativeModules;
 
+export const dirs = {
+  // cross platform
+  CacheDir: RNViewShot.CacheDir,
+  DocumentDir: RNViewShot.DocumentDir,
+  MainBundleDir: RNViewShot.MainBundleDir,
+  MovieDir: RNViewShot.MovieDir,
+  MusicDir: RNViewShot.MusicDir,
+  PictureDir: RNViewShot.PictureDir,
+  // only Android
+  DCIMDir: RNViewShot.DCIMDir,
+  DownloadDir: RNViewShot.DownloadDir,
+  RingtoneDir: RNViewShot.RingtoneDir,
+  SDCardDir: RNViewShot.SDCardDir,
+};
+
 export function takeSnapshot(
   view: number | ReactElement<any>,
-  options ?: {
-    width ?: number;
-    height ?: number;
-    filename ?: string;
-    format ?: "png" | "jpg" | "jpeg" | "webm";
-    quality ?: number;
-    result ?: "file" | "base64" | "data-uri";
-  }
+  options?: {
+    width?: number,
+    height?: number,
+    path?: string,
+    format?: "png" | "jpg" | "jpeg" | "webm",
+    quality?: number,
+    result?: "file" | "base64" | "data-uri",
+    snapshotContentContainer?: bool
+  } = {}
 ): Promise<string> {
   if (typeof view !== "number") {
     const node = findNodeHandle(view);
@@ -23,4 +37,4 @@ export function takeSnapshot(
   return RNViewShot.takeSnapshot(view, options);
 }
 
-export default { takeSnapshot };
+export default { takeSnapshot, dirs };