How to render HTML content in React Native

Last updated on January 5, 2021 A Goodman Loading... Post a comment

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

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:

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 see 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 nn 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:

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 by reading the following articles: Working with CheckBox in React NativeHow to implement tables in React NativeHow to set a gradient background in React NativeTop 4 free React Native UI libraries.

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x