Browse Source

add example of Offscreen rendering

Gaëtan Renaudeau 4 years ago
parent
commit
d3bb5c29dd
No account linked to committer's email address
2 changed files with 44 additions and 0 deletions
  1. 4
    0
      example/src/App.js
  2. 40
    0
      example/src/Offscreen.js

+ 4
- 0
example/src/App.js View File

@@ -18,6 +18,7 @@ import SVGUriScreen from './SVGUri';
18 18
 import ARTScreen from './ART';
19 19
 import FSScreen from './FS';
20 20
 import ModalScreen from './Modal';
21
+import OffscreenScreen from './Offscreen';
21 22
 
22 23
 const screens = {
23 24
   Full: {
@@ -56,6 +57,9 @@ const screens = {
56 57
   Transparency: {
57 58
     screen: TransparencyScreen,
58 59
   },
60
+  Offscreen: {
61
+    screen: OffscreenScreen,
62
+  },
59 63
 };
60 64
 
61 65
 ///////////////////////////////////////////////////

+ 40
- 0
example/src/Offscreen.js View File

@@ -0,0 +1,40 @@
1
+//@flow
2
+import React, { useState, useCallback } from 'react';
3
+import { SafeAreaView, Image, View } from 'react-native';
4
+import ViewShot from 'react-native-view-shot';
5
+import SvgUri from 'react-native-svg-uri';
6
+import Desc from './Desc';
7
+
8
+const OffscreenViewShot = ({ width, height, ...rest }) => (
9
+  <ViewShot {...rest} style={{ width, height, position: 'absolute', right: -width - 5 }} />
10
+);
11
+
12
+const SvgUriExample = () => {
13
+  const [source, setSource] = useState(null);
14
+  const onCapture = useCallback(uri => setSource({ uri }), []);
15
+
16
+  const width = 300;
17
+  const height = 300;
18
+
19
+  return (
20
+    <SafeAreaView>
21
+      <Desc desc="We have rendered this SVG as image offscreen:" />
22
+      <Image source={source} style={{ width, height }} />
23
+
24
+      <OffscreenViewShot
25
+        captureMode="continuous"
26
+        onCapture={onCapture}
27
+        width={width}
28
+        height={height}
29
+      >
30
+        <SvgUri width={200} height={200} source={require('./homer-simpson.svg')} />
31
+      </OffscreenViewShot>
32
+    </SafeAreaView>
33
+  );
34
+};
35
+
36
+SvgUriExample.navigationOptions = {
37
+  title: 'Offscreen',
38
+};
39
+
40
+export default SvgUriExample;