Render HTML in React Native

Question

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?

in React, there's `dangerouslySetInnerHTML` property (https://facebook.github.io/react/docs/jsx-gotchas.html) to display HTML. I can't test it now, but it could work also with Native. — Samuli Hakoniemi, Mar 30 '15 at 07:53
Actually I tried that: `` didn't work unless I'm doing something wrong. — Scott, Mar 30 '15 at 18:25
check this: https://gist.github.com/jsdf/7f983f2cd955fd75d6cc — Samuli Hakoniemi, Mar 31 '15 at 11:08
https://github.com/react-native-community/react-native-webview seems to be the latest component to achieve this. — Dr. N, May 13 '20 at 18:32

score 94 · Accepted Answer · edited Aug 02 '21 at 14:45

94

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.

edited Aug 02 '21 at 14:45

Jules Sam. Randolph

3,610
2
31
50

answered Mar 31 '15 at 09:30

Colin Ramsay

16,086
9
52
57

Awesome Colin, thanks for doing that! I'll keep an eye on the github issue. – Scott Mar 31 '15 at 15:10
3

According to the docs at versions 0.42 (https://facebook.github.io/react-native/docs/webview.html#html) the html property has been deprecated. It now says that it should be used with the source prop instead. `Here I am' }} />`. – Justin Mar 06 '17 at 15:56
Docs now say `Note that static HTML will require setting originWhitelist to ["*"].` Although I can't get this to work. – ajbraus Mar 14 '19 at 02:44
Man this looks great, except I pasted `Here I am'}} />` into my component and it's not rendering anything! Help! (I'll try `react-native-render-html` in the meantime) – Jonathan Tuzman Apr 10 '19 at 22:51
@JonathanTuzman You need to set `flex` and `flexdirection` to the View that is wrapping your WebView like `{"put your WebView here"}`. – Caio Mar Jun 28 '19 at 23:07
2

[react-native WebView](https://reactnative.dev/docs/webview.html) is deprecated now: Use [react-native-community/react-native-webview](https://github.com/react-native-community/react-native-webview) instead. – Dario Seidl May 12 '20 at 17:10

score 17 · Answer 2 · answered Aug 18 '15 at 06:40

17

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.

answered Aug 18 '15 at 06:40

sjoonk

179
1
2

6

HTML styling with CSS does not work with react-native-htmlview. If that's an issue, I don't recommend it. – Renato Back Sep 06 '16 at 22:56
2

Don't recommend it too. – lngs May 12 '17 at 13:41
It is now 2019 and I see no modern, recently updated, useable option for this! – mediaguru Aug 06 '19 at 02:44
Actually it does help me for my purpose rendering html with height inside scrollview, thanks – Nald Dev Oct 31 '19 at 09:50
1

@RenatoBack If you need inline CSS support, see https://stackoverflow.com/a/54899575/2779871 – Jules Sam. Randolph Jun 22 '21 at 22:42
I'm not sure why you're offering me CSS support, since I never asked for it. Anyways, thanks @JulesSam.Randolph – Renato Back Jun 23 '21 at 04:39
1

@RenatoBack "HTML styling with CSS does not work with react-native-htmlview." (Sep 6 '16 at 22:56) – Jules Sam. Randolph Jun 23 '21 at 10:26

score 16 · Answer 3 · edited Aug 06 '21 at 07:37

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.

I think that as of version 6.0.0 of react-native-render-html the line should actually be: — iewebguy, Oct 10 '21 at 21:41

score 3 · Answer 4 · answered Mar 27 '19 at 09:38

3

i uses Js function replace simply.

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

answered Mar 27 '19 at 09:38

KOFFI HARRIS KOUASSI

161
1
7

1

Could you add some information about what this does or how / why it works? – Stephen Smith Apr 25 '19 at 18:16
1

This wont render HTML it just strips out any html content. – SpeedOfSpin Dec 15 '21 at 14:49

score 2 · Answer 5 · answered Jan 26 '16 at 22:26

2

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} />

answered Jan 26 '16 at 22:26

Shaheen Ghiassy

7,397
3
40
40

8

The html prop is [now deprecated](https://facebook.github.io/react-native/docs/webview.html). Use the source prop instead. – Victor Axelsson Jul 05 '16 at 11:11

score 2 · Answer 6 · answered Nov 25 '16 at 12:21

2

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

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

answered Nov 25 '16 at 12:21

Ganesh Kanna

2,269
1
19
29

score 2 · Answer 7 · answered Sep 17 '21 at 11:14

2

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


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

answered Sep 17 '21 at 11:14

Vivek

4,916
35
40

score 0 · Answer 8 · answered Apr 20 '22 at 16:49

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>

Render HTML in React Native

8 Answers8

Linked