React Native Load Local HTML File Place Inside App in WebView

React Native’s WebView gives us an sparkling facility to Load Local HTML File with Style.CSS and JavaScript file inside WebView in Android and iOS applications. We can make a Mobile website in HTML language with CSS file and put that complete website inside our Application in a particular folder and call the specific HTML file in WebView. This would help us to create and Show Static website application for some special purpose. All the Tags in HTML file should work fine and this method also supports External CSS(Caching Style Sheet) and JavaScript + JQuery files attached to HTML file.

Contents in this project Load Local HTML File Place Inside App in WebView in Android iOS Example :

1. Create a folder inside your project folder named as Local_Website like i did in below screenshot.

2. Now Download Both SampleHtmlFile.html and Style.css file from below and copy inside Local_Website folder.

Download SampleHtmlFile.html File.

Download Style.css File.

Code For SampleHtmlFile.html file :

Code for styles.css file :

Now next step is to start coding your application.

3. Open your App.js file and Import StyleSheet, WebView and Platform component in your project.

4. Create a const variable named as LoacalWebURL and set the Web page URL using require format.

5. Create the WebView component inside render’s return block and set Source as LoacalWebURL . This would directly navigate the Source to local webpage.

6. Create Custom Style.

7. Complete source code for App.js File :

Screenshot in Android application :

Load Local HTML FileScreenshot in iOS Application :

14 Comments

  1. Thanks for this example. But what I don’t understand is why the android output and ios output are not identical? Is there a way top make them be the same size, etc?

  2. Thanks for this example. But I have a problem, Webview can’t load local on device, simulator can do it.

  3. should this work with the current release of RN?
    react:16.3.0-alpha.1
    react-native:0.54.0

    I’ve just tried, it looks like it doesn’t work..

  4. Ok, I got the problem: any Javascript code cause problems: do you know a way to make it works?

  5. Hi,

    This code is working on release mode?
    It is working on debug mode. But not working on release mode.
    Please check and let me know.

    Regards,
    Ivano

    • Ivano it is working in release mode i have just checked it yet.

      • It is not working for release mode. getting following error
        Error: Unable to open URL: file:///var/containers/Bundle/Application/955327D1-A29B-45CD-85E6-61F4655FB0C5/SevenNowStore.app/assets/src/common/AWSIoT/resources/index.html

        • Thanks for notifying us Bhaskar. I will check the code again and update the code if there is something new with latest version of react native.

  6. Did you find the solution for release mode?

Leave a Reply

Your email address will not be published. Required fields are marked *