Seamless In-App Browsing in React Native

Originally written in 2024. Content may vary slightly across newer versions.

Are you tired of your users getting redirected to external web browsers whenever they click on links within your React Native app? Say goodbye to this frustration with react-native-inappbrowser-reborn!

In this article, we’ll dive into the practical aspects of using react-native-inappbrowser-reborn to provide a seamless in-app browsing experience for your users.

By the end of this post, we’ll present a practical demo illustrating the integration of react-native-inappbrowser-reborn in a React Native app. What’s more, the code for this demo is readily usable in real projects — just copy and paste!

Introduction

react-native-inappbrowser-reborn is a powerful library that allows you to open external URLs within your React Native app’s interface, keeping users engaged without disrupting their experience. Whether you’re implementing authentication flows, payment gateways, or simply opening external links shared within the app, react-native-inappbrowser-reborn has got you covered.

Getting Started

Getting started with react-native-inappbrowser-reborn is a breeze. First, install the library in your React Native project:

npm install react-native-inappbrowser-reborn

Next, link the library to your native iOS projects:

cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

Opening URLs in In-App Browser

Let’s dive into the most exciting part — opening external URLs within your app using react-native-inappbrowser-reborn. Here’s a simple example demonstrating how to open a URL in the in-app browser:

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';

const ExternalLinkButton = ({ url }) => {
  const handleOpenLink = async () => {
    try {
      await InAppBrowser.open(url);
    } catch (error) {
      console.error('Failed to open link:', error);
    }
  };

  return (
    <TouchableOpacity onPress={handleOpenLink}>
      <Text>Open Link</Text>
    </TouchableOpacity>
  );
};

export default ExternalLinkButton;

Customization Options

react-native-inappbrowser-reborn provides various customization options to tailor the in-app browsing experience according to your app's needs. For example, you can specify additional options such as:

Show/hide the browser’s title.
Enable/disable navigation controls.
Customize the browser’s presentation style.

Refer to the library’s documentation for a full list of available options and their usage.

Demo: Appointments and Messages Panels

Imagine you’re developing a mobile application for managing appointments and messages. You want to provide users with the ability to seamlessly access external content, such as messages from a messaging platform, without leaving the app’s interface. Let’s take a look at how this can be achieved using react-native-inappbrowser-reborn.

const handleContinueToMsgPortal = async url => {
  try {
    const isAvailable = await InAppBrowser.isAvailable();
    InAppBrowser.close();

    if (isAvailable) {
      return await InAppBrowser.open(url, {
        // iOS Properties
        modalPresentationStyle: 'formSheet',
        modalEnabled: true,
        enableBarCollapsing: false,
        // Android Properties
        showTitle: false,
        enableUrlBarHiding: false,
        enableDefaultShare: false,
        showInRecents: true,
      });
    }

    return await Linking.openURL(url);
  } catch (e) {
    Alert.alert(e.toString());
  }
};

This code snippet defines a function handleContinueToMsgPortal responsible for handling the redirection of users to an external messaging platform within a React Native app.

Here's a breakdown of its functionality:

Async Function: handleContinueToMsgPortal is an asynchronous function that takes a URL as its parameter. It's designed to handle asynchronous operations, such as checking for the availability of the in-app browser and opening the specified URL.
In-App Browser Availability Check: The function starts by checking if the in-app browser is available using InAppBrowser.isAvailable(). This method returns a boolean value indicating whether the in-app browser is available for use on the current platform.
Closing Existing Browser Instances: If the in-app browser is available, the function proceeds to close any existing browser instances using InAppBrowser.close(). This ensures that any previous browser sessions are terminated before opening a new one.
Opening the URL: If the in-app browser is available, the function attempts to open the specified URL using InAppBrowser.open(). It provides additional options for customizing the browser's behavior, such as setting modal presentation style on iOS and various properties on Android.
Fallback to Linking: If the in-app browser is not available or encounters an error during the opening process, the function falls back to using Linking.openURL() to open the URL in the device's default external browser.
Error Handling: The function includes a try-catch block to handle any errors that may occur during the process. If an error occurs, it displays an alert with the error message using Alert.alert().

Android demo

You may notice a behavioral difference between iOS and Android: While iOS utilizes the default browser and opens up the URL in a modal, Android opens up the URL in a custom tab from Chrome, occupying the entire space.

Alas, don’t forget to handle errors if anything goes wrong.

Conclusion

With react-native-inappbrowser-reborn, you can elevate your React Native app's user experience by seamlessly integrating in-app browsing capabilities. From opening external links to handling authentication flows, the possibilities are endless. Say goodbye to abrupt redirects to external browsers and hello to a cohesive app experience for your users.

The source code can be found on github. Happy coding! ☀️