Question 33565 in React native Question posted in
The official React Native documentation can be found here.

Load Local HTML with local css, js in React Native Webview

i want to load local html, css, js file in my react native webview but i am not able to load css which applied to html refer my folder structure

enter image description here

In above is my html and along with css images and js file and I put all in my app folder structure as below

src –> html –> demo –> paster all above files inside this refer below image

enter image description here

Now I am used this html in my actual screen as below

let demoHtmlData = require('../../../html/demo/demo.html')
<WebView
  style={{flex: 1}}
  source={demoHtmlData}
/>

When i run above code html loaded but css in not applying like colors, styling etc..

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>VIVJOA®</title>
<meta name="apple-mobile-web-app-status-bar-style" content="#7D5895">
<meta name="theme-color" content="#7D5895" />
<link href="css/style.css" rel="stylesheet">
</head>

In above code css/style.css not applying my webview so any idea how can i solve this?

Tags:

2

Answers


  1. 0

    you have to place your html and css files in folder for android place inside android_asset inside android folder and for ios place inside resources inside ios folder.

    if(isAndroid){
  return (
      <WebView
        style={{flex: 1}}
        originWhitelist={['*']}
        source={{uri:'file:///android_asset/index.html'}}
        style={{ marginTop: 20 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
  )
}else{
  return(
    <WebView
      style={{flex: 1}}
      originWhitelist={['*']}
      source={'./resources/index.html'}
      style={{ marginTop: 20 }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

    more ref from : WebView Html load from local

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search