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

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

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

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?

CodePudding user response：

Can you please add .html at end of the path,

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

CodePudding user response：

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