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.
Code For SampleHtmlFile.html file :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<HTML> <HEAD> <link rel="stylesheet" href="styles.css"> <TITLE> Sample Web Page </TITLE> </HEAD> <BODY> <H1> THIS IS SAMPLE HEADING IN WEBPAGE. </H1> <p> Sample Paragraph Tag Text in HTML File. </p> </BODY> </HTML> |
Code for styles.css file :
|
1 2 3 4 5 6 7 8 9 |
body { background-color: #00BCD4; } h1 { color: #fff; } p { color: #fff; } |
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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, WebView, Platform} from 'react-native'; |
4. Create a const variable named as LoacalWebURL and set the Web page URL using require format.
|
1 |
const LoacalWebURL = require('./Local_Website/SampleHtmlFile.html'); |
5. Create the WebView component inside render’s return block and set Source as LoacalWebURL . This would directly navigate the Source to local webpage.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <WebView style={styles.WebViewStyle} source={LoacalWebURL} javaScriptEnabled={true} domStorageEnabled={true} /> ); } |
6. Create Custom Style.
|
1 2 3 4 5 6 7 8 9 10 11 |
const styles = StyleSheet.create( { WebViewStyle: { justifyContent: 'center', alignItems: 'center', flex:1, marginTop: (Platform.OS) === 'ios' ? 20 : 0 } }); |
7. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React, { Component } from 'react'; import { StyleSheet, WebView, Platform} from 'react-native'; const LoacalWebURL = require('./Local_Website/SampleHtmlFile.html'); export default class MainActivity extends Component { render() { return ( <WebView style={styles.WebViewStyle} source={LoacalWebURL} javaScriptEnabled={true} domStorageEnabled={true} /> ); } } const styles = StyleSheet.create( { WebViewStyle: { justifyContent: 'center', alignItems: 'center', flex:1, marginTop: (Platform.OS) === 'ios' ? 20 : 0 } }); |
Screenshot in Android application :
Screenshot in iOS Application :
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?
They are not identical because they have different resolution and configuration but you can load separate HTML file for both android and iOS read my this tutorial this would help you :https://reactnativecode.com/react-native-detect-load-different-component/
Thanks for this example. But I have a problem, Webview can’t load local on device, simulator can do it.
QuangLam you are right but for that we need to use assets folder in android.
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..
It is working with current project.
Ok, I got the problem: any Javascript code cause problems: do you know a way to make it works?
Send us your code an we’ll check it, on [email protected]
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.
Did you find the solution for release mode?
No, i have not checked it yet .
is these code work in react native using expo or only react Native without expo?
if is these only for react native without expo , kindly suggest the solution for this issue , when use expo?