init

Author: gre

.flowconfig

@@ -0,0 +1,7 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[options]

.gitignore

@@ -0,0 +1,39 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# node.js
+#
+node_modules/
+npm-debug.log
+
+# android
+#
+android/build/
+android/.gradle/
+android/.idea/
+android/android.iml
+android/gradle/
+android/gradlew
+android/gradlew.bat
+android/local.properties

README.md

@@ -0,0 +1,90 @@
+
+# react-native-view-shot
+
+Snapshot a view and save to an image.
+
+The image will be stored in a temporary file that will only exist for as long as the app is running.
+
+## Getting started
+
+```
+npm install --save react-native-view-shot
+```
+
+### Mostly automatic installation
+
+```
+react-native link react-native-view-shot
+```
+
+### Manual installation
+
+#### iOS
+
+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`)<
+
+#### Android
+
+1. Open up `android/app/src/main/java/[...]/MainActivity.java`
+  - Add `import com.reactlibrary.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')
+  	```
+
+#### Windows
+
+No support yet. Feel free to PR.
+
+## Usage
+
+```js
+import { findNodeHandle } from "react-native";
+import RNViewShot from "react-native-view-shot";
+
+RNViewShot.takeSnapshot(findNodeHandle(aRef), {
+  format: "jpeg",
+  quality: 0.8
+})
+.then(
+  uri => console.log("Image saved to", uri),
+  error => console.error("Oops, snapshot failed", error)
+);
+```
+
+## Example
+
+[Checkout react-native-view-shot-example](https://github.com/gre/react-native-view-shot-example)
+
+## Full API
+
+### `RNViewShot.takeSnapshot(view, options)`
+
+Returns a Promise of the image URI.
+
+- **`view`** references to a React Native component.
+- **`options`** may include:
+ - **`width`** / **`height`** *(number)*: the width and height of the image to capture.
+ - **`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)
+
+## Notes
+
+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.
+- 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.
+
+## Thanks
+
+- To initial iOS work done by @jsierles in https://github.com/jsierles/react-native-view-snapshot
+- To React Native implementation of takeSnapshot in iOS by @nicklockwood

android/build.gradle

@@ -0,0 +1,38 @@
+buildscript {
+    repositories {
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:2.1.3'
+    }
+}
+
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+    }
+    lintOptions {
+        abortOnError false
+    }
+}
+
+repositories {
+    mavenCentral()
+    maven {
+        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+        url "$projectDir/../../../node_modules/react-native/android"
+    }
+}
+
+dependencies {
+    compile "com.facebook.react:react-native:+"  // From node_modules
+}

android/src/main/AndroidManifest.xml

@@ -0,0 +1,6 @@
+
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.reactlibrary">
+
+</manifest>
+  

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

@@ -0,0 +1,138 @@
+
+package fr.greweb.reactnativeviewshot;
+
+import android.content.Context;
+import android.graphics.Bitmap;
+import android.os.AsyncTask;
+import android.util.DisplayMetrics;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import com.facebook.react.bridge.GuardedAsyncTask;
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.UIBlock;
+import com.facebook.react.uimanager.UIManagerModule;
+
+import java.io.File;
+import java.io.FilenameFilter;
+import java.io.IOException;
+
+public class RNViewShotModule extends ReactContextBaseJavaModule {
+
+    private final ReactApplicationContext reactContext;
+
+    public RNViewShotModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.reactContext = reactContext;
+    }
+
+    @Override
+    public String getName() {
+        return "RNViewShot";
+    }
+
+    @Override
+    public void onCatalystInstanceDestroy() {
+        super.onCatalystInstanceDestroy();
+        new CleanTask(getReactApplicationContext()).executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR);
+    }
+
+    @ReactMethod
+    public void takeSnapshot(int tag, ReadableMap options, Promise promise) {
+        ReactApplicationContext context = getReactApplicationContext();
+        String format = options.hasKey("format") ? options.getString("format") : "png";
+        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) {
+            throw new JSApplicationIllegalArgumentException("Unsupported image format: " + format);
+        }
+        double quality = options.hasKey("quality") ? options.getDouble("quality") : 1.0;
+        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;
+        try {
+            File tmpFile = createTempFile(getReactApplicationContext(), format);
+            UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);
+            uiManager.addUIBlock(new ViewShot(tag, compressFormat, quality, width, height, tmpFile, 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_";
+
+    /**
+     * Asynchronous task that cleans up cache dirs (internal and, if available, external) of cropped
+     * image files. This is run when the catalyst instance is being destroyed (i.e. app is shutting
+     * down) and when the module is instantiated, to handle the case where the app crashed.
+     */
+    private static class CleanTask extends GuardedAsyncTask<Void, Void> {
+        private final Context mContext;
+
+        private CleanTask(ReactContext context) {
+            super(context);
+            mContext = context;
+        }
+
+        @Override
+        protected void doInBackgroundGuarded(Void... params) {
+            cleanDirectory(mContext.getCacheDir());
+            File externalCacheDir = mContext.getExternalCacheDir();
+            if (externalCacheDir != null) {
+                cleanDirectory(externalCacheDir);
+            }
+        }
+
+        private void cleanDirectory(File directory) {
+            File[] toDelete = directory.listFiles(
+                    new FilenameFilter() {
+                        @Override
+                        public boolean accept(File dir, String filename) {
+                            return filename.startsWith(TEMP_FILE_PREFIX);
+                        }
+                    });
+            if (toDelete != null) {
+                for (File file: toDelete) {
+                    file.delete();
+                }
+            }
+        }
+    }
+
+    /**
+     * 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)
+            throws IOException {
+        File externalCacheDir = context.getExternalCacheDir();
+        File internalCacheDir = context.getCacheDir();
+        File cacheDir;
+        if (externalCacheDir == null && internalCacheDir == null) {
+            throw new IOException("No cache directory available");
+        }
+        if (externalCacheDir == null) {
+            cacheDir = internalCacheDir;
+        }
+        else if (internalCacheDir == null) {
+            cacheDir = externalCacheDir;
+        } else {
+            cacheDir = externalCacheDir.getFreeSpace() > internalCacheDir.getFreeSpace() ?
+                    externalCacheDir : internalCacheDir;
+        }
+        return File.createTempFile(TEMP_FILE_PREFIX, ext, cacheDir);
+    }
+
+}

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

@@ -0,0 +1,28 @@
+
+package fr.greweb.reactnativeviewshot;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.bridge.JavaScriptModule;
+public class RNViewShotPackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+      return Arrays.<NativeModule>asList(new RNViewShotModule(reactContext));
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+      return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+      return Collections.emptyList();
+    }
+}