Browse Source

add example for blur and adapt some flowtype

Gaëtan Renaudeau 4 years ago
parent
commit
78049bcff4
No account linked to committer's email address

+ 1
- 0
example/.gitignore View File

@@ -4,6 +4,7 @@
4 4
 
5 5
 # Xcode
6 6
 #
7
+xcshareddata/
7 8
 build/
8 9
 *.pbxuser
9 10
 !default.pbxuser

+ 6
- 0
example/ios/Podfile.lock View File

@@ -182,6 +182,8 @@ PODS:
182 182
     - React-cxxreact (= 0.61.5)
183 183
     - React-jsi (= 0.61.5)
184 184
   - React-jsinspector (0.61.5)
185
+  - react-native-blur (0.8.0):
186
+    - React
185 187
   - react-native-maps (0.26.1):
186 188
     - React
187 189
   - react-native-safe-area-context (0.6.2):
@@ -266,6 +268,7 @@ DEPENDENCIES:
266 268
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
267 269
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
268 270
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
271
+  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
269 272
   - react-native-maps (from `../node_modules/react-native-maps`)
270 273
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
271 274
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
@@ -325,6 +328,8 @@ EXTERNAL SOURCES:
325 328
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
326 329
   React-jsinspector:
327 330
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
331
+  react-native-blur:
332
+    :path: "../node_modules/@react-native-community/blur"
328 333
   react-native-maps:
329 334
     :path: "../node_modules/react-native-maps"
330 335
   react-native-safe-area-context:
@@ -390,6 +395,7 @@ SPEC CHECKSUMS:
390 395
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
391 396
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
392 397
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
398
+  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
393 399
   react-native-maps: 6e499eee4eabf422ba8b6f94e993cc768bf35153
394 400
   react-native-safe-area-context: 25260c5d0b9c53fd7aa88e569e2edae72af1f6a3
395 401
   react-native-slider: 3a1cfd00c9c31068251b536822f7192e8d1d6b6f

+ 1
- 0
example/package.json View File

@@ -8,6 +8,7 @@
8 8
   },
9 9
   "dependencies": {
10 10
     "@react-native-community/art": "^1.1.2",
11
+    "@react-native-community/blur": "^3.4.1",
11 12
     "@react-native-community/masked-view": "^0.1.6",
12 13
     "@react-native-community/slider": "^2.0.8",
13 14
     "gl-react": "2",

+ 1
- 1
example/src/ART.js View File

@@ -41,7 +41,7 @@ const ARTExample = () => {
41 41
 
42 42
       <Desc desc="ART overlapping test" />
43 43
 
44
-      <Image source={source} style={dimension} />
44
+      <Image fadeDuration={0} source={source} style={dimension} />
45 45
     </SafeAreaView>
46 46
   );
47 47
 };

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

@@ -7,6 +7,7 @@ import { createStackNavigator } from 'react-navigation-stack';
7 7
 // To add a screen, import it and add it in screens
8 8
 
9 9
 import FullScreen from './Full';
10
+import BlurScreen from './Blur';
10 11
 import ViewshootScreen from './Viewshoot';
11 12
 import TransparencyScreen from './Transparency';
12 13
 import VideoScreen from './Video';
@@ -36,6 +37,9 @@ const screens = {
36 37
   ART: {
37 38
     screen: ARTScreen,
38 39
   },
40
+  Blur: {
41
+    screen: BlurScreen,
42
+  },
39 43
   FS: {
40 44
     screen: FSScreen,
41 45
   },

+ 45
- 0
example/src/Blur.js View File

@@ -0,0 +1,45 @@
1
+//@flow
2
+import React, { useState, useCallback, useRef, useEffect } from 'react';
3
+import { SafeAreaView, View, Image, findNodeHandle } from 'react-native';
4
+import { BlurView } from '@react-native-community/blur';
5
+import ViewShot from 'react-native-view-shot';
6
+import Desc from './Desc';
7
+
8
+const dimension = { width: 300, height: 300 };
9
+
10
+const SvgUriExample = () => {
11
+  const [source, setSource] = useState(null);
12
+  const [viewHandle, setRefHandle] = useState(null);
13
+  const onCapture = useCallback(uri => setSource({ uri }), []);
14
+  const viewRef = useRef();
15
+  const ref = useRef();
16
+  useEffect(() => {
17
+    const timeout = setTimeout(() => {
18
+      if (ref.current) ref.current.capture();
19
+    }, 1000);
20
+    return () => clearTimeout(timeout);
21
+  }, []);
22
+  const absoluteDimension = { ...dimension, position: 'absolute' };
23
+  return (
24
+    <SafeAreaView>
25
+      <ViewShot ref={ref} captureMode="mount" onCapture={onCapture} style={dimension}>
26
+        <Image
27
+          source={require('./bg.jpg')}
28
+          style={absoluteDimension}
29
+          ref={ref => setRefHandle(findNodeHandle(ref))}
30
+        />
31
+        <BlurView blurType="light" blurAmount={10} style={absoluteDimension} viewRef={viewHandle} />
32
+      </ViewShot>
33
+
34
+      <Desc desc="above is a blurred SVG view and below is a screenshot of it" />
35
+
36
+      <Image fadeDuration={0} source={source} style={dimension} />
37
+    </SafeAreaView>
38
+  );
39
+};
40
+
41
+SvgUriExample.navigationOptions = {
42
+  title: 'react-native-community/blur',
43
+};
44
+
45
+export default SvgUriExample;

+ 1
- 1
example/src/Canvas.js View File

@@ -34,7 +34,7 @@ const CanvasExample = () => {
34 34
         <CanvasRendering onDrawn={onCapture} />
35 35
       </ViewShot>
36 36
 
37
-      <Image source={source} style={dimension} />
37
+      <Image fadeDuration={0} source={source} style={dimension} />
38 38
     </SafeAreaView>
39 39
   );
40 40
 };

+ 1
- 1
example/src/FS.js View File

@@ -27,7 +27,7 @@ const FSExample = () => {
27 27
 
28 28
       <Desc desc="FS to get the image from captured file" />
29 29
 
30
-      <Image source={source} style={dimension} />
30
+      <Image fadeDuration={0} source={source} style={dimension} />
31 31
     </SafeAreaView>
32 32
   );
33 33
 };

+ 1
- 1
example/src/GLReactV2.js View File

@@ -38,7 +38,7 @@ const GLReactV2 = () => {
38 38
 
39 39
       <Desc desc="above is a gl-react surface and below is a capture of it" />
40 40
 
41
-      <Image source={source} style={dimension} />
41
+      <Image fadeDuration={0} source={source} style={dimension} />
42 42
     </SafeAreaView>
43 43
   );
44 44
 };

+ 1
- 1
example/src/MapView.js View File

@@ -26,7 +26,7 @@ const MapViewExample = () => {
26 26
 
27 27
       <Desc desc="above is a map view and below is a continuous screenshot of it" />
28 28
 
29
-      <Image source={source} style={dimension} />
29
+      <Image fadeDuration={0} source={source} style={dimension} />
30 30
     </SafeAreaView>
31 31
   );
32 32
 };

+ 1
- 1
example/src/Modal.js View File

@@ -55,7 +55,7 @@ const ModalExample = () => {
55 55
             screenshot Modal as part of a captureScreen."
56 56
           />
57 57
           <Btn onPress={onOpenModal} label="Open Modal" />
58
-          <Image source={source} style={styles.preview} resizeMode="contain" />
58
+          <Image fadeDuration={0} source={source} style={styles.preview} resizeMode="contain" />
59 59
         </View>
60 60
       </SafeAreaView>
61 61
 

+ 1
- 1
example/src/Offscreen.js View File

@@ -19,7 +19,7 @@ const SvgUriExample = () => {
19 19
   return (
20 20
     <SafeAreaView>
21 21
       <Desc desc="We have rendered this SVG as image offscreen:" />
22
-      <Image source={source} style={{ width, height }} />
22
+      <Image fadeDuration={0} source={source} style={{ width, height }} />
23 23
 
24 24
       <OffscreenViewShot
25 25
         captureMode="continuous"

+ 1
- 1
example/src/SVGUri.js View File

@@ -18,7 +18,7 @@ const SvgUriExample = () => {
18 18
 
19 19
       <Desc desc="above is an SVG view and below is a continuous screenshot of it" />
20 20
 
21
-      <Image source={source} style={dimension} />
21
+      <Image fadeDuration={0} source={source} style={dimension} />
22 22
     </SafeAreaView>
23 23
   );
24 24
 };

+ 1
- 1
example/src/Transparency.js View File

@@ -39,7 +39,7 @@ const Transparency = () => {
39 39
           justifyContent: 'center',
40 40
         }}
41 41
       >
42
-        <Image source={source} style={{ width: 100, height: 100 }} />
42
+        <Image fadeDuration={0} source={source} style={{ width: 100, height: 100 }} />
43 43
       </View>
44 44
     </View>
45 45
   );

+ 1
- 1
example/src/Video.js View File

@@ -18,7 +18,7 @@ const VideoExample = () => {
18 18
 
19 19
       <Desc desc="above is a video and below is a continuous screenshot of it" />
20 20
 
21
-      <Image source={source} style={dimension} />
21
+      <Image fadeDuration={0} source={source} style={dimension} />
22 22
     </SafeAreaView>
23 23
   );
24 24
 };

+ 1
- 1
example/src/WebView.js View File

@@ -22,7 +22,7 @@ const WebViewExample = () => {
22 22
 
23 23
       <Desc desc="above is a webview and below is a continuous screenshot of it" />
24 24
 
25
-      <Image source={source} style={dimension} />
25
+      <Image fadeDuration={0} source={source} style={dimension} />
26 26
     </SafeAreaView>
27 27
   );
28 28
 };

BIN
example/src/bg.jpg View File


+ 7
- 0
example/yarn.lock View File

@@ -748,6 +748,13 @@
748 748
     invariant "^2.2.4"
749 749
     prop-types "^15.7.2"
750 750
 
751
+"@react-native-community/blur@^3.4.1":
752
+  version "3.4.1"
753
+  resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-3.4.1.tgz#dec04c7d60dd6a4fa7e3af3506feefec804728d0"
754
+  integrity sha512-XhbS230J7BGuoEamjPFZ5jUWDOW16y+vD0Soyq9Iv1qL8R47esGl54bnfUSMH10WhNXrQzvPxkMzap+ONHpE2w==
755
+  dependencies:
756
+    prop-types "^15.5.10"
757
+
751 758
 "@react-native-community/cli-debugger-ui@^3.0.0":
752 759
   version "3.0.0"
753 760
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-3.0.0.tgz#d01d08d1e5ddc1633d82c7d84d48fff07bd39416"

+ 5
- 9
src/index.js View File

@@ -2,8 +2,6 @@
2 2
 import React, { Component } from "react";
3 3
 import { View, NativeModules, Platform, findNodeHandle } from "react-native";
4 4
 const { RNViewShot } = NativeModules;
5
-
6
-import type { Element, ElementRef, ElementType, Ref } from "react";
7 5
 import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
8 6
 import type { LayoutEvent } from "react-native/Libraries/Types/CoreEventTypes";
9 7
 
@@ -102,8 +100,8 @@ export function ensureModuleIsLoaded() {
102 100
   }
103 101
 }
104 102
 
105
-export function captureRef<T: ElementType>(
106
-  input: number | ?View | Ref<T>,
103
+export function captureRef<T: React$ElementType>(
104
+  input: number | ?View | React$Ref<T>,
107 105
   optionsObject?: Object
108 106
 ): Promise<string> {
109 107
   ensureModuleIsLoaded();
@@ -159,7 +157,7 @@ export function captureScreen(optionsObject?: Options): Promise<string> {
159 157
 type Props = {
160 158
   options?: Object,
161 159
   captureMode?: "mount" | "continuous" | "update",
162
-  children: Element<*>,
160
+  children: React$Node,
163 161
   onLayout?: (e: *) => void,
164 162
   onCapture?: (uri: string) => void,
165 163
   onCaptureFailure?: (e: Error) => void,
@@ -168,9 +166,7 @@ type Props = {
168 166
 
169 167
 function checkCompatibleProps(props: Props) {
170 168
   if (!props.captureMode && props.onCapture) {
171
-    console.warn(
172
-      "react-native-view-shot: a captureMode prop must be provided for `onCapture`"
173
-    );
169
+    // in that case, it's authorized if you call capture() yourself
174 170
   } else if (props.captureMode && !props.onCapture) {
175 171
     console.warn(
176 172
       "react-native-view-shot: captureMode prop is defined but onCapture prop callback is missing"
@@ -251,7 +247,7 @@ export default class ViewShot extends Component<Props> {
251 247
     }
252 248
   };
253 249
 
254
-  onRef = (ref: ElementRef<*>) => {
250
+  onRef = (ref: React$ElementRef<*>) => {
255 251
     this.root = ref;
256 252
   };
257 253