drop deprecated, introduce ViewShot component, rename APIs

README.md

@@ -5,15 +5,84 @@ Capture a React Native view to an image.
 
 <img src="https://github.com/gre/react-native-view-shot-example/raw/master/docs/recursive.gif" width=300 />
 
-> iOS: For React Native version between `0.30.x` and `0.39.x`, you should use `react-native-view-shot@1.5.1`.
+## Install
 
-## Usage
+```bash
+yarn add react-native-view-shot
+react-native link react-native-view-shot
+```
+
+## Recommended High Level API
+
+```js
+import { ViewShot } from "react-native-view-shot";
+
+class ExampleCaptureOnMountManually extends Component {
+  componentDidMount () {
+    this.refs.viewShot.capture().then(uri => {
+      console.log("do something with ", uri);
+    });
+  }
+  render() {
+    return (
+      <ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }}>
+        <Text>...Something to rasterize...</Text>
+      </ViewShot>
+    );
+  }
+}
+
+// alternative
+class ExampleCaptureOnMountSimpler extends Component {
+  onCapture = uri => {
+    console.log("do something with ", uri);
+  }
+  render() {
+    return (
+      <ViewShot onCapture={this.onCapture} captureMode="mount">
+        <Text>...Something to rasterize...</Text>
+      </ViewShot>
+    );
+  }
+}
+
+// waiting an image
+class ExampleWaitingCapture extends Component {
+  onImageLoad = () => {
+    this.refs.viewShot.capture().then(uri => {
+      console.log("do something with ", uri);
+    })
+  };
+  render() {
+    return (
+      <ViewShot ref="viewShot">
+        <Text>...Something to rasterize...</Text>
+        <Image ... onLoad={this.onImageLoad} />
+      </ViewShot>
+    );
+  }
+}
+```
+
+**Props:**
+
+- **`children`**: the actual content to rasterize.
+- **`options`**: the same options as in `captureRef` method.
+- **`captureMode`** (string):
+  - if not defined (default). the capture is not automatic and you need to use the ref and call `capture()` yourself.
+  - `"mount"`. Capture the view once at mount. (It is important to understand image loading won't be waited, in such case you want to use `"none"` with `viewShotRef.capture()` after `Image#onLoad`.)
+  - `"continuous"` EXPERIMENTAL, this will capture A LOT of images continuously. For very specific use-cases.
+  - `"update"` EXPERIMENTAL, this will capture images each time React redraw (on did update). For very specific use-cases.
+- **`onCapture`**: when a `captureMode` is defined, this callback will be called with the capture result.
+- **`onCaptureFailure`**: when a `captureMode` is defined, this callback will be called when a capture fails.
+
+## `captureRef(view, options)` lower level imperative API
 
 ```js
-import { takeSnapshot } from "react-native-view-shot";
+import { captureRef } from "react-native-view-shot";
 
-takeSnapshot(viewRef, {
-  format: "jpeg",
+captureRef(viewRef, {
+  format: "jpg",
   quality: 0.8
 })
 .then(
@@ -22,39 +91,33 @@ takeSnapshot(viewRef, {
 );
 ```
 
-### Example
-
-[Checkout react-native-view-shot-example](https://github.com/gre/react-native-view-shot-example)
-
-## Full API
-
-### `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 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)
+  - **`format`** *(string)*: either `png` or `jpg` or `webm` (Android). Defaults to `png`.
+  - **`quality`** *(number)*: the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpg)
   - **`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)*.
+    - `"tmpfile"` (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.
  - **`snapshotContentContainer`** *(bool)*: if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height.
 
-### DEPRECATED `path` option and `dirs` constants
+## `releaseCapture(uri)`
 
-> A feature used to allow to set an arbitrary file path. This has become tricky to maintain because all the edge cases and use-cases of file management so we have decided to drop it, making this library focusing more on solving snapshotting and not file system.
+This method release a previously captured `uri`. For tmpfile it will clean them out, for other result types it just won't do anything.
 
-To migrate from this old feature, you have a few solutions:
+NB: the tmpfile captures are automatically cleaned out after the app closes, so you might not have to worry about this unless advanced usecases. The `ViewShot` component will use it each time you capture more than once (useful for continuous capture to not leak files).
 
-- If you want to save the snapshotted image result to the CameraRoll, just use https://facebook.github.io/react-native/docs/cameraroll.html#savetocameraroll
-- If you want to save it to an arbitrary file path, use something like https://github.com/itinance/react-native-fs
-- For any more advanced needs, you can write your own (or find another) native module that would solve your use-case.
+### Advanced Examples
+
+[Checkout react-native-view-shot-example](https://github.com/gre/react-native-view-shot-example)
 
 ## Interoperability Table
 
+> 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.
+
 Model tested: iPhone 6 (iOS), Nexus 5 (Android).
 
 | System             | iOS                | Android           | Windows           |
@@ -71,60 +134,44 @@ Model tested: iPhone 6 (iOS), Nexus 5 (Android).
 3. Component itself lacks platform support.
 4. But you can just use the react-native-maps snapshot function: https://github.com/airbnb/react-native-maps#take-snapshot-of-map
 
-## Caveats
+## Troubleshooting / FAQ
 
-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.
+### Saving to a file?
 
-- 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.
+- If you want to save the snapshotted image result to the CameraRoll, just use https://facebook.github.io/react-native/docs/cameraroll.html#savetocameraroll
+- If you want to save it to an arbitrary file path, use something like https://github.com/itinance/react-native-fs
+- For any more advanced needs, you can write your own (or find another) native module that would solve your use-case.
 
-### specific to Android implementation
+### The snapshot is rejected with an error?
 
-- 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`)
+- Support of special components like Video / GL views is not guaranteed to work. In case of failure, the `captureRef` promise gets rejected (the library won't crash).
 
-## Getting started
+### get a black or blank result or still have an error with simple views?
 
-```
-npm install --save react-native-view-shot
-```
+Check the **Interoperability Table** above. Some special components are unfortunately not supported. If you have a View that contains one of an unsupported component, the whole snapshot might be compromised as well.
 
-### Mostly automatic installation
+### black background instead of transparency / weird border appear around texts?
 
-```
-react-native link react-native-view-shot
-```
+- 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.
+
+### on Android, getting "Trying to resolve view with tag '{tagID}' which doesn't exist"
+
+> 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))
+
+Alternatively, you can use the `ViewShot` component that will have `collapsable={false}` set to solve this problem.
 
-### Manual installation
+### Getting "The content size must not be zero or negative."
 
-#### iOS
+> Make sure you don't snapshot instantly, you need to wait at least there is a first `onLayout` event, or after a timeout, otherwise the View might not be ready yet. (It should also be safe to just wait Image `onLoad` if you have one). If you still have the problem, make sure your view actually have a width and height > 0.
 
-1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
-2. Go to `node_modules` ➜ `react-native-view-shot` and add `RNViewShot.xcodeproj`
-3. In XCode, in the project navigator, select your project. Add `libRNViewShot.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
-4. Run your project (`Cmd+R`)<
+Alternatively, you can use the `ViewShot` component that will wait the first `onLayout`.
 
-#### Android
+### Snapshotted image does not match my width and height but is twice/3-times bigger
 
-1. Open up `android/app/src/main/java/[...]/MainActivity.java`
- - Add `import fr.greweb.reactnativeviewshot.RNViewShotPackage;` to the imports at the top of the file
- - Add `new RNViewShotPackage()` to the list returned by the `getPackages()` method
-2. Append the following lines to `android/settings.gradle`:
- 	```
- 	include ':react-native-view-shot'
- 	project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-view-shot/android')
- 	```
-3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
- 	```
-     compile project(':react-native-view-shot')
- 	```
+This is because the snapshot image result is in real pixel size where the width/height defined in a React Native style are defined in "point" unit. You might want to set width and height option to force a resize. (might affect image quality)
 
-#### Windows
 
-1. In Visual Studio, in the solution explorer, right click on your solution then select `Add` ➜ `ExisitingProject`
-2. Go to `node_modules` ➜ `react-native-view-shot` and add `RNViewShot.csproj` (UWP) or optionally `RNViewShot.Net46.csproj` (WPF)
-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
 

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

@@ -3,6 +3,7 @@ package fr.greweb.reactnativeviewshot;
 
 import android.content.Context;
 import android.graphics.Bitmap;
+import android.net.Uri;
 import android.os.AsyncTask;
 import android.os.Environment;
 import android.util.DisplayMetrics;
@@ -23,6 +24,7 @@ import com.facebook.react.uimanager.UIManagerModule;
 import java.io.File;
 import java.io.FilenameFilter;
 import java.io.IOException;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -42,7 +44,7 @@ public class RNViewShotModule extends ReactContextBaseJavaModule {
 
     @Override
     public Map<String, Object> getConstants() {
-        return getSystemFolders(this.getReactApplicationContext());
+        return Collections.emptyMap();
     }
 
     @Override
@@ -52,41 +54,35 @@ public class RNViewShotModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void takeSnapshot(int tag, ReadableMap options, Promise promise) {
+    public void releaseCapture(String uri) {
+        File file = new File(Uri.parse(uri).getPath());
+        if (!file.exists()) return;
+        File parent = file.getParentFile();
+        if (parent.equals(reactContext.getExternalCacheDir()) || parent.equals(reactContext.getCacheDir())) {
+            file.delete();
+        }
+    }
+
+    @ReactMethod
+    public void captureRef(int tag, ReadableMap options, Promise promise) {
         ReactApplicationContext context = getReactApplicationContext();
-        String format = options.hasKey("format") ? options.getString("format") : "png";
+        String format = options.getString("format");
         Bitmap.CompressFormat compressFormat =
-                format.equals("png")
-                        ? Bitmap.CompressFormat.PNG
-                        : format.equals("jpg")||format.equals("jpeg")
-                        ? Bitmap.CompressFormat.JPEG
-                        : format.equals("webm")
-                        ? Bitmap.CompressFormat.WEBP
-                        : null;
-        if (compressFormat == null) {
-            promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Unsupported image format: "+format+". Try one of: png | jpg | jpeg");
-            return;
-        }
-        double quality = options.hasKey("quality") ? options.getDouble("quality") : 1.0;
+          format.equals("jpg")
+          ? Bitmap.CompressFormat.JPEG
+          : format.equals("webm")
+          ? Bitmap.CompressFormat.WEBP
+          : Bitmap.CompressFormat.PNG;
+        double quality = options.getDouble("quality");
         DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
         Integer width = options.hasKey("width") ? (int)(displayMetrics.density * options.getDouble("width")) : null;
         Integer height = options.hasKey("height") ? (int)(displayMetrics.density * options.getDouble("height")) : null;
-        String result = options.hasKey("result") ? options.getString("result") : "tmpfile";
-        Boolean snapshotContentContainer = options.hasKey("snapshotContentContainer") ? options.getBoolean("snapshotContentContainer") : false;
+        String result = options.getString("result");
+        Boolean snapshotContentContainer = options.getBoolean("snapshotContentContainer");
         try {
             File file = null;
-            if ("file".equals(result)) {
-                if (options.hasKey("path")) {
-                    file = new File(options.getString("path"));
-                    file.getParentFile().mkdirs();
-                    file.createNewFile();
-                }
-                else {
-                    file = createTempFile(getReactApplicationContext(), format);
-                }
-            }
-            else if ("tmpfile".equals(result)) {
-                file = createTempFile(getReactApplicationContext(), format);
+            if ("tmpfile".equals(result)) {
+              file = createTempFile(getReactApplicationContext(), format);
             }
             UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);
             uiManager.addUIBlock(new ViewShot(tag, format, compressFormat, quality, width, height, file, result, snapshotContentContainer,reactContext, promise));
@@ -136,25 +132,6 @@ public class RNViewShotModule extends ReactContextBaseJavaModule {
         }
     }
 
-    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.

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

@@ -79,11 +79,10 @@ public class ViewShot implements UIBlock {
             return;
         }
         try {
-            if ("file".equals(result) || "tmpfile".equals(result)) {
+            if ("tmpfile".equals(result)) {
                 os = new FileOutputStream(output);
                 captureView(view, os);
                 String uri = Uri.fromFile(output).toString();
-                reactContext.sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.parse(uri)));
                 promise.resolve(uri);
             }
             else if ("base64".equals(result)) {
@@ -101,9 +100,6 @@ public class ViewShot implements UIBlock {
                 data = "data:image/"+extension+";base64," + data;
                 promise.resolve(data);
             }
-            else {
-                promise.reject(ERROR_UNABLE_TO_SNAPSHOT, "Unsupported result: "+result+". Try one of: file | base64 | data-uri");
-            }
         }
         catch (Exception e) {
             e.printStackTrace();

index.js

@@ -1,52 +0,0 @@
-//@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,
-    path?: string,
-    format?: "png" | "jpg" | "jpeg" | "webm",
-    quality?: number,
-    result?: "tmpfile" | "file" | "base64" | "data-uri",
-    snapshotContentContainer?: boolean
-  } = {}
-): Promise<string> {
-  if (options.result === "file") {
-    console.warn(
-      "react-native-view-shot: result='file' is deprecated, has been renamed to 'tmpfile' and no longer support any 'path' option. See README for more information"
-    );
-  } else if ("path" in options) {
-    console.warn(
-      "react-native-view-shot: path option is deprecated. See README for more information"
-    );
-  }
-  if (typeof view !== "number") {
-    const node = findNodeHandle(view);
-    if (!node)
-      return Promise.reject(
-        new Error("findNodeHandle failed to resolve view=" + String(view))
-      );
-    view = node;
-  }
-  return RNViewShot.takeSnapshot(view, options);
-}
-
-export default { takeSnapshot, dirs };

ios/RNViewShot.m

@@ -1,4 +1,3 @@
-
 #import "RNViewShot.h"
 #import <AVFoundation/AVFoundation.h>
 #import <React/RCTLog.h>
@@ -9,7 +8,6 @@
 #import <React/RCTUIManager.h>
 #import <React/RCTBridge.h>
 
-
 @implementation RNViewShot
 
 RCT_EXPORT_MODULE()
@@ -21,22 +19,20 @@ RCT_EXPORT_MODULE()
   return RCTGetUIManagerQueue();
 }
 
-- (NSDictionary *)constantsToExport
+
+RCT_EXPORT_METHOD(releaseCapture:(nonnull NSString *)uri)
 {
-  return @{
-           @"CacheDir" : [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject],
-           @"DocumentDir": [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject],
-           @"MainBundleDir" : [[NSBundle mainBundle] bundlePath],
-           @"MovieDir": [NSSearchPathForDirectoriesInDomains(NSMoviesDirectory, NSUserDomainMask, YES) firstObject],
-           @"MusicDir": [NSSearchPathForDirectoriesInDomains(NSMusicDirectory, NSUserDomainMask, YES) firstObject],
-           @"PictureDir": [NSSearchPathForDirectoriesInDomains(NSPicturesDirectory, NSUserDomainMask, YES) firstObject],
-           };
+  NSString *directory = [NSTemporaryDirectory() stringByAppendingPathComponent:@"ReactNative"];
+  // Ensure it's a valid file in the tmp directory
+  if ([uri hasPrefix:directory] && ![uri isEqualToString:directory]) {
+    NSFileManager *fileManager = [NSFileManager new];
+    if ([fileManager fileExistsAtPath:uri]) {
+      [fileManager removeItemAtPath:uri error:NULL];
+    }
+  }
 }
 
-// forked from RN implementation
-// https://github.com/facebook/react-native/blob/f35b372883a76b5666b016131d59268b42f3c40d/React/Modules/RCTUIManager.m#L1367
-
-RCT_EXPORT_METHOD(takeSnapshot:(nonnull NSNumber *)target
+RCT_EXPORT_METHOD(captureRef:(nonnull NSNumber *)target
                   withOptions:(NSDictionary *)options
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject)
@@ -53,9 +49,9 @@ RCT_EXPORT_METHOD(takeSnapshot:(nonnull NSNumber *)target
 
     // Get options
     CGSize size = [RCTConvert CGSize:options];
-    NSString *format = [RCTConvert NSString:options[@"format"] ?: @"png"];
-    NSString *result = [RCTConvert NSString:options[@"result"] ?: @"tmpfile"];
-    BOOL snapshotContentContainer = [RCTConvert BOOL:options[@"snapshotContentContainer"] ?: @"false"];
+    NSString *format = [RCTConvert NSString:options[@"format"]];
+    NSString *result = [RCTConvert NSString:options[@"result"]];
+    BOOL snapshotContentContainer = [RCTConvert BOOL:options[@"snapshotContentContainer"]];
 
     // Capture image
     BOOL success;
@@ -117,40 +113,17 @@ RCT_EXPORT_METHOD(takeSnapshot:(nonnull NSNumber *)target
     dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
 
       NSData *data;
-      if ([format isEqualToString:@"png"]) {
-        data = UIImagePNGRepresentation(image);
-      } else if ([format isEqualToString:@"jpeg"] || [format isEqualToString:@"jpg"]) {
-        CGFloat quality = [RCTConvert CGFloat:options[@"quality"] ?: @1];
+      if ([format isEqualToString:@"jpg"]) {
+        CGFloat quality = [RCTConvert CGFloat:options[@"quality"]];
         data = UIImageJPEGRepresentation(image, quality);
-      } else {
-        reject(RCTErrorUnspecified, [NSString stringWithFormat:@"Unsupported image format: %@. Try one of: png | jpg | jpeg", format], nil);
-        return;
+      }
+      else {
+        data = UIImagePNGRepresentation(image);
       }
 
       NSError *error = nil;
       NSString *res = nil;
-      if ([result isEqualToString:@"file"] || [result isEqualToString:@"tmpfile"] ) {
-        // Save to a temp file
-        NSString *path;
-        if (options[@"path"] && [result isEqualToString:@"file"]) {
-          path = options[@"path"];
-          NSString * folder = [path stringByDeletingLastPathComponent];
-          NSFileManager * fm = [NSFileManager defaultManager];
-          if(![fm fileExistsAtPath:folder]) {
-            [fm createDirectoryAtPath:folder withIntermediateDirectories:YES attributes:NULL error:&error];
-            [fm createFileAtPath:path contents:nil attributes:nil];
-          }
-        }
-        else {
-          path = RCTTempFilePath(format, &error);
-        }
-        if (path && !error) {
-          if ([data writeToFile:path options:(NSDataWritingOptions)0 error:&error]) {
-            res = path;
-          }
-        }
-      }
-      else if ([result isEqualToString:@"base64"]) {
+      if ([result isEqualToString:@"base64"]) {
         // Return as a base64 raw string
         res = [data base64EncodedStringWithOptions: NSDataBase64Encoding64CharacterLineLength];
       }
@@ -160,9 +133,15 @@ RCT_EXPORT_METHOD(takeSnapshot:(nonnull NSNumber *)target
         res = [NSString stringWithFormat:@"data:image/%@;base64,%@", format, base64];
       }
       else {
-        reject(RCTErrorUnspecified, [NSString stringWithFormat:@"Unsupported result: %@. Try one of: file | base64 | data-uri", result], nil);
-        return;
+        // Save to a temp file
+        NSString *path = RCTTempFilePath(format, &error);
+        if (path && !error) {
+          if ([data writeToFile:path options:(NSDataWritingOptions)0 error:&error]) {
+            res = path;
+          }
+        }
       }
+
       if (res && !error) {
         resolve(res);
         return;

package.json

@@ -2,7 +2,7 @@
   "name": "react-native-view-shot",
   "version": "1.12.0",
   "description": "Capture a React Native view to an image",
-  "main": "index.js",
+  "main": "src/index.js",
   "keywords": [
     "react-native",
     "screenshot",
@@ -18,6 +18,7 @@
     "url": "https://github.com/gre/react-native-view-shot.git"
   },
   "peerDependencies": {
+    "react": "*",
     "react-native": "*"
   }
 }

src/index.js

@@ -0,0 +1,254 @@
+//@flow
+import React, { Component } from "react";
+import { View, NativeModules, Platform, findNodeHandle } from "react-native";
+const { RNViewShot } = NativeModules;
+
+const neverEndingPromise = new Promise(() => {});
+
+type Options = {
+  width?: number,
+  height?: number,
+  format: "png" | "jpg" | "webm",
+  quality: number,
+  result: "tmpfile" | "base64" | "data-uri",
+  snapshotContentContainer: boolean
+};
+
+if (!RNViewShot) {
+  console.warn(
+    "NativeModules.RNViewShot is undefined. Make sure the library is linked on the native side."
+  );
+}
+
+const acceptedFormats = ["png", "jpg"].concat(
+  Platform.OS === "android" ? ["webm"] : []
+);
+
+const acceptedResults = ["tmpfile", "base64", "data-uri"];
+
+const defaultOptions = {
+  format: "png",
+  quality: 1,
+  result: "tmpfile",
+  snapshotContentContainer: false
+};
+
+// validate and coerce options
+function validateOptions(
+  options: ?Object
+): { options: Options, errors: Array<string> } {
+  options = {
+    ...defaultOptions,
+    ...options
+  };
+  const errors = [];
+  if (
+    "width" in options &&
+    (typeof options.width !== "number" || options.width <= 0)
+  ) {
+    errors.push("option width should be a positive number");
+    delete options.width;
+  }
+  if (
+    "height" in options &&
+    (typeof options.height !== "number" || options.height <= 0)
+  ) {
+    errors.push("option height should be a positive number");
+    delete options.height;
+  }
+  if (
+    typeof options.quality !== "number" ||
+    options.quality < 0 ||
+    options.quality > 1
+  ) {
+    errors.push("option quality should be a number between 0.0 and 1.0");
+    options.quality = defaultOptions.quality;
+  }
+  if (typeof options.snapshotContentContainer !== "boolean") {
+    errors.push("option snapshotContentContainer should be a boolean");
+  }
+  if (acceptedFormats.indexOf(options.format) === -1) {
+    options.format = defaultOptions.format;
+    errors.push(
+      "option format is not in valid formats: " + acceptedFormats.join(" | ")
+    );
+  }
+  if (acceptedResults.indexOf(options.result) === -1) {
+    options.result = defaultOptions.result;
+    errors.push(
+      "option result is not in valid formats: " + acceptedResults.join(" | ")
+    );
+  }
+  return { options, errors };
+}
+
+export function captureRef(
+  view: number | ReactElement<*>,
+  optionsObject?: Object
+): Promise<string> {
+  if (typeof view !== "number") {
+    const node = findNodeHandle(view);
+    if (!node)
+      return Promise.reject(
+        new Error("findNodeHandle failed to resolve view=" + String(view))
+      );
+    view = node;
+  }
+  const { options, errors } = validateOptions(optionsObject);
+  if (__DEV__ && errors.length > 0) {
+    console.warn(
+      "react-native-view-shot: bad options:\n" +
+        errors.map(e => `- ${e}`).join("\n")
+    );
+  }
+  return RNViewShot.captureRef(view, options);
+}
+
+export function releaseCapture(uri: string): void {
+  if (typeof uri !== "string") {
+    if (__DEV__) {
+      console.warn("Invalid argument to releaseCapture. Got: " + uri);
+    }
+  } else {
+    RNViewShot.releaseCapture(uri);
+  }
+}
+
+type Props = {
+  options?: Object,
+  captureMode?: "mount" | "continuous" | "update",
+  children: React.Element<*>,
+  onLayout?: (e: *) => void,
+  onCapture: (uri: string) => void,
+  onCaptureFailure: (e: Error) => void
+};
+
+function checkCompatibleProps(props: Props) {
+  if (!props.captureMode && props.onCapture) {
+    console.warn(
+      "react-native-view-shot: a captureMode prop must be provided for `onCapture`"
+    );
+  } else if (props.captureMode && !props.onCapture) {
+    console.warn(
+      "react-native-view-shot: captureMode prop is defined but onCapture prop callback is missing"
+    );
+  } else if (
+    (props.captureMode === "continuous" || props.captureMode === "update") &&
+    props.options &&
+    props.options.result &&
+    props.options.result !== "tmpfile"
+  ) {
+    console.warn(
+      "react-native-view-shot: result=tmpfile is recommended for captureMode=" +
+        props.captureMode
+    );
+  }
+}
+
+export default class ViewShot extends Component {
+  static captureRef = captureRef;
+  static releaseCapture = releaseCapture;
+  props: Props;
+  root: ?View;
+
+  _raf: *;
+  lastCapturedURI: ?string;
+
+  resolveFirstLayout: (layout: Object) => void;
+  firstLayoutPromise = new Promise(resolve => {
+    this.resolveFirstLayout = resolve;
+  });
+
+  capture = (): Promise<string> =>
+    this.firstLayoutPromise
+      .then(() => {
+        const { root } = this;
+        if (!root) return neverEndingPromise; // component is unmounted, you never want to hear back from the promise
+        return captureRef(root, this.props.options);
+      })
+      .then(
+        (uri: string) => {
+          this.onCapture(uri);
+          return uri;
+        },
+        (e: Error) => {
+          this.onCaptureFailure(e);
+          throw e;
+        }
+      );
+
+  onCapture = (uri: string) => {
+    if (!this.root) return;
+    if (this.lastCapturedURI) {
+      // schedule releasing the previous capture
+      setTimeout(releaseCapture, 500, this.lastCapturedURI);
+    }
+    this.lastCapturedURI = uri;
+    const { onCapture } = this.props;
+    if (onCapture) onCapture(uri);
+  };
+
+  onCaptureFailure = (e: Error) => {
+    if (!this.root) return;
+    const { onCaptureFailure } = this.props;
+    if (onCaptureFailure) onCaptureFailure(e);
+  };
+
+  syncCaptureLoop = (captureMode: ?string) => {
+    cancelAnimationFrame(this._raf);
+    if (captureMode === "continuous") {
+      let previousCaptureURI = "-"; // needs to capture at least once at first, so we use "-" arbitrary string
+      const loop = () => {
+        this._raf = requestAnimationFrame(loop);
+        if (previousCaptureURI === this.lastCapturedURI) return; // previous capture has not finished, don't capture yet
+        previousCaptureURI = this.lastCapturedURI;
+        this.capture();
+      };
+      this._raf = requestAnimationFrame(loop);
+    }
+  };
+
+  onRef = (ref: View) => {
+    this.root = ref;
+  };
+
+  onLayout = (e: { nativeEvent: { layout: Object } }) => {
+    const { onLayout } = this.props;
+    this.resolveFirstLayout(e.nativeEvent.layout);
+    if (onLayout) onLayout(e);
+  };
+
+  componentDidMount() {
+    if (__DEV__) checkCompatibleProps(this.props);
+    if (this.props.captureMode === "mount") {
+      this.capture();
+    } else {
+      this.syncCaptureLoop(this.props.captureMode);
+    }
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.captureMode !== this.props.captureMode) {
+      this.syncCaptureLoop(nextProps.captureMode);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.captureMode === "update") {
+      this.capture();
+    }
+  }
+
+  componentWillUnmount() {
+    this.syncCaptureLoop(null);
+  }
+
+  render() {
+    const { children } = this.props;
+    return (
+      <View ref={this.onRef} collapsable={false} onLayout={this.onLayout}>
+        {children}
+      </View>
+    );
+  }
+}

windows/RNViewShot/RNViewShotModule.cs

@@ -35,7 +35,12 @@ namespace RNViewShot
         }
 
         [ReactMethod]
-        public void takeSnapshot(int tag, JObject options, IPromise promise)
+        public void releaseCapture (string uri) {
+          // TODO implement me
+        }
+
+        [ReactMethod]
+        public void captureRef(int tag, JObject options, IPromise promise)
         {
             string format = options["format"] != null ? options.Value<string>("format") : "png";
             double quality = options["quality"] != null ? options.Value<double>("quality") : 1.0;