Render HTML in React Native

Scott Published at Dev

Scott

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?

Colin Ramsay

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-11-18

Comments

0 comments

From Dev

Related Related

Article

Render HTML in React Native

Render HTML in React Native

react-native: `this.state` is undefined in `render`

how to render objects in react native?

React Native render function throws error

React Native View Render

react native navigator view does not render

React Native staggered render

React-native, render a button click dynamically

React Native: Render on Fetch

How to safely render html in react?

React | render html tag in jsx

React native button click render different components

Render a component onPress(TouchableOpacity/Button) in React Native

Unable to render array of objects in react-native

Conditionally render border colour React Native

react native render only part

react native navigator view does not render

Skipping Views in React Native render function

React-native, render a button click dynamically

react native navigator render method error

React Native make network call before render

How to render component with ajax in react native?

React Native / React - refactoring prop before render()

React Native optimize the code to render the correct tag

React native: ListView doesn't render a row

How to render checkbox on the <Image> (React Native)

Render dynamic html in react js

setState not causing a render React Native

react native render another component in main

React Native : FlatList does not render