Load Local HTML in Webview

(React Native) Load local HTML file into WebView

try it:

const PolicyHTML = require('./Policy.html');

<WebView
  source={PolicyHTML}
  style={{flex: 1}}
 />

How to load a local html file into a NativeScript webview

In NativeScript, by default, the tilde (~) marks the app root folder (note the App and not the Project!). So if your file is located in <project-name>/app/index.html try setting the path with ~/index.html.

Can't load a local html file into a .NET MAUI WebView

I've fixed this with this PR into .Net Maui. Will be in the SR2 release due in the next few weeks.

The docs suggested it worked consistently on all platforms, but it simply had never been implemented on Windows... slightly concerning.

The workaround I've posted on the PR (mentioned also by Reinaldo below) will get around this for the mean time, however you should probably remove it once SR2 is released and you update to it.

Add Local HTML and JS file using React Native Webview

<View
        style={{
         flex:1
        }}
        >
          <WebView 
        scalesPageToFit
          originWhitelist={["*"]} 
          source={{ uri:"file:///android_asset/highcharts/index.htm",baseUrl:"file:///android_asset/highcharts/"

         }}/>

        </View>

Here is a working example of highchart in react-native-webview.

1. 1.First move all your html/js code to the following directory:
   your_project/android/app/src/main/assets/. If the assets folder does not exist already, create it.
2. Now paste all your html/css/js code in the assets folder you have created
3. close your terminal/cmd/bash or whatever you use to run react-native run-android command.
4. Run the following command now. react-native run-android.

5. Now paste the above code in your .js file. Set uri to the path to your html file such as uri:"file:///android_asset/YOUR_HTML_FILE" and your baseUrl:"file:///android_asset/YOUR_MAIN_FOLDER/"

   

WebView2 how to load local file?

You can read HTML file , and then NavigateToString

if (webView!= null && webView.CoreWebView2 != null)
{
     string text = system.IO.File.ReadAllText(@"C:/Users/xxx/Desktop/VisualSelf/self.html");
     webView.CoreWebView2.NavigateToString(text);
}

or you can Navigate to local file:

webView.CoreWebView2.Navigate("file:///C:/Users/xxx/Desktop/VisualSelf/self.html");

Also, you need to install Microsoft Edge WebView2 Runtime.

---

Related Topics