Render HTML in React Native

React Native Problem Overview

In my React Native app, I am pulling in JSON data that has raw HTML elements like this: <p>This is some text. Let’s figure out...</p>

I've added the data to a view in my app like this:

<Text>{this.props.content}</Text>

The problem is that the HTML comes out raw, it does not render like it would in a browser. Is there a way to get my JSON data to look like it would in a browser, inside my app view?

React Native Solutions

Solution 1 - React Native

Edit Jan 2021: The React Native docs currently recommend React Native WebView:

<WebView
    originWhitelist={['*']}
    source={{ html: '<p>Here I am</p>' }}
/>

https://github.com/react-native-webview/react-native-webview

If you don't want to embed a WebView, there are also third party libraries to render HTML into native views:

Edit March 2017: the html prop has been deprecated. Use source instead:

<WebView source={{html: '<p>Here I am</p>'}} />

https://facebook.github.io/react-native/docs/webview.html#html

Thanks to Justin for pointing this out.

Edit Feb 2017: the PR was accepted a while back, so to render HTML in React Native, simply:

<WebView html={'<p>Here I am</p>'} />

Original Answer:

I don't think this is currently possible. The behavior you're seeing is expected, since the Text component only outputs... well, text. You need another component that outputs HTML - and that's the WebView.

Unfortunately right now there's no way of just directly setting the HTML on this component:

https://github.com/facebook/react-native/issues/506

However I've just created this PR which implements a basic version of this feature so hopefully it'll land in some form soonish.

Solution 2 - React Native

I found this component. https://github.com/jsdf/react-native-htmlview

This component takes HTML content and renders it as native views, with customisable style and handling of links, etc.

Solution 3 - React Native

A pure JavaScript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it.

react-native-render-html

Using this component will improve your application memory footprint and performance when compared to embedded WebViews.

Install

npm install react-native-render-html --save or yarn add react-native-render-html

Basic usage

import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";

const html = `
  <h1>This HTML snippet is now rendered with native components !</h1>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <img src="https://i.imgur.com/dHLmxfO.jpg?2" />
  <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default function App() {
  // Allow images to scale to available width
  // with contentWidth prop.
  const { width } = useWindowDimensions();
  return (
    <ScrollView style={{ flex: 1 }}>
      <RenderHTML contentWidth={width} source={{ html }} />
    </ScrollView>
  );
}

RenderHTML Props reference

You may customize the style of elements via class names, tags, and you can even register custom renders for tags. More info on the official website.

Solution 4 - React Native

i uses Js function replace simply.

<Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>

Solution 5 - React Native

React Native has updated the WebView component to allow for direct html rendering. Here's an example that works for me

var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";

<WebView
  ref={'webview'}
  automaticallyAdjustContentInsets={false}
  style={styles.webView}
  html={htmlCode} />

Solution 6 - React Native

 <WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />

This worked for me :) I have html text aboutus file.

Solution 7 - React Native

import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";


<HTML source={{html: htmlCode}}/>

Solution 8 - React Native

The WebView component was not rendering for me HTML snippets, like

<b>hello</b>, world!

But if I would enclose the HTML snippet in a document, like the example below, then it did actually render the document:

<View style={styles.accContent}>
    <WebView source={{html: `<!DOCTYPE html><html><body style="font-size: 3rem">${data.content}</body></html>`}} />
</View>

Content Type	Original Author	Original Content on Stackoverflow
Question	Scott	View Question on Stackoverflow
Solution 1 - React Native	Colin Ramsay	View Answer on Stackoverflow
Solution 2 - React Native	sjoonk	View Answer on Stackoverflow
Solution 3 - React Native	Hardik Virani	View Answer on Stackoverflow
Solution 4 - React Native	KOFFI HARRIS KOUASSI	View Answer on Stackoverflow
Solution 5 - React Native	Shaheen Ghiassy	View Answer on Stackoverflow
Solution 6 - React Native	Ganesh Kanna	View Answer on Stackoverflow
Solution 7 - React Native	Vivek	View Answer on Stackoverflow
Solution 8 - React Native	gil.fernandes	View Answer on Stackoverflow