add many individual examples

example/package.json

@@ -29,6 +29,7 @@
     "@babel/runtime": "^7.5.5",
     "@react-native-community/eslint-config": "^0.0.5",
     "eslint": "^6.1.0",
+    "flow-bin": "0.98.0",
     "metro-react-native-babel-preset": "^0.55.0",
     "react-test-renderer": "16.8.6"
   }

example/src/App.js

@@ -2,9 +2,50 @@
 import React, { Fragment } from 'react';
 import { SafeAreaView, StatusBar, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { createStackNavigator, createAppContainer } from 'react-navigation';
+
+// To add a screen, import it and add it in screens
+
 import FullScreen from './Full';
 import ViewshootScreen from './Viewshoot';
 import TransparencyScreen from './Transparency';
+import VideoScreen from './Video';
+import WebViewScreen from './WebView';
+import MapViewScreen from './MapView';
+import GLReactV2Screen from './GLReactV2';
+import SVGUriScreen from './SVGUri';
+import ModalScreen from './Modal';
+
+const screens = {
+  Full: {
+    screen: FullScreen,
+  },
+  Video: {
+    screen: VideoScreen,
+  },
+  WebView: {
+    screen: WebViewScreen,
+  },
+  MapView: {
+    screen: MapViewScreen,
+  },
+  GLReactV2: {
+    screen: GLReactV2Screen,
+  },
+  SVGUri: {
+    screen: SVGUriScreen,
+  },
+  Modal: {
+    screen: ModalScreen,
+  },
+  Viewshoot: {
+    screen: ViewshootScreen,
+  },
+  Transparency: {
+    screen: TransparencyScreen,
+  },
+};
+
+///////////////////////////////////////////////////
 
 class HomeScreen extends React.Component {
   static navigationOptions = {
@@ -15,11 +56,15 @@ class HomeScreen extends React.Component {
     return (
       <Fragment>
         <StatusBar barStyle="dark-content" />
-        <SafeAreaView contentInsetAdjustmentBehavior="automatic">
+        <SafeAreaView>
           {Object.keys(screens).map(key => (
             <TouchableOpacity key={key} onPress={() => navigation.navigate(key)}>
               <View style={styles.entry}>
-                <Text style={styles.entryText}>{key}</Text>
+                <Text style={styles.entryText}>
+                  {(screens[key].screen.navigationOptions &&
+                    screens[key].screen.navigationOptions.title) ||
+                    key}
+                </Text>
               </View>
             </TouchableOpacity>
           ))}
@@ -35,23 +80,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
   },
   entryText: {
-    fontSize: 28,
+    fontSize: 22,
     color: '#36f',
   },
 });
 
-const screens = {
-  Full: {
-    screen: FullScreen,
-  },
-  Viewshoot: {
-    screen: ViewshootScreen,
-  },
-  Transparency: {
-    screen: TransparencyScreen,
-  },
-};
-
 const AppNavigator = createStackNavigator({
   Home: {
     screen: HomeScreen,

example/src/Desc.js

@@ -0,0 +1,19 @@
+//@flow
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+const styles = StyleSheet.create({
+  desc: {
+    marginHorizontal: 10,
+    marginVertical: 20,
+    fontSize: 14,
+    fontStyle: 'italic',
+    color: '#888',
+  },
+});
+
+const Desc = ({ desc }) => {
+  return <Text style={styles.desc}>{desc}</Text>;
+};
+
+export default Desc;

example/src/Full.js

@@ -234,7 +234,7 @@ const App = () => {
               <Picker
                 style={styles.input}
                 selectedValue={config.result}
-                onValueChange={result => setConfig({ ...config, result })}
+                onValueChange={r => setConfig({ ...config, result: r })}
               >
                 <Picker.Item label="tmpfile" value="tmpfile" />
                 <Picker.Item label="base64" value="base64" />

example/src/GLReactV2.js

@@ -0,0 +1,50 @@
+//@flow
+import React, { useState, useCallback } from 'react';
+import { SafeAreaView, Image } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import { Surface } from 'gl-react-native';
+import GL from 'gl-react';
+import Desc from './Desc';
+
+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' },
+);
+
+const dimension = { width: 300, height: 300 };
+
+const GLReactV2 = () => {
+  const [source, setSource] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  return (
+    <SafeAreaView>
+      <ViewShot onCapture={onCapture} captureMode="mount" style={dimension}>
+        <Surface width={300} height={300}>
+          <HelloGL blue={0.5} />
+        </Surface>
+      </ViewShot>
+
+      <Desc desc="above is a gl-react surface and below is a capture of it" />
+
+      <Image source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+GLReactV2.navigationOptions = {
+  title: 'gl-react-native @ 2',
+};
+
+export default GLReactV2;

example/src/MapView.js

@@ -0,0 +1,38 @@
+//@flow
+import React, { useState, useCallback } from 'react';
+import { SafeAreaView, Image } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import MapView from 'react-native-maps';
+import Desc from './Desc';
+
+const dimension = { width: 300, height: 300 };
+
+const MapViewExample = () => {
+  const [source, setSource] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  return (
+    <SafeAreaView>
+      <ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
+        <MapView
+          initialRegion={{
+            latitude: 37.78825,
+            longitude: -122.4324,
+            latitudeDelta: 0.0922,
+            longitudeDelta: 0.0421,
+          }}
+          style={dimension}
+        />
+      </ViewShot>
+
+      <Desc desc="above is a map view and below is a continuous screenshot of it" />
+
+      <Image source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+MapViewExample.navigationOptions = {
+  title: 'react-native-maps',
+};
+
+export default MapViewExample;

example/src/Modal.js

@@ -0,0 +1,81 @@
+//@flow
+import React, { Fragment, useState, useCallback, useRef } from 'react';
+import { StyleSheet, View, SafeAreaView, Text, Image, Modal } from 'react-native';
+import { captureScreen, captureRef } from 'react-native-view-shot';
+import Btn from './Btn';
+import Desc from './Desc';
+
+const styles = StyleSheet.create({
+  root: {
+    padding: 50,
+  },
+  preview: {
+    marginTop: 20,
+    width: 200,
+    height: 200,
+    borderWidth: 1,
+    borderColor: '#aaa',
+  },
+  modal: {
+    alignSelf: 'flex-end',
+    padding: 20,
+    backgroundColor: '#eee',
+  },
+  buttons: {
+    flexDirection: 'row',
+  },
+});
+
+const ModalExample = () => {
+  const [opened, setOpened] = useState(false);
+  const [source, setSource] = useState(null);
+  const modalRef = useRef();
+
+  const onOpenModal = useCallback(() => setOpened(true), []);
+
+  const onCapture = useCallback(uri => {
+    setSource({ uri });
+    setOpened(false);
+  }, []);
+
+  const onPressCapture = useCallback(() => {
+    captureScreen().then(onCapture);
+  }, [onCapture]);
+
+  const onPressCaptureModalContent = useCallback(() => {
+    captureRef(modalRef).then(onCapture);
+  }, [onCapture]);
+
+  return (
+    <Fragment>
+      <SafeAreaView>
+        <View style={styles.root}>
+          <Desc
+            desc="We can notice that, in current implementation, react-native-view-shot does not
+            screenshot Modal as part of a captureScreen."
+          />
+          <Btn onPress={onOpenModal} label="Open Modal" />
+          <Image source={source} style={styles.preview} resizeMode="contain" />
+        </View>
+      </SafeAreaView>
+
+      <Modal transparent animated animationType="slide" visible={opened}>
+        <SafeAreaView>
+          <View ref={modalRef} style={styles.modal}>
+            <Text>This is a modal</Text>
+            <View style={styles.buttons}>
+              <Btn onPress={onPressCapture} label="Capture Screen" />
+              <Btn onPress={onPressCaptureModalContent} label="Capture This" />
+            </View>
+          </View>
+        </SafeAreaView>
+      </Modal>
+    </Fragment>
+  );
+};
+
+ModalExample.navigationOptions = {
+  title: 'Modal',
+};
+
+export default ModalExample;

example/src/SVGUri.js

@@ -0,0 +1,30 @@
+//@flow
+import React, { useState, useCallback } from 'react';
+import { SafeAreaView, Image } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import SvgUri from 'react-native-svg-uri';
+import Desc from './Desc';
+
+const dimension = { width: 300, height: 300 };
+
+const SvgUriExample = () => {
+  const [source, setSource] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  return (
+    <SafeAreaView>
+      <ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
+        <SvgUri width={200} height={200} source={require('./homer-simpson.svg')} />
+      </ViewShot>
+
+      <Desc desc="above is an SVG view and below is a continuous screenshot of it" />
+
+      <Image source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+SvgUriExample.navigationOptions = {
+  title: 'react-native-svg-uri',
+};
+
+export default SvgUriExample;

example/src/Video.js

@@ -0,0 +1,30 @@
+//@flow
+import React, { useState, useCallback } from 'react';
+import { SafeAreaView, Image } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import Video from 'react-native-video';
+import Desc from './Desc';
+
+const dimension = { width: 300, height: 300 };
+
+const VideoExample = () => {
+  const [source, setSource] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  return (
+    <SafeAreaView>
+      <ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
+        <Video style={dimension} source={require('./broadchurch.mp4')} volume={0} repeat />
+      </ViewShot>
+
+      <Desc desc="above is a video and below is a continuous screenshot of it" />
+
+      <Image source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+VideoExample.navigationOptions = {
+  title: 'react-native-video',
+};
+
+export default VideoExample;

example/src/WebView.js

@@ -0,0 +1,34 @@
+//@flow
+import React, { useState, useCallback } from 'react';
+import { SafeAreaView, Image } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import WebView from 'react-native-webview';
+import Desc from './Desc';
+
+const dimension = { width: 300, height: 300 };
+
+const WebViewExample = () => {
+  const [source, setSource] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  return (
+    <SafeAreaView>
+      <ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
+        <WebView
+          source={{
+            uri: 'https://github.com/gre/react-native-view-shot',
+          }}
+        />
+      </ViewShot>
+
+      <Desc desc="above is a webview and below is a continuous screenshot of it" />
+
+      <Image source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+WebViewExample.navigationOptions = {
+  title: 'react-native-webview',
+};
+
+export default WebViewExample;

example/yarn.lock

@@ -2299,6 +2299,11 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
   integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
 
+flow-bin@0.98.0:
+  version "0.98.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.98.0.tgz#3361a03682326a83a5f0a864749f4f7f0d826bce"
+  integrity sha512-vuiYjBVt82eYF+dEk9Zqa8hTSDvbhl/czxzFRLZm9/XHbJnYNMTwFoNFYAQT9IQ6ACNBIbwSTIfxroieuKja7g==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"