2

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.

Community
  • 1
  • 1
Naoto Ida
  • 1,275
  • 1
  • 14
  • 29

1 Answers1

2

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.

max23_
  • 6,531
  • 4
  • 22
  • 36
  • My code was almost working, except for the fact that the `href` in the `` should of been prefixed by `/web`. – Naoto Ida Nov 22 '16 at 07:46
  • @NaotoIda I think the problem was because of the missing trailing `/` in your baseUrl, it should have been 'file:///android_asset/web/'. Once you fixed that, there is no need to prefix with '/web' in `href`. – max23_ Nov 22 '16 at 10:01