Include local web app into react native webview

Question

Within my react-native app I want to show a webview, that loads a local html5 web application (single page app, SPA).

I am able to load an html file, that is located within the relative folder webapp using

var webapp = require('./webapp/index.html');

and

<WebView source={webapp}></WebView>

as I have stated in this thread: react native webview load from device local file system

Unfortunately, the assets of this local webapp like the .js and .css files, aren't loaded by the webapp.

During development of the react-native app, these files are available via the development server. Though, when the app is packed and run on an iOS device, the assets aren't available (I get a 404 error in Safari developer tools).

How can I make sure, that all of the assets (JS, CSS, etc.) within the webapp folder are available in the packaged app local.

Answer 1

By setting the baseURL, the WebView knows where to look for the css/js that you link to

like:

<WebView baseURL="/webApp" html={html} />

check the answer for the issue on github :

https://github.com/facebook/react-native/issues/1442#issuecomment-106906969

or read the example on this detailed answer by nick-weaver: Loading javascript into a UIWebView from resources