Render HTML in React Native

Question

I'm importing raw HTML elements from JSON data into my React Native app in the following way: 

<p>This is some text. Let&#8217;s figure out...</p>

In my app, I've added the data to a view as follows:

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

The HTML is rendered incorrectly and appears in its raw form, which is a concern. 

Is it possible to make my app view's JSON data resemble how it would appear in a browser?

Answer 1

This is not now feasible, in my opinion. Since the Text component only outputs, well, text, the behavior you're seeing is to be expected. The WebView is the additional component you require that outputs HTML.

Sadly, there is currently no method to simply set the HTML on this component:

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

But I just made this PR that implements a very rudimentary version of this feature, so hopefully, it will appear soon.

If you need to know more about React, Its recommended to join React JS online course  today.

Answer 2

React Native does not provide any specific methods for rendering HTML. However, you can use third-party libraries such as React Native WebView or React Native HTMLView to render HTML in React Native.