Get my new tutorials in your inbox every week

Integrate iFrame with React Native project

At times we need to show web content within our React Native application. In this post, I will cover how to integrate iFrame with a React Native project. Let’s get started

integrate iFrame in your React Native project

What is an iFrame?

I guess, most of us, the Web and React developers have heard about an iFrame. If you have not, then let me define it for you in layman’s term.

An iFrame lets you show or embed another web page within the current HTML page. And that web page can be a 3rd party web page from a different domain. For eg., you can load a www.google.com inside your web page by using an iFrame.

As an example, I am loading an Open Street Map on my current page using an iFrame.

<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="500"
    height="400"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

Getting Started

You can use something called a WebView to show web content inside a Native View. React Native provides a web view component. A WebView is kind of a stripped-down version of a browser (eg. it does not have the menu bar, a status bar that a normal browser has)

React Native core has a WebView component, but they are planning to remove it from the core React Native package. Instead, they recommend using the react-native-webview module/component from react-native-community

Installing react-native-webview

npm install --save react-native-webview

Once you install the component in your project, you can use it as shown below,

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

** For showing static HTML or inline HTML, you need to set originWhiteList to *.

How to integrate an iFrame in your React Native app?

Similar to the example above you can load an iFrame inside of a WebView. Let’s see an example below

import { WebView } from 'react-native-webview';
 
class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: "<iFrame src='your_URL' />" }}
      />
    );
  }
}

So as shown in the example above, your iFrame is loaded inside the WebView component. You can then render any web page or URL inside your iFrame then.

Want similar tutorials to be delivered to your inbox directly? Subscribe to my email newsletter. I also send out free ebooks and tutorial pdfs regularly to my readers. I do not spam by the way and respect your privacy. Unsubscribe any time.

Write a Comment

Your email address will not be published. Required fields are marked *