Initial Web support (#224)

* Add web support

Add initial web support with `modern-screenshot` library and new CSS `mask` api

* Update README.md

Add web support instructions

Author: arasrezaei

README.md

@@ -11,7 +11,7 @@ Provides a React component that renders a masked view.
 
 - [x] iOS
 - [x] Android
-- [ ] Web
+- [x] Web
 
 ## Getting Started
 
@@ -94,6 +94,13 @@ The following image demonstrates that you can put almost anything behind the mas
 
 <div align="center"><img src="img/example.png" width="200"></img></div>
 
+### Web Usage
+
+you need to install moden-screenshot package for web usage:
+```sh
+yarn add modern-screenshot
+```
+
 ### Props
 
 - [View props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props)

js/MaskedView.web.js

@@ -1,8 +1,53 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { ReactNode, useEffect, useRef, useState } from "react";
+import { View } from "react-native";
+import { domToPng } from "modern-screenshot";
+const MaskedView = ({
+  children,
+  maskElement,
+  style,
+  ...rest
+}) => {
+  const maskRef = useRef(null);
+  const [mask, setMask] = useState("");
+  const snapShot = () => {
+    if (!maskRef.current) return;
+    domToPng(maskRef.current).then((dataUrl) => {
+      setMask(dataUrl);
+    });
+  };
+  useEffect(() => {
+    const observer = new ResizeObserver(snapShot);
+    observer.observe(maskRef.current!);
+    return () => {
+      observer.disconnect();
+    };
+  }, [maskElement]);
 
-function MaskedView({ maskElement, ...props }) {
-  return React.createElement(View, props, maskElement);
-}
+  return (
+    <>
+      <View
+        style={{
+          position: "absolute",
+          transform: [{ translateX: "-100%" }, { translateY: "-100%" }],
+        }}
+      >
+        <div ref={maskRef}>{maskElement}</div>
+      </View>
+
+      <View
+        style={[
+          style,
+          {
+            //@ts-ignore
+            mask: `url(${mask}) center no-repeat`,
+          },
+        ]}
+        {...rest}
+      >
+        {children}
+      </View>
+    </>
+  );
+};
 
 export default MaskedView;