I am trying to serve a local JS script through a local server on a mobile app, i managed to load the viewer.html with the following code, but i couldn't find how to load the js file, i also tried using RNFS but the RNFS couldn't find the files in the device, neither the scripts or the html.
my main code:
import StaticServer from 'react-native-static-server'
import RNFetchBlob from "rn-fetch-blob";
import React, { Component } from 'react';
import {
View,
Image,
StyleSheet,
Dimensions,
Text
} from 'react-native';
import { WebView } from 'react-native-webview';
class ReactNativeForgeViewer extends Component {
constructor(props) {
super(props);
this.state = {
uri: null
}
}
componentDidMount() {
this.port = 8080;
this.root = "www/";
this.file = 'viewer.html';
// Get HTML file from require
let html = require('./assets/www/viewer.html');
let {uri} = Image.resolveAssetSource(html);
let path = `${RNFetchBlob.fs.dirs.DocumentDir}/${this.root}`;
let dest = `${path}viewer.html`;
// Add the directory
RNFetchBlob.fs.mkdir(path, { NSURLIsExcludedFromBackupKey: true })
.catch((err) => console.log(err));
// Fetch the file
let added;
if (uri.indexOf("file://") > -1) {
// Copy file in release
added = RNFetchBlob.fs.exists(dest).then((e) => {
if (!e) {
return RNFetchBlob.fs.cp(uri, dest);
}
});
} else {
// Download for development
added = RNFetchBlob
.config({
fileCache : true,
})
.fetch('GET', uri)
.then((res) => {
return RNFetchBlob.fs.mv(res.path(), dest);
})
}
added.then(() => {
// Create a StaticServer
this.server = new StaticServer(this.port, this.root, {localOnly: true});
this.server.start().then((origin) => {
this.setState({origin});
});
}).catch((err) => {
console.error(err);
})
}
componentWillUnmount() {
if (this.server) {
this.server.stop();
}
}
render() {
if (!this.state.origin) {
return (
<View style={styles.container}>
<Text>Carregando...</Text>
</View>
);
}
return (
<View style={styles.webViewContainer}>
<WebView
javaScriptEnabled={true}
scalesPageToFit={true}
style={styles.webView}
scrollEnabled={false}
source={{uri: `${this.state.origin}/www/${this.file}`}} />
</View>
);
}
}
const styles = StyleSheet.create({
webViewContainer: {
flex:1,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
webView: {
backgroundColor: `#FFFFFF`,
flex: 1
}
});
export default ReactNativeForgeViewer;
My Viewer.html code:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, height=device-height, minimal-ui, minimum-scale=1.0, initial-scale=1, user-scalable=no"/>
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>
Forge Viewer
</title>
<meta charset="utf-8">
<style>
.viewer {
background: whitesmoke;
height: 100vh;
width: 100vw;
}
body {
margin:0
}
</style>
</head>
<body>
<div id="viewer" class="viewer"></div>
<!-- <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script> -->
<script src= "http://localhost:8080/www/lmv/3.3/viewer3D.min.js"></script>
<script src="http://localhost:8080/www/viewer.js"></script>
</body>
</html>
i don't get any message error