Render HTML in React Native

0 votes

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?

Aug 5, 2022 in HTML by Tejashwini
• 3,820 points
1,069 views

2 answers to this question.

0 votes

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.

answered Aug 8, 2022 by Vikas
0 votes
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.
answered Apr 1, 2023 by DSKView
• 180 points

Related Questions In HTML

0 votes
2 answers

How to play video in react.js using html video tag?

This is a solution: import Video from "..Videos/video1.mp4" class ...READ MORE

answered May 21, 2023 in HTML by Renie
5,736 views
0 votes
0 answers

Color names allowed in HTML/CSS

what are the CSS color names, though ...READ MORE

May 27, 2022 in HTML by Tejashwini
• 3,820 points
165 views
0 votes
0 answers

What is class in HTML?

what is a class in HTML, I ...READ MORE

Jun 3, 2022 in HTML by Tejashwini
• 3,820 points
205 views
0 votes
0 answers

Difference between id and name attributes in HTML

The "id" and "name" attributes serve the ...READ MORE

Jun 3, 2022 in HTML by Tejashwini
• 3,820 points
222 views
0 votes
0 answers

error: package com.android.annotations does not exist

This is my class: import com.android.annotations.NonNullByDefault; @NonNullByDefault public final class ...READ MORE

May 13, 2022 in Others by Kichu
• 19,050 points
2,666 views
0 votes
2 answers

Compress image up to maximum size(100kb) at NodeJS or React Native

Image Compression in React Native is a ...READ MORE

answered Apr 1, 2023 in Node-js by DSKView
• 180 points
4,817 views
0 votes
1 answer

Uses for the '&quot;' entity in HTML

It is impossible and unnecessary to know ...READ MORE

answered Aug 4, 2022 in HTML by Deepak
• 980 points
690 views
0 votes
1 answer

How to word wrap text in HTML?

Try this: div { width: ...READ MORE

answered Aug 4, 2022 in HTML by Deepak
• 980 points
829 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP