Add 2 examples

example/package.json

@@ -14,6 +14,7 @@
     "lodash": "^4.17.15",
     "react": "16.8.6",
     "react-native": "0.60.4",
+    "react-native-canvas": "^0.1.33",
     "react-native-gesture-handler": "^1.3.0",
     "react-native-maps": "^0.25.0",
     "react-native-reanimated": "^1.2.0",

example/src/ART.js

@@ -0,0 +1,52 @@
+//@flow
+import React, { useState, useCallback } from 'react';
+import { SafeAreaView, Image, View } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import { Surface, Group, Shape, Path } from '@react-native-community/art';
+import Desc from './Desc';
+
+const dimension = { width: 300, height: 300 };
+
+const ARTExample = () => {
+  const [source, setSource] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  return (
+    <SafeAreaView>
+      <ViewShot onCapture={onCapture} captureMode="mount" style={dimension}>
+        <View
+          style={{
+            height: 100,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'blue',
+          }}
+        >
+          <Surface width={200} height={100}>
+            <Group>
+              <Shape d="M 0,50 L 320,60" stroke="red" strokeWidth={10} />
+            </Group>
+          </Surface>
+          <View
+            style={{
+              width: 10,
+              height: 10,
+              backgroundColor: 'orange',
+              position: 'absolute',
+              top: 50,
+            }}
+          />
+        </View>
+      </ViewShot>
+
+      <Desc desc="ART overlapping test" />
+
+      <Image source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+ARTExample.navigationOptions = {
+  title: '@react-native-community/art',
+};
+
+export default ARTExample;

example/src/App.js

@@ -11,8 +11,10 @@ import TransparencyScreen from './Transparency';
 import VideoScreen from './Video';
 import WebViewScreen from './WebView';
 import MapViewScreen from './MapView';
+import CanvasScreen from './Canvas';
 import GLReactV2Screen from './GLReactV2';
 import SVGUriScreen from './SVGUri';
+import ARTScreen from './ART';
 import ModalScreen from './Modal';
 
 const screens = {
@@ -25,15 +27,21 @@ const screens = {
   WebView: {
     screen: WebViewScreen,
   },
+  SVGUri: {
+    screen: SVGUriScreen,
+  },
+  ART: {
+    screen: ARTScreen,
+  },
+  Canvas: {
+    screen: CanvasScreen,
+  },
   MapView: {
     screen: MapViewScreen,
   },
   GLReactV2: {
     screen: GLReactV2Screen,
   },
-  SVGUri: {
-    screen: SVGUriScreen,
-  },
   Modal: {
     screen: ModalScreen,
   },

example/src/Canvas.js

@@ -0,0 +1,48 @@
+//@flow
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { SafeAreaView, Image, View } from 'react-native';
+import ViewShot from 'react-native-view-shot';
+import { Surface, Group, Shape } from '@react-native-community/art';
+import Desc from './Desc';
+import Canvas from 'react-native-canvas';
+
+const dimension = { width: 300, height: 300 };
+
+const CanvasRendering = ({ onDrawn }) => {
+  const ref = useRef();
+  useEffect(() => {
+    const ctx = ref.current.getContext('2d');
+    ctx.fillStyle = '#eee';
+    ctx.fillRect(0, 0, ref.current.width, ref.current.height);
+    ctx.fillStyle = 'red';
+    ctx.fillRect(120, 30, 60, 60);
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(140, 50, 60, 60);
+    const timeout = setTimeout(onDrawn, 500); // hack. react-native-canvas have no way to tell when it's executed
+    return () => clearTimeout(timeout);
+  }, []);
+  return <Canvas ref={ref} style={dimension} />;
+};
+
+const CanvasExample = () => {
+  const [source, setSource] = useState(null);
+  const viewShotRef = useRef();
+  const onCapture = useCallback(() => {
+    viewShotRef.current.capture().then(uri => setSource({ uri }));
+  }, []);
+  return (
+    <SafeAreaView>
+      <ViewShot ref={viewShotRef} style={dimension}>
+        <CanvasRendering onDrawn={onCapture} />
+      </ViewShot>
+
+      <Image source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+CanvasExample.navigationOptions = {
+  title: 'react-native-canvas',
+};
+
+export default CanvasExample;

example/yarn.lock

@@ -1641,6 +1641,11 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+ctx-polyfill@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/ctx-polyfill/-/ctx-polyfill-1.1.4.tgz#08420bc5c540d08ac36d05720ca503c65e302d65"
+  integrity sha1-CEILxcVA0IrDbQVyDKUDxl4wLWU=
+
 debounce@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
@@ -4302,6 +4307,13 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-native-canvas@^0.1.33:
+  version "0.1.33"
+  resolved "https://registry.yarnpkg.com/react-native-canvas/-/react-native-canvas-0.1.33.tgz#e38a650e7d57b42faa717e7f3a1285d63d40e0f3"
+  integrity sha512-rYnMcU+xB0O00Dz+77xHQcnemkt1gf9dHukNzhilLN0nQbT0JwbF/fsVOZNlqucSpuWVr4LyKhFVrAE/qebBAQ==
+  dependencies:
+    ctx-polyfill "^1.1.4"
+
 react-native-gesture-handler@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"