Render HTML in React Native

Question

In my React Native app  I am pulling in JSON data that has raw HTML elements like this   lt p gt This is some text  Let amp  8217 s figure out    lt  p gt   I ve added the data to a view in my app like this    lt Text gt  this props content  lt  Text gt   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

User · Answer

i uses Js function replace simply    lt Text gt  item excerpt rendered replace   lt       gt     gt     g       lt  Text gt

User · Answer

React Native has updated the WebView component to allow for direct html rendering  Here s an example that works for me  var htmlCode     lt b gt I am rendered in a  lt i gt WebView lt  i gt  lt  b gt      lt WebView   ref   webview     automaticallyAdjustContentInsets  false    style  styles webView    html  htmlCode    gt

User · Answer

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

User · Answer

lt WebView ref   webview   automaticallyAdjustContentInsets  false  source  require     Assets aboutus html      gt    This worked for me    I have html text aboutus file

User · Answer

An iOS Android 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  use above library to improve your app performance level and easy to use   Install  npm install react-native-render-html --save or yarn add react-native-render-html  Basic usage  import React    Component   from  react   import   ScrollView  Dimensions   from  react-native   import HTML from  react-native-render-html    const htmlContent          lt h1 gt This HTML snippet is now rendered with native components   lt  h1 gt       lt h2 gt Enjoy a webview-free and blazing fast application lt  h2 gt       lt img src  https   i imgur com dHLmxfO jpg 2    gt       lt em style  textAlign  center   gt Look at how happy this native cat is lt  em gt      export default class Demo extends Component       render              return                lt ScrollView style    flex  1    gt                   lt HTML html  htmlContent  imagesMaxWidth  Dimensions get  window   width    gt               lt  ScrollView gt                       PROPS  you may user it s different different types of props  see above link  for the designing and customizable also using below link refer   Customizable render html

User · Answer

Edit Jan 2021  The React Native docs currently recommend React Native WebView   lt WebView     originWhitelist             source    html    lt p gt Here I am lt  p gt        gt   https   github com react-native-webview react-native-webview  Edit March 2017  the html prop has been deprecated  Use source instead   lt WebView source   html    lt p gt Here I am lt  p gt       gt   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   lt WebView html    lt p gt Here I am lt  p gt      gt    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

[react-native] Render HTML in React Native

Examples related to react-native