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