How to Show Static HTML in React Native Webview

You can show static HTML in your React Native app using the WebView component. The WebView component is not available in react native core but you can get it from react native community.

Firstly, install react native webview using any of the following commands.

npm install --save react-native-webview


yarn add react-native-webview

The iOS users don’t forget to run pod install inside the ios folder.

You can show the static HTML by passing it to the source prop of the WebView component.

          html: '<h1>Hello world</h1>'

Following is the complete example.

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

const App = () => {
  return (
    <View style={{flex: 1}}>
          html: `
      <h1>My First Heading</h1>
      <p>My first paragraph.</p>

export default App;

Following is the output of the above react native webview example.

react native webview example

That’s how you show HTML in react native using WebView.

Similar Posts

Leave a Reply