Render HTML in React Native

Question

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

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 (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
– Samuli Hakoniemi, Commented Mar 30, 2015 at 7:53
Actually I tried that: <Text dangerouslySetInnerHTML={{__html: this.props.content }} ></Text> didn't work unless I'm doing something wrong. — Scott
– Scott, Commented Mar 30, 2015 at 18:25
github.com/react-native-community/react-native-webview seems to be the latest component to achieve this. — Dr. N
– Dr. N, Commented May 13, 2020 at 18:32

Jules Sam. Randolph · Accepted Answer · 2021-08-02 14:45:18Z

107

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 2, 2021 at 14:45

Jules Sam. Randolph

4,4004 gold badges35 silver badges52 bronze badges

answered Mar 31, 2015 at 9:30

Colin Ramsay

16.5k10 gold badges55 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Scott Over a year ago

Awesome Colin, thanks for doing that! I'll keep an eye on the github issue.

Justin Over a year ago

According to the docs at versions 0.42 (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. <WebView source={{ html: 'Here I am' }} />.

ajbraus Over a year ago

Docs now say Note that static HTML will require setting originWhitelist to ["*"]. Although I can't get this to work.

Jonathan Tuzman Over a year ago

Man this looks great, except I pasted <WebView source={{html: 'Here I am'}} /> into my component and it's not rendering anything! Help! (I'll try react-native-render-html in the meantime)

Dario Seidl Over a year ago

react-native WebView is deprecated now: Use react-native-community/react-native-webview instead.

|

sjoonk · Accepted Answer · 2015-08-18 06:40:31Z

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, 2015 at 6:40

sjoonk

1791 silver badge2 bronze badges

7 Comments

Renato Back Over a year ago

HTML styling with CSS does not work with react-native-htmlview. If that's an issue, I don't recommend it.

lngs Over a year ago

Don't recommend it too.

mediaguru Over a year ago

It is now 2019 and I see no modern, recently updated, useable option for this!

Jules Sam. Randolph Over a year ago

@RenatoBack If you need inline CSS support, see stackoverflow.com/a/54899575/2779871

Jules Sam. Randolph Over a year ago

@RenatoBack "HTML styling with CSS does not work with react-native-htmlview." (Sep 6 '16 at 22:56)

|

Jules Sam. Randolph · Accepted Answer · 2021-08-06 07:37:20Z

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: <RenderHTML contentWidth={width} source={{ html : html }} />

KOFFI HARRIS KOUASSI · Accepted Answer · 2019-03-27 09:38:54Z

3

i uses Js function replace simply.

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

answered Mar 27, 2019 at 9:38

KOFFI HARRIS KOUASSI

3472 silver badges8 bronze badges

2 Comments

Stephen Smith Over a year ago

Could you add some information about what this does or how / why it works?

SpeedOfSpin Over a year ago

This wont render HTML it just strips out any html content.

Shaheen Ghiassy · Accepted Answer · 2016-01-26 22:26:06Z

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, 2016 at 22:26

Shaheen Ghiassy

7,5573 gold badges43 silver badges41 bronze badges

1 Comment

Victor Axelsson Over a year ago

The html prop is now deprecated. Use the source prop instead.

Ganesh Kanna · Accepted Answer · 2016-11-25 12:21:35Z

2

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

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

answered Nov 25, 2016 at 12:21

Ganesh Kanna

2,2951 gold badge19 silver badges29 bronze badges

Comments

Vivek · Accepted Answer · 2021-09-17 11:14:46Z

2

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


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

answered Sep 17, 2021 at 11:14

Vivek

5,23340 silver badges43 bronze badges

Comments

gil.fernandes · Accepted Answer · 2022-04-20 16:49:33Z

1

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>

answered Apr 20, 2022 at 16:49

gil.fernandes

14.8k7 gold badges78 silver badges87 bronze badges

Comments

Sandeep Amarnath · Accepted Answer · 2024-06-19 21:31:48Z

react-native-htmlview package works for me

Adding to @sjoonk answer.

WebView didn't work for me. The app crashed without an error message if I use this. May be there was a version mismatch.
react-native-render-html also didn't work as I was working in .tsx file. I couldn't download @types/react-native-render-html package and there was an error.

The only thing that worked for me was https://www.npmjs.com/package/react-native-htmlview

I was using yarn and typescript. Did the following to install the package.

yarn add react-native-htmlview --save

yarn add @types/react-native-htmlview --save-dev

In .tsx component

import HTMLView from 'react-native-htmlview';

function App(){

    const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;

    return (
      <HTMLView value={htmlContent}/>
    );

}

Collectives™ on Stack Overflow

Render HTML in React Native

9 Answers 9

6 Comments

7 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

7 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related