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&#8217;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?

Answer 1

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:

1. react-native-render-html
2. react-native-htmlview

---

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.

Answer 2

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.