Expo – Integrating WebBrowser

In this simple tutorial, I want to show you how to integrate the WebBrowser module inside of Expo Application. This module allows the user to view another sites or web pages inside of your Expo Application.
We will create a simple application, where the user can enter any URL and open it by click on the button.

Getting Started

To follow this tutorial you should have the basic fundamentals of the command line, React Native, Expo, installed Expo XDE on your machine, account in Expo ecosystem, installed Expo Client on your phone (optional).
All the following was done with the next requirements: Node v6.9.5, Exp v49.2.2, Expo XDE v.22.1, Expo Mobile Client v2.3.0.1012011

New project

We will be starting a new blank project:


WebBrowser plugin already exists in Expo SDK. So we no need any additional installations. We need to import WebBrowser module from expo package inside App.js file:

WebBrowser package have 2 pairs of methods: openBrowserAsync and dismissBrowser, openAuthSessionAsync and dismissAuthSession. You can discover them in the Expo documentation. Just click here.

We are going to create a new method openWebPage (it will consist openBrowserAsync method) in App.js component. It will opens the url (in Safari in a modal window, in Chrome in a new custom on Android). Our custom method will be very simple and look like this:

Also, we need to set up the default URL in state:


The template of our application will be quite simple: TextInput and Button components. In the TextInput component, user enters the website URL and open it when pressingButton component. Don’t forget to import these components from react-native package in App.js component. You will have the following template inside render method:



The final project should now look like this:

Simple App Template
Simple App Template


Opened page
Opened web page

The final example of the project you can find here.

If you liked this, please help spread the word by hitting the recommend button below. Thanks!