Rendering Raw HTML in your React Native application

This tutorial explains how to render raw HTML code in react native application using WebView component. Basically WebView is a system component for the Android operating system (OS) that allows Android apps to display content from the web directly inside an application.
In this example we are going to Rendering raw HTML code in android application through WebView component, it does need to be manually or pro-grammatically sized, not something natively taken care of by the component. Additionally, styling the contents of the view, to better align with the rest of the UI would require similar solution, passing style sheets into the WebView container or even worse, having style attributes within the HTML itself.
NOTE : In this example we are using source prop of WebView component to display raw HTML code in android or ios screen.

Render Raw HTML Code in React Native Application Using WebView:

Lets follow the below steps to display raw HTML code in android or ios screen using WebView in React Native.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, WebView, } from 'react-native';

Step-4: Implement render method and place below layout design inside the render block.

• htmlContent : Inside the render block,  we have created variable named as htmlContent, in which we are keeping raw HTML code.
• Also we have placed the WebView component inside the render block, this will display the raw HTML code in android or ios screen. With the help of source prop, we are mapping raw HTML code with WebView Component. For example :

<WebView
  style={styles.container}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{ html: htmlContent  }}
 />

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to render raw HTML code  in react native application using webview.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, WebView, } from 'react-native';


export default class App extends Component {

  render() {

    var htmlContent = '<h1 style="color:red;"> Skptricks Blog </h1>' +
    '<h3> The Basics Of ES6 Generators - Javascript</h3>' +
    '<p> With ES6 generators, we have a different kind of function, which may be paused in the middle, one or many times, and resumed later, allowin... </p>' +
    '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh926cFvhhOiq1LuUY_ANmf1_7oCYvDsETYpWRuaDoILzgGqI26ieVIJezIM-NqF6EAbWQI8L3Gi5Zk2WES0SxG0_dwbu7PL2jxq4HGfoRpVmbvjmbrgCAWPAJWmWWmr80jrDKS3I5oHnQ6/s600/gene.png" alt="Image" width="90%" height="200" >' +

    '<h3> React Native Picker Spinner DropDown Menu List Example - Android</h3>' +
    '<p> In this tutorial, we are going to discuss how to create simple picker s pinner dropdown menu list in react native application . Picker Spi... </p>' + '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn41RqN8zBlsAS98zWeqm1cfhhmN_21BGI7ER4tbqY9WJl8ppEbHocveWk-f87B7FbXRWwGhK2GmIxzR1gHSMyKSAsSX9AHln_R444IntYsC0dD9qFj3M3zz-5bqdK2A4grUNFLFMvT5v/s600/picker.png" alt="Image" width="90%" height="200" >' +

    '<h3> Create Custom Snackbar Component Example In React Native- Android</h3>' +
    '<p> This tutorial explains how to create simple Snackbar component in react native application . Snackbars are just like Toast messages except ... </p>' +
    '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqFZ26MEtVLXAaU-B0hKnTQhmbJBAvwXlyrDdGunRM7DfPX6G5umdRqi_ex6dQWZiAQsWOGIOs2hOfAKkGBqh1Kgt_O2_BKo35UcuAbOuTe0mOo28h33M87yBLJeln7b0yOJyKoxYxxu1m/s600/snack.png" alt="Image" width="90%" height="200" >' +

    '<h3> React Native Simple Custom GridView Layout Example Android</h3>' +
    '<p> This tutorial explains how to create simple custom grid view in react native application.  Grid View that displays items in a two-dimension... </p>' +
    '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRPw8Fnat98hTi6JURrESo-hM6c4t4fcBgVd_RWFiYwVLRi9s-rboCufMmSHd7pyW4L24kDqOAsOKwU9Y05QT4RxEn9gpFC81Ymt8UFMMx4ia88ZKJdpegL4vBKHLvmcCRRGIbWZNvgbw/s600/grid.png" alt="Image" width="90%" height="200" >';

    return (
        <WebView
        style={styles.container}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ html: htmlContent  }}
        />
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },

});

Screenshot :

Download Link : 
https://github.com/skptricks/React-Native/tree/master/Rendering%20Raw%20HTML%20in%20your%20React%20Native%20application

This is all about rendering Raw HTML in your React Native application. It does a fantastic job of rendering the HTML natively in the react native layout, with the option to pass in a standard react native styles object referencing standard HTML elements. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.