Render HTML in React Native?

Answer

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.

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

 

 

All REACT NATIVE Questions

Ask your interview questions on react-native

Write Your comment or Questions if you want the answers on react-native from react-native Experts
Name* :
Email Id* :
Mob no* :
Question
Or
Comment* :
 





Disclimer: PCDS.CO.IN not responsible for any content, information, data or any feature of website. If you are using this website then its your own responsibility to understand the content of the website

--------- Tutorials ---