Render HTML in React Native

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.


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.


A 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

Using this component will improve your application memory footprint and performance when compared to embedded WebViews.

Install

npm install react-native-render-html --save or yarn add react-native-render-html

Basic usage

import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";

const html = `
  <h1>This HTML snippet is now rendered with native components !</h1>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <img src="https://i.imgur.com/dHLmxfO.jpg?2" />
  <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default function App() {
  // Allow images to scale to available width
  // with contentWidth prop.
  const { width } = useWindowDimensions();
  return (
    <ScrollView style={{ flex: 1 }}>
      <RenderHTML contentWidth={width} source={{ html }} />
    </ScrollView>
  );
}

RenderHTML Props reference

You may customize the style of elements via class names, tags, and you can even register custom renders for tags. More info on the official website.


i uses Js function replace simply.

<Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>

Tags:

React Native

Recent Posts