Registry / http-networking / react-native-inappbrowser-reborn

react-native-inappbrowser-reborn

library3.7.1jsnpmunverified

react-native-inappbrowser-reborn is a JavaScript library providing a robust interface to the system's native web browser functionality within a React Native application. It leverages Chrome Custom Tabs on Android and SafariServices/AuthenticationServices on iOS to offer a rich, secure, and performant in-app browsing experience. The current stable version is 3.7.1, released recently, demonstrating active development and maintenance. The package aims for a regular release cadence, incorporating new features and bug fixes as seen in its recent minor and patch updates. Key differentiators include its cross-platform compatibility, support for handling complex redirects (crucial for OAuth flows), extensive customization options for the browser UI, and built-in error handling. It's actively used in several production applications, highlighting its reliability and maturity for critical use cases like authentication and external link handling.

http-networking auth-security

npm install react-native-inappbrowser-reborn

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-INAPP

react-native-inappbrowser-reborn

http-networkingjavascriptv3.7.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

InAppBrowser

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

✗ const InAppBrowser = require('react-native-inappbrowser-reborn');

The library primarily uses a default export. CommonJS users should access it via `.default`.

InAppBrowserOptions

✓ import type { InAppBrowserOptions } from 'react-native-inappbrowser-reborn';

Use a type import for the options interface, especially in TypeScript projects.

openAuth

✓ import InAppBrowser from 'react-native-inappbrowser-reborn'; const authUrl = await InAppBrowser.openAuth(url, redirectUrl, options);

✗ import { openAuth } from 'react-native-inappbrowser-reborn';

Functions like `openAuth` are methods of the default `InAppBrowser` object, not named exports.

This quickstart demonstrates how to open a URL using InAppBrowser.open, including platform-specific customization options and basic error handling, after checking for availability.

import React from 'react'; import { Button, SafeAreaView, StyleSheet } from 'react-native'; import InAppBrowser from 'react-native-inappbrowser-reborn'; const App = () => { const openBrowser = async () => { const url = 'https://www.google.com'; try { if (await InAppBrowser.is\\Available()) { const result = await InAppBrowser.open(url, { // iOS Properties dismissButtonStyle: 'cancel', preferredBarTintColor: '#4537FE', preferredControlTintColor: 'white', readerMode: false, animated: true, modalPresentationStyle: 'fullScreen', modalTransitionStyle: 'coverVertical', modalEnabled: true, enableBarCollapsing: false, // Android Properties showTitle: true, toolbarColor: '#4537FE', secondaryToolbarColor: 'black', navigationBarColor: 'black', navigationBarDividerColor: 'white', enableUrlBarHiding: true, enableDefaultShare: true, forceCloseOnRedirection: false, hasBackButton: true, // Specify browser package for Android // browserPackage: 'com.android.chrome', // Show in-app browser initially showInRecents: true, }); console.log('Browser result:', result); } else { console.log('InAppBrowser not available. Opening with Linking.'); } } catch (error) { console.error('Error opening browser:', error.message); } }; return ( <SafeAreaView style={styles.container}> <Button title="Open Google.com" onPress={openBrowser} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); export default App;

Debug

Known issues

breakingProjects using `react-native-inappbrowser-reborn` on Android must ensure their `android/build.gradle` correctly configures either Android Support or AndroidX dependencies. Mismatched configurations can lead to build failures.

fix

For Android Support, set `compileSdkVersion`, `targetSdkVersion`, and `supportLibVersion` to 28.0.0. For AndroidX, ensure your project is properly migrated to AndroidX via `npx jetify` or manual configuration to avoid conflicts.

affects: >=3.0.0

breakingOlder versions of the library (prior to v3.6.0) experienced an 'invalid scheme' error on iOS 14.5+ which would prevent the browser from opening correctly.

fix

Upgrade to `react-native-inappbrowser-reborn@3.6.0` or higher to resolve compatibility issues with iOS 14.5's security changes.

affects: <3.6.0

gotchaWhen performing authentication flows (e.g., OAuth), ensure you are using `InAppBrowser.openAuth` which is specifically designed to handle redirects and return the appropriate URL, rather than `InAppBrowser.open`.

fix

For authentication, always use `await InAppBrowser.openAuth(url, redirectUrl, options)` and handle the returned URL. Remember to set up custom URL schemes in your `Info.plist` and `AndroidManifest.xml`.

affects: >=3.0.0

gotchaInAppBrowser methods are asynchronous and should always be called with `await` within an `async` function. Forgetting `await` can lead to unexpected behavior or unhandled promise rejections.

fix

Always use `await` when calling methods like `InAppBrowser.open()` or `InAppBrowser.isAvailable()` to ensure proper execution flow and error handling.

affects: >=3.0.0

Errors

Common errors & fixes

Error: cannot find symbol builder.setNavigationBarColor

This error typically occurs on Android when using an older version of the library or an incorrect Android Support/AndroidX configuration.

fix

Upgrade to `react-native-inappbrowser-reborn@3.6.2` or higher. Ensure your `android/build.gradle` is correctly configured for either Android Support (SDK 28.0.0) or AndroidX.

com.facebook.react.bridge.NoSuchKeyException

An issue on Android where a key was not found in the React Native bridge, often due to a bug in parsing options.

fix

Upgrade to `react-native-inappbrowser-reborn@3.6.3` or higher, which includes a fix for this specific exception.

Build failed due to 'Invalid scheme' on iOS 14.5+

Changes in iOS 14.5 security policies caused older versions of the library to fail when opening URLs.

fix

Update your `react-native-inappbrowser-reborn` package to version `3.6.0` or newer.

Error: InAppBrowser is not available. Please make sure you have linked the library correctly.

This usually indicates that the native modules for the library were not properly linked or initialized, or the `isAvailable()` check returned false.

fix

For React Native >= 0.60, ensure `pod install` is run in the `ios` directory. For Android, verify `build.gradle` configurations (AndroidX/Support) and rebuild the app. Always check `InAppBrowser.isAvailable()` before attempting to open a URL.

Upgrade

Version history

3.7.1latest on npm

Audit

Dependencies

react-nativerequiredCore dependency for any React Native library, specifically peer dependency for runtime integration.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/proyecto26/react-native-inappbrowser ↗

packagehttps://www.npmjs.com/package/react-native-inappbrowser-reborn ↗