import React, { Component } from "react"; import { StyleSheet, Text, View, ScrollView, Image, Switch, TextInput, Picker, Slider, WebView } from "react-native"; import SvgUri from "react-native-svg-uri"; import omit from "lodash/omit"; import { captureRef, captureScreen } 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 }) => , { displayName: "HelloGL" } ); export default class App extends Component { state = { previewSource: catsSource, error: null, res: null, value: { format: "png", quality: 0.9, result: "tmpfile", snapshotContentContainer: false } }; snapshot = refname => () => (refname ? captureRef(this.refs[refname], this.state.value) : captureScreen(this.state.value)) .then( res => this.state.value.result !== "tmpfile" ? 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 ( 😃 ViewShot Example 😜 This is a react-native-view-shot showcase. {error ? ( {"" + (error.message || error)} ) : ( )} {res ? res.slice(0, 200) : ""} this.setState({ previewSource: catsSource })} /> Format this.setState({ value: { ...value, format } })} > Quality this.setState({ value: { ...value, quality } })} /> {(quality * 100).toFixed(0)}% Size this.setState({ value: omit( { ...value, width: 300, height: 300 }, checked ? [] : ["width", "height"] ) })} /> {width !== undefined ? ( !isNaN(txt) && this.setState({ value: { ...value, width: parseInt(txt, 10) } })} /> ) : ( (auto) )} x {height !== undefined ? ( !isNaN(txt) && this.setState({ value: { ...value, height: parseInt(txt, 10) } })} /> ) : ( (auto) )} Result this.setState({ value: { ...value, result } })} > snapshotContentContainer this.setState({ value: { ...value, snapshotContentContainer } })} /> Experimental Stuff ); } } 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 } });