# Unlocking Seamless Web Browsing in React Native with react-native-inappbrowser-reborn

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

```shell
npm install react-native-inappbrowser-reborn
```

Next, link the library to your native iOS projects:

```shell
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:

```javascript
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](https://github.com/proyecto26/react-native-inappbrowser) 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`.

![iOS demo](https://cdn.hashnode.com/uploads/covers/69bdf388475ca1797455d60f/83349c18-95bd-4987-9ebb-3693848d6181.gif align="center")

```javascript
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:

1.  *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.
    
2.  *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.
    
3.  *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.
    
4.  *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.
    
5.  *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.
    
6.  *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()`.
    

![](https://cdn.hashnode.com/uploads/covers/69bdf388475ca1797455d60f/dbeb5767-926e-4fc0-a273-33331a1cc4e8.gif align="center")

*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](https://github.com/xinyingz2/ReactNativeDemos/tree/feature/openInAppBroswer). Happy coding! ☀️