User experience plays a pivotal role in determining an app's success. React Native offers various methods to handle external links within applications. This article explores the challenges associated with traditional external redirection and introduces a solution using the react-native-inappbrowser-reborn package to enhance UX in react native applications.

Prerequisites

Before delving into the tutorial, ensure the following prerequisites are met:

• React Native CLI is installed
• A React Native application is installed
• Xcode or Android Emulator is installed

Why use in-app browsing

• Consistent UI/UX: Developers can customize the in-app browser's appearance, ensuring a cohesive user interface that aligns with the overall app design.
• Enhanced functionality: The library provides essential functionalities such as event handling, JavaScript execution, URL loading, and navigation controls, enhancing the interactivity and functionality of web-based content.
• Reduced load time: In-app browsing minimizes perceived load time by keeping users within the app environment, contributing to a faster and more efficient browsing experience.

Installation and Configuration:

1. Install the dependancy

npm install react-native-inappbrowser-reborn --save

2. Configure for iOS

Open the ios folder in the project and modify the Podfile as follows:

#...
target 'AwesomeProjectTests' do
    inherit! :complete
    pod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn'
end
#...

Run the following commands in the terminal:

cd ios && pod install && cd ..

3. Configure for android

Open the build.gradle file in the Android folder and update with the following settings

buildscript {
    ext {
        androidXBrowser = "1.3.0"
        // ...

Opening the In-App Browser

To open the in-app browser in your application, follow these steps.

import InAppBrowser from 'react-native-inappbrowser-reborn';

const openInAppBrowser = async () => {
    const url = 'https://example.com'; // Replace with the desired URL
    const isAvailable = await InAppBrowser.isAvailable;
    const result = await InAppBrowser.open(url, {
        // iOS-specific options
        dismissButtonStyle: 'close',
        preferredBarTintColor: '#000',
        preferredControlTintColor: 'white',
        readerMode: false,
        animated: true,
        modalPresentationStyle: 'fullScreen',
        modalTransitionStyle: 'coverVertical',
        modalEnabled: true,
        enableBarCollapsing: false,
        // Android-specific options
        showTitle: true,
        enableUrlBarHiding: true,
        enableDefaultShare: true,
        forceCloseOnRedirection: false,
        headers: {
           'my-custom-header': 'my-custom-header-value'
        },
    });
    console.log(result);
};

 

Add the function to a click event

<TouchableOpacity onPress={ openInAppBrowser }>
    <Text>Open In-App Browser</Text>
</TouchableOpacity>

 

Save the code and start the application to observe the enhanced in-app browsing experience.

   

I hope you enjoyed reading this article!