Naoto Ida Naoto Ida - 17 days ago 11
Android Question

Load JS/CSS from bundle package with React Native for Android

I've seen many solutions for loading JS/CSS from a bundle package with a React Native app targeted towards iOS like this, but not for Android.

My webview code is like this:

<WebView
source={{html: html, baseUrl: `file:///android_asset/web`}}
/>


The
html
variable is like this:

const html = `
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<p class="someText">Foo</p>
</body>
</html>`


My project directories look like this:

app
-> assets
-> web
-> styles.css


If anyone has solutions for this it would be awesome.

Answer

Place the styles.css in the following path:

/android/app/src/main/assets

Then, set the baseURL of the <WebView> to the following:

<WebView source={{html: html, baseUrl: 'file:///android_asset/'}} />

P.S: You have to execute react-native run-android every time you made changes to the styling.