How to render HTML in react-native

Question

I am getting the html response from the api as shown below. I want to render the text and open the url on click of the text that is given in the response.

"Details": "<span style=\"font-family: Georgia; font-size: 24px;\"><em><span style=\"color: #0070c0;\"><a href=\"http://the.company.com/apr19/default.aspx\" target=\"_blank\">Click here to view News.</a></span></em></span>"

Possible duplicate of [Render HTML in React Native](https://stackoverflow.com/questions/29334984/render-html-in-react-native) — johnborges, Oct 07 '19 at 15:41

Jaydeep Galani · Answer 1 · 2019-10-07T12:41:33.193

4

You can use WebView as HTML renderer like this,

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}

See official docs here

edited Oct 07 '19 at 12:41

answered Oct 07 '19 at 12:32

Jaydeep Galani

4,842
3
27
47

Please note that docs you are reffering to are deprecated. [react-native-community/react-native-webview fork](https://github.com/react-native-community/react-native-webview) should be used for new projects. – Krzysztof Sakowski Oct 07 '19 at 12:38
I also tried with WebView which is now a part of react-native-community but I got the error it does not exist in Haste map. I also linked it manually and for ios I installed pod but it still gives an error. – user11426267 Oct 07 '19 at 14:04
@JaydeepGalani is there a way to extract url from such response. – user11426267 Oct 09 '19 at 07:18

score 2 · Answer 2 · answered Oct 07 '19 at 12:53

use this package react-native-render-html

extremely customizable and easy to use and aims at being able to render anything you throw at it.

import React, { Component } from 'react';
import { ScrollView, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';

const htmlContent = `
    <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 class Demo extends Component {
    render () {
        return (
            <ScrollView style={{ flex: 1 }}>
                <HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
            </ScrollView>
        );
    }
}

I used this method but for some it is working while others it displays with HTML tags — user11426267, Oct 07 '19 at 14:06
While it works, for some reason there's a deprecation warning. — Volodymyr Bobyr, Jan 16 '21 at 23:24

How to render HTML in react-native

2 Answers2