After following the method suggested here, which is a condensed version of this article, I managed to successfully load the web content in a WebView.
The steps I took are outlined below:
- Created a folder named
html/Web.bundle/src/web-src in the mobile directory
- Inserted all CSS and JS files into the
html/Web.bundle/src/index.html file, which had a structure similar to this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="web-src/app.css" />
</head>
<body>
<script src="web-src/app.js"></script>
</body>
</html>
- Generated a file named
WebViewRenderer.tsx to render the WebView, and set the index.html file as the source:
const WebViewRenderer = () => {
const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/index.html'
return (
<WebView
source={{ uri: sourceUri }}
originWhitelist={['*']}
onLoad={() => console.log('Loaded')}
onError={() => console.error('An error has occurred')}
onHttpError={() => console.error('An HTTP error has occurred')}
onMessage={(msg) => console.log('Got a message', msg)}
javaScriptEnabled={true}
allowFileAccess={true}
injectedJavaScript={injectedJS}
/>
)
}
By following these steps, I was able to successfully render the web content within the WebView component.
For a more detailed explanation and information on configurations and edge cases (such as passing query parameters from mobile to web), I recommend referring to the original article.