Render local html file in React Native

Question

I run React Native using Expo for android and I'm trying to render html file (it shows a map image) in local directory, but it doesn't work properly.

I followed several references, installed webview dependencies in expo and npm both.

The problem is that the result is just html code view, not a map image

Please see my result below:

And my react native code is this (very simple) :

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

const testHtml = require('./arcgis/arc1.html');

export default function App() {

  return (
    <WebView source={testHtml} startInLoadingState
    scalesPageToFit
    javaScriptEnabled
    style={{ flex: 1 }}/>
  );

}

When I compile the html file in online html website, it appears like this:

left - html code, right - result

This html file is just sample file from official gis website so my react native code must be wrong I guess.

How can I fix the problem ?

Thanks.

You can loook at github.com/react-native-community/react-native-webview/issues/… — Rémi Doreau
– Rémi Doreau, Commented May 30, 2020 at 17:41
Your reference helps me a lot ! I followed some codes and now there's no text view but I still can't see basemap image. It shows only button and copyright text... . — Ashley
– Ashley, Commented May 31, 2020 at 11:49
source={Platform.OS == 'ios' ? WebViewBasic : { uri: "file:///android_asset/WebViewBasic.html" }} — gwl002
– gwl002, Commented Jun 28, 2021 at 4:01

Waheed Akhtar · Accepted Answer · 2020-06-01 03:21:36Z

2

You have to use this module for rendering html.

https://github.com/archriss/react-native-render-html

Edit: Instead of using HTML file store your HTML into a .js file and export like this

export const MyHTML =
    `<p>Here is an <em>ul</em> tag</p>
    <ul>
        <li>Easy</li>
        <li>Peasy</li>
        <li><div style="background-color:red;width:50px;height:50px;"></div></li>
        <li>Lemon</li>
        <li>Squeezy</li>
    </ul>
    <br />
    <p>Here is an <em>ol</em> tag</p>    
    <ol>
        <li>Sneaky</li>
        <li>Beaky</li>
        <li>Like</li>
    </ol>
`;

and then pass MyHTML to yoru HTML renderer.

edited Jun 1, 2020 at 3:21

answered May 30, 2020 at 20:21

Waheed Akhtar

3,1973 gold badges18 silver badges32 bronze badges

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

3 Comments

Ashley Over a year ago

I tried already but the examples are using only html text like '<p>Some Dummy <b>HTML</b> code</p>'. I need to display using .html file in local directory. Can you give me some example ? Thanks

Waheed Akhtar Over a year ago

I have made an edit to my answer, have a look at it.

Ashley Over a year ago

I tried your suggestion. Now it appears something like official site license and button view. I will find other method not using html. Thanks anyway!

questerstudios · Accepted Answer · 2022-02-24 23:44:23Z

If you are using react-native CLI, you have to place the local HTML file in specific folders native to ios and android. Meaning you will have two indez.html file: see - https://aboutreact.com/load-local-html-file-url-using-react-native-webview/

For Expo, I used this method:

import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";
import React from "react";

const MyHtmlFile = `
<p>Here is an <em>ul</em> tag</p>
<ul>
    <li>Easy</li>
    <li>Peasy</li>
    <li><div style="background-color:red;width:50px;height:50px;"></div></li>
    <li>Lemon</li>
    <li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>    
<ol>
    <li>Sneaky</li>
    <li>Beaky</li>
    <li>Like</li>
</ol>
`;

const Screen = () => {
  return (
    <WebView
      originWhitelist={["*"]}
      source={{
        html: MyHtmlFile,
      }}
  
    />
  );
};

export default Screen;

const styles = StyleSheet.create({});

Shahid ali · Accepted Answer · 2020-05-30 20:50:25Z

-1

You can use react-native-webview for rendering html file.

Here is an example

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

const myHtmlFile = require("./my-asset-folder/local-site.html");

class MyWeb extends Component {
  render() {
    return (
      <WebView source={myHtmlFile} />
    );
  }
}

answered May 30, 2020 at 20:50

Shahid ali

2442 silver badges5 bronze badges

1 Comment

ludwiguer Over a year ago

This is exactly the code in the question, don’t see how is this helpful

Collectives™ on Stack Overflow

Render local html file in React Native

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related