CODEWITHSUNDEEP
react-native
reactNative94
reactNative94

Reputation: 371

How to render HTML in react-native

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>"

Upvotes: 3

Views: 13490

Answers (2)

Aurangzaib Rana
Aurangzaib Rana

Reputation: 4252

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>
        );
    }
}

Upvotes: 2

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

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

Upvotes: 4

Related Questions