React Native Html Render Tutorial

React Native

Nicesnippets

206

13-11-2021


React Native Html Render Tutorial

Hi Guys,

In this blog, I will explain you how to create Html render in react native. You can easily create Html render in react native. First i will import namespace RenderHtml, after I will make Html render using RenderHtml in react native.

Here, I will give you full example for simply display Html render using react native as bellow.

Step 1 - Create project


In the first step Run the following command for create project.

expo init Nicesnippets

Step 2 - Install Package

In the step,I will install react-native-render-html.

npm i react-native-render-html

Step 3 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from "react";

import { Text, View,StyleSheet, Button,useWindowDimensions} from 'react-native';

import { Provider ,Appbar} from 'react-native-paper';

import RenderHtml from 'react-native-render-html';

const NicesnippetsComponent = () => {

const _goBack = () => console.log('Went back');

const _handleSearch = () => console.log('Searching');

const _handleMore = () => console.log('Shown more');

const width = useWindowDimensions();

const source = {

html: `

<h2 style='text-align:center;color:#008B8B;'>

Nicesnippets.com

</h2>

<p style='text-align:center;margin:5px;padding:15px;background:#008B8B;border-radius:5px;color:#fff;'>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

`

};

return (

<Provider>

<Appbar.Header>

<Appbar.BackAction onPress={_goBack} />

<Appbar.Content title="HTML Render" />

<Appbar.Action icon="magnify" onPress={_handleSearch} />

<Appbar.Action icon="dots-vertical" onPress={_handleMore} />

</Appbar.Header>

<View>

<RenderHtml

contentWidth={250}

source={source}

/>

</View>

</Provider>

);

};

export default NicesnippetsComponent;

Step 4 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...


Recommended Posts