How to render HTML content in React Native

React Native

38 articles

Using Image Picker and Camera in React Native (Expo)

September 21, 2022

How to implement tables in React Native

January 08, 2023

React Native: How to add shadow effects on Android

February 12, 2023

React Navigation 6: Hiding bottom tab on a specific screen

January 19, 2022

React Native: KeyboardAvoidingView example

February 22, 2022

React Native: Please accept all necessary Android SDK licenses…

June 27, 2022

Top 4 open-source React Native UI libraries in 2024

March 06, 2024

React Native: How to make rounded corners TextInput

February 22, 2022

There are times when you need to render HTML in React Native, such as when you are making a news app with articles fetched from APIs provided by a backend shared with another website. There are a couple of ways you can do this, and we will explore them in this article.

Using WebView
Using react-native-render-html
Wrap Up

Using WebView

WebView (react-native-webview) is no longer a part of React Native core but a standalone module. You can use it to render inline HTML for both Android and iOS as well.

You can install WebView by running:

npm i react-native-webview

For iOS, you need to run one more command (this is not required for Expo projects):

npx pod-install

Usage:

import { WebView } from 'react-native-webview';
/* ...... */
<WebView
        originWhitelist={['*']}
        source={{ html: HTML }}
        style={styles.webview}
      />

Note: If WebView is nested inside a View component then the View component needs to have flex = 1 as you can see in the example below. Otherwise, you will see a blank screen.

Example

import React from 'react';
import { View, StyleSheet  } from 'react-native';

import { WebView } from 'react-native-webview';

const HTML = `
<h1>This Is A Heading</h1>
<h2>And below is my dog</h2>
<img src="https://www.kindacode.com/wp-content/uploads/2020/10/dog_sample.jpg" alt="My Dog"/>
<br/>
<hr/>
<br/>
<em style="textAlign: center;">Have a nice day with React Native</em>
<div>
  <p>This is a paragraph</p>
</div>
`;

export default function App() {
  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={{ html: HTML }}
        style={styles.webview}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 100,
  },
});

Output:

You can find more options and props by reading the official docs or seeing its npmjs page.

Using react-native-render-html

This one is another package you can add to your React Native project for displaying HTML content. It is introduced as an iOS/Android pure javascript react-native component that renders your HTML into 100% native views.

This is the GitHub repo and here is the npmjs page of react-native-render-html.

Installation

Execute the following command:

npm i react-native-render-html

For iOS, you need one more step (this is not required for Expo projects):

npx pod-install

Example

The code:

import React from 'react';
import { View, StyleSheet, useWindowDimensions } from 'react-native';

import HTML from 'react-native-render-html';

const CONTENT = `
<h1>This Is A Heading</h1>
<h2>And below is my dog</h2>
<img src="https://www.kindacode.com/wp-content/uploads/2020/10/dog_sample.jpg" alt="My Dog"/>
<br/>
<hr/>
<br/>
<em style="textAlign: center;">Have a nice day with React Native</em>
<div>
  <p>This is a paragraph</p>
</div>
`;

export default function App() {
  const contentWidth = useWindowDimensions().width;
  return (
    <View style={styles.container}>
      <HTML source={{ html: CONTENT }} contentWidth={contentWidth} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 100,
  },
});

Output:

Wrap Up

We have explored 2 libraries for rendering HTML content in React Native: the first one is react-native-webview and the second one is react-native-render-html. You can continue learning more new and amazing things about modern React Native development by reading the following articles:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.