add example for blur and adapt some flowtype

example/.gitignore

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

example/ios/Podfile.lock

@@ -182,6 +182,8 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
+  - react-native-blur (0.8.0):
+    - React
   - react-native-maps (0.26.1):
     - React
   - react-native-safe-area-context (0.6.2):
@@ -266,6 +268,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-maps (from `../node_modules/react-native-maps`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
@@ -325,6 +328,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-blur:
+    :path: "../node_modules/@react-native-community/blur"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
   react-native-safe-area-context:
@@ -390,6 +395,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
+  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-maps: 6e499eee4eabf422ba8b6f94e993cc768bf35153
   react-native-safe-area-context: 25260c5d0b9c53fd7aa88e569e2edae72af1f6a3
   react-native-slider: 3a1cfd00c9c31068251b536822f7192e8d1d6b6f

example/package.json

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

example/src/ART.js

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

example/src/App.js

@@ -7,6 +7,7 @@ import { createStackNavigator } from 'react-navigation-stack';
 // To add a screen, import it and add it in screens
 
 import FullScreen from './Full';
+import BlurScreen from './Blur';
 import ViewshootScreen from './Viewshoot';
 import TransparencyScreen from './Transparency';
 import VideoScreen from './Video';
@@ -36,6 +37,9 @@ const screens = {
   ART: {
     screen: ARTScreen,
   },
+  Blur: {
+    screen: BlurScreen,
+  },
   FS: {
     screen: FSScreen,
   },

example/src/Blur.js

@@ -0,0 +1,45 @@
+//@flow
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { SafeAreaView, View, Image, findNodeHandle } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+import ViewShot from 'react-native-view-shot';
+import Desc from './Desc';
+
+const dimension = { width: 300, height: 300 };
+
+const SvgUriExample = () => {
+  const [source, setSource] = useState(null);
+  const [viewHandle, setRefHandle] = useState(null);
+  const onCapture = useCallback(uri => setSource({ uri }), []);
+  const viewRef = useRef();
+  const ref = useRef();
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (ref.current) ref.current.capture();
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, []);
+  const absoluteDimension = { ...dimension, position: 'absolute' };
+  return (
+    <SafeAreaView>
+      <ViewShot ref={ref} captureMode="mount" onCapture={onCapture} style={dimension}>
+        <Image
+          source={require('./bg.jpg')}
+          style={absoluteDimension}
+          ref={ref => setRefHandle(findNodeHandle(ref))}
+        />
+        <BlurView blurType="light" blurAmount={10} style={absoluteDimension} viewRef={viewHandle} />
+      </ViewShot>
+
+      <Desc desc="above is a blurred SVG view and below is a screenshot of it" />
+
+      <Image fadeDuration={0} source={source} style={dimension} />
+    </SafeAreaView>
+  );
+};
+
+SvgUriExample.navigationOptions = {
+  title: 'react-native-community/blur',
+};
+
+export default SvgUriExample;

example/src/Canvas.js

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

example/src/FS.js

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

example/src/GLReactV2.js

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

example/src/MapView.js

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

example/src/Modal.js

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

example/src/Offscreen.js

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

example/src/SVGUri.js

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

example/src/Transparency.js

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

example/src/Video.js

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

example/src/WebView.js

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

example/yarn.lock

@@ -748,6 +748,13 @@
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
+"@react-native-community/blur@^3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-3.4.1.tgz#dec04c7d60dd6a4fa7e3af3506feefec804728d0"
+  integrity sha512-XhbS230J7BGuoEamjPFZ5jUWDOW16y+vD0Soyq9Iv1qL8R47esGl54bnfUSMH10WhNXrQzvPxkMzap+ONHpE2w==
+  dependencies:
+    prop-types "^15.5.10"
+
 "@react-native-community/cli-debugger-ui@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-3.0.0.tgz#d01d08d1e5ddc1633d82c7d84d48fff07bd39416"

src/index.js

@@ -2,8 +2,6 @@
 import React, { Component } from "react";
 import { View, NativeModules, Platform, findNodeHandle } from "react-native";
 const { RNViewShot } = NativeModules;
-
-import type { Element, ElementRef, ElementType, Ref } from "react";
 import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
 import type { LayoutEvent } from "react-native/Libraries/Types/CoreEventTypes";
 
@@ -102,8 +100,8 @@ export function ensureModuleIsLoaded() {
   }
 }
 
-export function captureRef<T: ElementType>(
-  input: number | ?View | Ref<T>,
+export function captureRef<T: React$ElementType>(
+  input: number | ?View | React$Ref<T>,
   optionsObject?: Object
 ): Promise<string> {
   ensureModuleIsLoaded();
@@ -159,7 +157,7 @@ export function captureScreen(optionsObject?: Options): Promise<string> {
 type Props = {
   options?: Object,
   captureMode?: "mount" | "continuous" | "update",
-  children: Element<*>,
+  children: React$Node,
   onLayout?: (e: *) => void,
   onCapture?: (uri: string) => void,
   onCaptureFailure?: (e: Error) => void,
@@ -168,9 +166,7 @@ type Props = {
 
 function checkCompatibleProps(props: Props) {
   if (!props.captureMode && props.onCapture) {
-    console.warn(
-      "react-native-view-shot: a captureMode prop must be provided for `onCapture`"
-    );
+    // in that case, it's authorized if you call capture() yourself
   } else if (props.captureMode && !props.onCapture) {
     console.warn(
       "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> {
     }
   };
 
-  onRef = (ref: ElementRef<*>) => {
+  onRef = (ref: React$ElementRef<*>) => {
     this.root = ref;
   };