CODEWITHSUNDEEP
androidiosreact-nativeexponentexpo
Grigory
Grigory

Reputation: 1024

Use CSS from local file in WebView with React Native and Expo

I'm using the latest Expo SDK. I use a non-detached project. I need to load a css from local file in a WebView that loads an html from string like this:

<WebView source={{ baseUrl: './', html: this.fullPost }} />

Where this.fullPost looks like this

this.fullPost = `
  <html>
    <head>
      <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>some html that uses style.css</body>
  </html>`;

So where should I put the style.css file and what should I specify as the baseUrl? How should this with Expo?

Thank you.

Upvotes: 2

Views: 4005

Answers (1)

Zsolt
Zsolt

Reputation: 159

The easiest way is to wrap your css code into a javascript file:

style.js:

const css = `
<style>
// copy your css file's content here
</style>
`;
export default css;

Then just import style from './style'; and you can simply concat the style to this.fullPost.

Upvotes: 3

Related Questions