Merge pull request #2 from ryanlntn/windows

Windows Version

App.windows.js

@@ -0,0 +1,355 @@
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  Image,
+  Switch,
+  TextInput,
+  Picker,
+  Slider,
+  WebView,
+} from "react-native";
+import omit from "lodash/omit";
+import { takeSnapshot } from "react-native-view-shot";
+// import { Surface } from "gl-react-native";
+// import GL from "gl-react";
+// import MapView from "react-native-maps";
+import Video from "react-native-video";
+import Btn from "./Btn";
+
+const catsSource = {
+  uri: "https://i.imgur.com/5EOyTDQ.jpg",
+};
+
+/*const shaders = GL.Shaders.create({
+  helloGL: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+uniform float blue;
+void main () {
+  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
+}`
+  }
+});
+
+const HelloGL = GL.createComponent(
+  ({ blue }) =>
+  <GL.Node
+    shader={shaders.helloGL}
+    uniforms={{ blue }}
+  />,
+  { displayName: "HelloGL" });*/
+
+export default class App extends Component {
+  state = {
+    previewSource: catsSource,
+    error: null,
+    res: null,
+    value: {
+      format: "png",
+      quality: 0.9,
+      result: "file",
+      snapshotContentContainer: false,
+    },
+  };
+
+  snapshot = refname => () =>
+    takeSnapshot(this.refs[refname], this.state.value)
+    .then(res =>
+      this.state.value.result !== "file"
+      ? res
+      : new Promise((success, failure) =>
+      // just a test to ensure res can be used in Image.getSize
+      Image.getSize(
+        res,
+        (width, height) => (console.log(res,width,height), success(res)),
+        failure)))
+    .then(res => this.setState({
+      error: null,
+      res,
+      previewSource: { uri:
+        this.state.value.result === "base64"
+        ? "data:image/"+this.state.value.format+";base64,"+res
+        : res }
+    }))
+    .catch(error => (console.warn(error), this.setState({ error, res: null, previewSource: null })));
+
+  render() {
+    const { value, previewSource, error, res } = this.state;
+    const { format, quality, width, height, result, snapshotContentContainer } = value;
+    return (
+      <ScrollView
+        ref="full"
+        style={styles.root}
+        contentContainerStyle={styles.container}>
+        <View
+          ref="header"
+          style={styles.header}>
+          <Text style={styles.title}>
+            😃 ViewShot Example 😜
+          </Text>
+          <View style={styles.p1}>
+            <Text style={styles.text}>
+              This is a{" "}
+            </Text>
+            <Text style={styles.code}>
+              react-native-view-shot
+            </Text>
+            <Text style={styles.text}>
+            {" "}showcase.
+            </Text>
+          </View>
+          <View style={styles.preview}>
+            { error
+              ? <Text style={styles.previewError}>
+                  {""+(error.message || error)}
+                </Text>
+              : <Image
+                  fadeDuration={0}
+                  resizeMode="contain"
+                  style={styles.previewImage}
+                  source={previewSource}
+                /> }
+          </View>
+          <Text numberOfLines={1} style={styles.previewUriText}>
+          {res ? res.slice(0, 200) : ""}
+          </Text>
+        </View>
+        <View
+          ref="form"
+          style={styles.form}>
+          <View style={styles.btns}>
+            <Btn label="😻 Reset" onPress={() => this.setState({ previewSource: catsSource })} />
+            <Btn label="📷 Head Section" onPress={this.snapshot("header")} />
+            <Btn label="📷 Form" onPress={this.snapshot("form")} />
+            <Btn label="📷 Experimental Section" onPress={this.snapshot("complex")} />
+            <Btn label="📷 All (ScrollView)" onPress={this.snapshot("full")} />
+            <Btn label="📷 GL React" onPress={this.snapshot("gl")} />
+            <Btn label="📷 MapView" onPress={this.snapshot("mapview")} />
+            <Btn label="📷 WebView" onPress={this.snapshot("webview")} />
+            <Btn label="📷 Video" onPress={this.snapshot("video")} />
+            <Btn label="📷 Empty View (should crash)" onPress={this.snapshot("empty")} />
+          </View>
+          <View style={styles.field}>
+            <Text style={styles.label}>Format</Text>
+            <Picker
+              style={styles.input}
+              selectedValue={format}
+              onValueChange={format => this.setState({ value: { ...value, format } })}>
+              <Picker.Item label="PNG" value="png" />
+              <Picker.Item label="JPEG" value="jpeg" />
+              <Picker.Item label="WEBM (android only)" value="webm" />
+              <Picker.Item label="INVALID" value="_invalid_" />
+            </Picker>
+          </View>
+          <View style={styles.field}>
+            <Text style={styles.label}>Quality</Text>
+            <Slider
+              style={styles.input}
+              value={quality}
+              onValueChange={quality => this.setState({ value: { ...value, quality } })}
+            />
+            <Text>{(quality*100).toFixed(0)}%</Text>
+          </View>
+          <View style={styles.field}>
+            <Text style={styles.label}>Size</Text>
+            <Switch
+              style={styles.switch}
+              value={width!==undefined}
+              onValueChange={checked => this.setState({
+                value: omit({
+                  ...value,
+                  width: 300,
+                  height: 300,
+                }, checked ? [] : ["width","height"])
+              })}
+            />
+            { width!==undefined ? <TextInput
+              style={styles.inputText}
+              value={""+width}
+              keyboardType="number-pad"
+              onChangeText={txt => !isNaN(txt) && this.setState({
+                value: { ...value, width: parseInt(txt, 10) }
+              })}
+            /> : <Text style={styles.inputText}>(auto)</Text> }
+            <Text>x</Text>
+            { height!==undefined ? <TextInput
+              style={styles.inputText}
+              value={""+height}
+              keyboardType="number-pad"
+              onChangeText={txt => !isNaN(txt) && this.setState({
+                value: { ...value, height: parseInt(txt, 10) }
+              })}
+            /> : <Text style={styles.inputText}>(auto)</Text> }
+          </View>
+          <View style={styles.field}>
+            <Text style={styles.label}>Result</Text>
+            <Picker
+              style={styles.input}
+              selectedValue={result}
+              onValueChange={result => this.setState({ value: { ...value, result } })}>
+              <Picker.Item label="file" value="file" />
+              <Picker.Item label="base64" value="base64" />
+              <Picker.Item label="data URI" value="data-uri" />
+              <Picker.Item label="INVALID" value="_invalid_" />
+            </Picker>
+          </View>
+          <View style={styles.field}>
+            <Text style={styles.label}>snapshotContentContainer</Text>
+            <Switch
+              style={styles.switch}
+              value={snapshotContentContainer}
+              onValueChange={snapshotContentContainer => this.setState({
+                value: { ...value, snapshotContentContainer }
+              })}
+            />
+          </View>
+        </View>
+        <View ref="empty" collapsable={false} />
+        <View style={styles.experimental} ref="complex" collapsable={false}>
+          <Text style={styles.experimentalTitle}>Experimental Stuff</Text>
+          {/*<Surface ref="gl" width={300} height={300}>
+            <HelloGL blue={0.5} />
+          </Surface>
+          <MapView
+             ref="mapview"
+            initialRegion={{
+              latitude: 37.78825,
+              longitude: -122.4324,
+              latitudeDelta: 0.0922,
+              longitudeDelta: 0.0421,
+            }}
+            style={{ width: 300, height: 300 }}
+          />*/}
+          <View
+            ref="webview"
+            collapsable={false}
+            style={{ width: 300, height: 300 }}>
+            <WebView
+              source={{
+                uri: "https://github.com/gre/react-native-view-shot"
+              }}
+            />
+          </View>
+          <Video
+            ref="video"
+            style={{ width: 300, height: 300 }}
+            source={require("./broadchurch.mp4")}
+            volume={0}
+            repeat
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: "#f6f6f6",
+  },
+  container: {
+    paddingVertical: 20,
+    backgroundColor: "#f6f6f6",
+  },
+  title: {
+    fontSize: 20,
+    textAlign: "center",
+    margin: 10,
+  },
+  experimental: {
+    padding: 10,
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  experimentalTitle: {
+    fontSize: 16,
+    margin: 10,
+  },
+  p1: {
+    marginBottom: 10,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  text: {
+    color: "#333",
+  },
+  code: {
+    fontWeight: "bold",
+    color: "#000",
+  },
+  field: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+  },
+  label: {
+    minWidth: 80,
+    fontStyle: "italic",
+    color: "#888",
+  },
+  switch: {
+    marginRight: 50,
+  },
+  input: {
+    flex: 1,
+    marginHorizontal: 5,
+  },
+  inputText: {
+    flex: 1,
+    marginHorizontal: 5,
+    color: "red",
+    textAlign: "center",
+  },
+  preview: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+  },
+  previewImage: {
+    width: 375,
+    height: 300,
+  },
+  previewUriText: {
+    fontSize: 12,
+    fontStyle: "italic",
+    color: "#666",
+    textAlign: "center",
+    padding: 10,
+    paddingBottom: 0,
+  },
+  previewError: {
+    width: 375,
+    height: 300,
+    paddingTop: 20,
+    textAlign: "center",
+    fontSize: 20,
+    fontWeight: "bold",
+    color: "#fff",
+    backgroundColor: "#c00",
+  },
+  header: {
+    backgroundColor: "#f6f6f6",
+    borderColor: "#000",
+    borderWidth: 1,
+    paddingBottom: 20,
+  },
+  form: {
+    backgroundColor: "#fff",
+  },
+  btns: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10,
+    margin: 4,
+  }
+});

index.windows.js

@@ -0,0 +1,4 @@
+//@flow
+import { AppRegistry } from "react-native";
+import App from "./App";
+AppRegistry.registerComponent("ViewShotExample", () => App);

package.json

@@ -11,6 +11,10 @@
     "lodash": "4.17.4",
     "react": "15.4.2",
     "react-native": "0.41.2",
+    "react-native-windows": "^0.43.0-rc.0"
+  },
+  "devDependencies": {
+    "rnpm-plugin-windows": "^0.2.4",
     "react-native-maps": "https://github.com/airbnb/react-native-maps/archive/v0.13.0.tar.gz",
     "react-native-video": "^1.0.0",
     "react-native-view-shot": "*"