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

Question

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.

max23_ · Accepted Answer · 2016-11-22 07:39:38Z

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.

answered Nov 22, 2016 at 7:39

max23_

6,6894 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Naoto Ida Over a year ago

My code was almost working, except for the fact that the href in the <link> should of been prefixed by /web.

max23_ Over a year ago

@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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related