Suppose you want to convert your website or web application into a mobile application using React Native, or you have static HTML code that you want to show on any particular page in your application. What will you do? Will you re-write a whole bunch of code?

Certainly no need for it. You can render HTML directly into React Native. Woah! That’s amazing. So, in this article, we will learn how to render HTML to React Native using the react-native-render-html library. Let’s see how it works.

Jump ahead:

• react-native-render-html

  • npm run android 
    //or 
    npm run ios
    

    0

• npm run android 
  //or 
  npm run ios
  

  1

A few prerequisites for this tutorial include having npm and Node.js installed on your device along with having a basic understanding of React and React Native.

Setting up our React Native project

To start this tutorial, we need to set up a React Native project. We will do so by running the following command:

npx react-native init MyTestApp

Now let’s move ahead. After creating a project, we will run it once to check everything is working as expected using either of the following commands:

npm run android 
//or 
npm run ios

The app will build and start running as per your chosen configuration, whether you’re using a virtual device or an Android or iOS device.

You can modify the

npm run android 
//or 
npm run ios

2 file to see the changes on your homepage — the entry page of your application. I changed a few lines of code to check if it’s working fine or not. If everything goes well, you can see a homepage like the one shown below:

Using react-native-render-html to render HTML to React Native

In this tutorial, we will use the

npm run android 
//or 
npm run ios

4 package to render HTML into our React Native application. Keep some sample HTML code to use later in the React Native app.

The react-native-render-html library is an open source component with over three thousand GitHub stars and 46 contributors. It takes your HTML and renders 100% native views in your iOS or Android apps.

This library supports all the textual CSS methods we typically use while developing web applications. Apart from text, it also supports images, anchor tags, and lists.

How react-native-render-html parses HTML into React Native

The react-native-render-html docs use the following data flow diagram to demonstrate how this tool parses HTML into React Native:

In summary, first, the HTML markup we passed will be parsed into the DOM. Then, the Transient Render Tree is assembled based on input. After that, TTree is rendered into Virtual DOM.

To learn more about how rendering works, refer to the docs. Otherwise, let’s move on to our practical example.

Applying styles to elements

For styling, you can use an inline style, like so:

The above won’t break your application. It supports four props to customize element styles: base, id style, class style, and tag style.

There’s also another way to deal with styling, which is by using

npm run android 
//or 
npm run ios

8 records. Basically,

npm run android 
//or 
npm run ios

8 is an object that contains all your CSS; the styles will be applied from there. See the example below:

//JavaScript
const mixedStyle = {
  body: {
    whiteSpace: 'normal',
    color: '#aaa'
  },
  p: {
    color: '#fff'
  }
}

To use your custom styles during the HTML render to React Native, the react-native-render-html library supports the

1 attribute. You can pass your declared style in that attribute, like so:

//JavaScript

Remember, when rendering HTML and custom styles to a React Native application, React Native styles will be ignored at build time and will not be applied or reflected.

With the react-native-render-html library, you can play with the

3 ecosystem, which is used for DOM tampering. You can process the DOM at any point in time. For example:

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';
import { removeElement, isTag } from 'domutils';

function onElement(element) {
  // Remove the first p from div which has class "parentDiv"
  if (element.attribs['class'] == 'parentDiv') {
    let i = 0;
    for (const p of element.children) {
      if (isTag(p) && i < 1) {
        removeElement(p);
        i++;
      }
    }
  }
}

const source = {
  html: `
    

      
para-1
      
para-2
      
para-3
    
  `
};

const domVisitors = {
  onElement: onElement
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    
  );
}

Now let’s render HTML code in the application using an external library. For that, you need to modify the

npm run android 
//or 
npm run ios

2 file as shown below:

//JavaScript - JSX
import type {Node} from 'react';
import {
  ScrollView,
  Text,
  View,
} from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `
    

      
    
    

      

          
      
    
    

      

          
Section 1
      
      

          
Section 2
      
    
    

//Javascript - JSX
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

// ...
class MyWebComponent extends Component {
  render() {
    return ;
  }
}