Skip to content

Commit

Permalink
Feature: Add web support (#476)
Browse files Browse the repository at this point in the history
  • Loading branch information
chrispader authored Jun 19, 2023
1 parent 740c6c5 commit bdf3eef
Show file tree
Hide file tree
Showing 18 changed files with 2,819 additions and 748 deletions.
3 changes: 3 additions & 0 deletions example/Example/.flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 10 additions & 0 deletions example/Example/babel.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
alias: {
'^react-native$': 'react-native-web',
},
},
],
],
};
18 changes: 18 additions & 0 deletions example/Example/index.ejs
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions example/Example/index.web.js
Original file line number Diff line number Diff line change
@@ -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"),
});
6 changes: 3 additions & 3 deletions example/Example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@ PODS:
- React-Core
- RNGestureHandler (2.4.2):
- React-Core
- RNReanimated (2.8.0):
- RNReanimated (2.10.0):
- DoubleConversion
- FBLazyVector
- FBReactNativeSpec
Expand Down Expand Up @@ -657,7 +657,7 @@ SPEC CHECKSUMS:
RNCPicker: abc646b53a3d28ccfa3232c927a0ca52e0cf024d
RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f
RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
RNReanimated: 5bdcbcc3a72aedeee7bb099604262403aa75a1e5
RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
Expand All @@ -666,4 +666,4 @@ SPEC CHECKSUMS:

PODFILE CHECKSUM: d4193e5ff6edc3d4499f38d757037a0e8dae5ef4

COCOAPODS: 1.11.3
COCOAPODS: 1.12.1
22 changes: 17 additions & 5 deletions example/Example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
Expand Down
61 changes: 1 addition & 60 deletions example/Example/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
62 changes: 62 additions & 0 deletions example/Example/src/Image.js
Original file line number Diff line number Diff line change
@@ -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;
Binary file added example/Example/src/cat.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions example/Example/src/screens.js
Original file line number Diff line number Diff line change
@@ -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
31 changes: 31 additions & 0 deletions example/Example/src/screens.web.js
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit bdf3eef

Please sign in to comment.