gre · gre · Jun 19, 2023 · Aug 23, 2019 · Oct 17, 2019 · Jun 6, 2023
diff --git a/example/Example/.flowconfig b/example/Example/.flowconfig
@@ -37,6 +37,9 @@ munge_underscores=true
 
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
 module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
+module.name_mapper='^react-native$' -> 'react-native-web'
+module.system.node.main_field=module
+module.system.node.main_field=main
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe

diff --git a/example/Example/babel.config.js b/example/Example/babel.config.js
@@ -1,3 +1,13 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          '^react-native$': 'react-native-web',
+        },
+      },
+    ],
+  ],
 };
diff --git a/example/Example/index.ejs b/example/Example/index.ejs
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" style="height:100%">
+  <head>
+    <meta charset="UTF-8" />
+    <title>React Native for Web</title>
+    <style>
+      /* These styles make the body full-height */
+      html, body { height: 100%; }
+      /* These styles disable body scrolling if you are using <ScrollView> */
+      body { overflow: hidden; }
+      /* These styles make the root element full-height */
+      #root { display:flex; height:100%; }
+    </style>
+  </head>
+  <body style="height:100%">
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/example/Example/index.web.js b/example/Example/index.web.js
@@ -0,0 +1,13 @@
+/**
+ * @format
+ */
+
+import { AppRegistry } from "react-native";
+import { App } from "./src/App";
+import { name as appName } from "./app.json";
+
+AppRegistry.registerComponent(appName, () => App);
+
+AppRegistry.runApplication(appName, {
+  rootTag: document.getElementById("root"),
+});
diff --git a/example/Example/ios/Podfile.lock b/example/Example/ios/Podfile.lock
@@ -380,7 +380,7 @@ PODS:
     - React-Core
   - RNGestureHandler (2.4.2):
     - React-Core
-  - RNReanimated (2.8.0):
+  - RNReanimated (2.10.0):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -657,7 +657,7 @@ SPEC CHECKSUMS:
   RNCPicker: abc646b53a3d28ccfa3232c927a0ca52e0cf024d
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f
-  RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
+  RNReanimated: 5bdcbcc3a72aedeee7bb099604262403aa75a1e5
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
@@ -666,4 +666,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: d4193e5ff6edc3d4499f38d757037a0e8dae5ef4
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.1
diff --git a/example/Example/package.json b/example/Example/package.json
@@ -7,7 +7,8 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "web": "webpack serve"
   },
   "dependencies": {
     "@react-native-community/art": "^1.2.0",
@@ -16,9 +17,14 @@
     "@react-native-picker/picker": "^2.4.1",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-react-native-web": "^0.19.4",
     "buffer": "^6.0.3",
+    "file-loader": "^6.2.0",
     "lodash": "^4.17.21",
-    "react": "17.0.2",
+    "react": "^18.2.0",
+    "react-art": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "0.68.2",
     "react-native-canvas": "^0.1.38",
     "react-native-fs": "^2.20.0",
@@ -30,18 +36,24 @@
     "react-native-svg": "^12.3.0",
     "react-native-svg-uri": "^1.2.3",
     "react-native-video": "^6.0.0-alpha.1",
-    "react-native-view-shot": "^3.3.0-next.0",
-    "react-native-webview": "^11.18.2"
+    "react-native-view-shot": "file:../..",
+    "react-native-web": "0.18.12",
+    "react-native-webview": "^11.18.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.85.1",
+    "webpack-cli": "^5.1.3",
+    "webpack-dev-server": "^4.15.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
     "babel-jest": "^26.6.3",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.67.0",
-    "react-test-renderer": "17.0.2"
+    "react-test-renderer": "^18.2.0"
   },
   "jest": {
     "preset": "react-native"

diff --git a/example/Example/src/App.js b/example/Example/src/App.js
@@ -12,66 +12,7 @@ import {
 import libPkg from 'react-native-view-shot/package.json';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-
-// To add a screen, import it and add it in screens
-
-import FullScreen from './Full';
-import ViewshootScreen from './Viewshoot';
-import TransparencyScreen from './Transparency';
-import VideoScreen from './Video';
-import WebViewScreen from './WebView';
-import MapViewScreen from './MapView';
-import CanvasScreen from './Canvas';
-import SVGUriScreen from './SVGUri';
-import ARTScreen from './ART';
-import FSScreen from './FS';
-import ModalScreen from './Modal';
-import OffscreenScreen from './Offscreen';
-import ElevationScreen from './Elevation';
-
-const screens = {
-  Full: {
-    screen: FullScreen,
-  },
-  Video: {
-    screen: VideoScreen,
-  },
-  WebView: {
-    screen: WebViewScreen,
-  },
-  SVGUri: {
-    screen: SVGUriScreen,
-  },
-  ART: {
-    screen: ARTScreen,
-  },
-  FS: {
-    screen: FSScreen,
-  },
-  Canvas: {
-    screen: CanvasScreen,
-  },
-  MapView: {
-    screen: MapViewScreen,
-  },
-  Modal: {
-    screen: ModalScreen,
-  },
-  Viewshoot: {
-    screen: ViewshootScreen,
-  },
-  Transparency: {
-    screen: TransparencyScreen,
-  },
-  Offscreen: {
-    screen: OffscreenScreen,
-  },
-  Elevation: {
-    screen: ElevationScreen,
-  },
-};
-
-///////////////////////////////////////////////////
+import screens from './screens';
 
 class HomeScreen extends Component {
   static navigationOptions = {

diff --git a/example/Example/src/Image.js b/example/Example/src/Image.js
@@ -0,0 +1,62 @@
+//@flow
+import React, { Fragment, useState, useCallback, useRef } from 'react';
+import { StyleSheet, View, SafeAreaView, Text, Image, Modal } from 'react-native';
+import { captureRef } from 'react-native-view-shot';
+import Btn from './Btn';
+import Desc from './Desc';
+
+const styles = StyleSheet.create({
+  root: {
+    padding: 50,
+  },
+  preview: {
+    marginTop: 20,
+    width: 200,
+    height: 200,
+    borderWidth: 1,
+    borderColor: '#aaa',
+  },
+  modal: {
+    alignSelf: 'flex-end',
+    padding: 20,
+    backgroundColor: '#eee',
+  },
+  buttons: {
+    flexDirection: 'row',
+  },
+});
+
+const ImageExample = () => {
+  const [source, setSource] = useState(null);
+  const imageRef = useRef();
+
+  const onCapture = useCallback(base64 => {
+    setSource({ uri: "data:image/jpg;base64," + base64 });
+  }, []);
+
+  const onPressCapture = useCallback(() => {
+    captureRef(imageRef, {
+      result: 'base64',
+      format: 'jpg'
+    }).then(onCapture);
+  }, [onCapture]);
+
+  return (
+    <Fragment>
+      <SafeAreaView>
+        <View style={styles.root}>
+          <Btn onPress={onPressCapture} label="Capture Image" />
+          <Image ref={imageRef} source={require('./cat.jpg')} style={styles.preview} resizeMode="contain" />
+          <Image source={source} style={styles.preview} resizeMode="contain" />
+        </View>
+      </SafeAreaView>
+
+    </Fragment>
+  );
+};
+
+ImageExample.navigationOptions = {
+  title: 'Image',
+};
+
+export default ImageExample;
diff --git a/example/Example/src/cat.jpg b/example/Example/src/cat.jpg
diff --git a/example/Example/src/screens.js b/example/Example/src/screens.js
@@ -0,0 +1,31 @@
+import FullScreen from './Full';
+import ViewshootScreen from './Viewshoot';
+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 FSScreen from './FS';
+import ModalScreen from './Modal';
+import ImageScreen from './Image';
+
+const screens = {
+  Full: { screen: FullScreen },
+  Viewshoot: { screen: ViewshootScreen },
+  Transparency: { screen: TransparencyScreen },
+  Video: { screen: VideoScreen },
+  WebView: { screen: WebViewScreen },
+  MapView: { screen: MapViewScreen },
+  Canvas: { screen: CanvasScreen },
+  GLReactV2: { screen: GLReactV2Screen },
+  SVGUri: { screen: SVGUriScreen },
+  ART: { screen: ARTScreen },
+  FS: { screen: FSScreen },
+  Modal: { screen: ModalScreen },
+  Image: { screen: ImageScreen },
+};
+
+export default screens
diff --git a/example/Example/src/screens.web.js b/example/Example/src/screens.web.js
@@ -0,0 +1,31 @@
+//import FullScreen from './Full';
+//import ViewshootScreen from './Viewshoot';
+//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 FSScreen from './FS';
+import ModalScreen from './Modal';
+import ImageScreen from './Image';
+
+const screens = {
+  //Full: { screen: FullScreen },
+  //Viewshoot: { screen: ViewshootScreen },
+  //Transparency: { screen: TransparencyScreen },
+  //Video: { screen: VideoScreen },
+  //WebView: { screen: WebViewScreen },
+  //MapView: { screen: MapViewScreen },
+  //Canvas: { screen: CanvasScreen },
+  //GLReactV2: { screen: GLReactV2Screen },
+  //SVGUri: { screen: SVGUriScreen },
+  //ART: { screen: ARTScreen },
+  //FS: { screen: FSScreen },
+  Modal: { screen: ModalScreen },
+  Image: { screen: ImageScreen },
+};
+
+export default screens