I have a React Native project where I'm trying to bundle some pre-generated HTML, JS, and CSS with the application, and have a WebView render the web assets using the react-native-community/react-native-webview library. I can load the index.html file just fine, but it won't load the other assets because it seems to be pointing to the wrong path. I've tried using baseUrl but it doesn't seem to work.
My React Native code looks like this:
<WebView
source={{ uri: './assets/index.html' }}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
originWhitelist={["*"]}
mixedContentMode='always'
/>
And then as part of the build process, my assets directory has this structure:
ios
|- assets
|- index.html
|- js
|- main.js
|- css
|- main.css
I have this as part of the Copy Bundle Resources step in Xcode, so the assets directory is included with the ios app bundle.
Inside index.html is this code:
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
Hello World!
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
Going back to the original question, when I run this application, I can see the "Hello world!" so that tells me the HTML is loading, but the CSS and the JS files don't load because as far as I can tell it's trying to load from file:///assets/js/main.js instead of being relative to the app bundle location. Is there any way I can get this to work as desired?
I'd really, really like to avoid having to change the script src from /js/main.js if at all possible. The actual application I'm building auto-generates these files from a separate react project I have.
I have a sample minimal project that demonstrates this issue here: https://github.com/jabbawookiees/psyduck
You can just clone this project then run the following if you want to try fixing it:
yarn install
cd ios && pod install && cd ..
yarn run react-native run-ios