{"id":13884,"library":"react-native-inappbrowser-reborn","title":"In-App Browser for React Native","description":"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.","status":"active","version":"3.7.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/proyecto26/react-native-inappbrowser","tags":["javascript","react-native","React Native","JavaScript","Android","iOS","browser","InAppBrowser","in-app-browser","typescript"],"install":[{"cmd":"npm install react-native-inappbrowser-reborn","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-inappbrowser-reborn","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-inappbrowser-reborn","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for any React Native library, specifically peer dependency for runtime integration.","package":"react-native","optional":false}],"imports":[{"note":"The library primarily uses a default export. CommonJS users should access it via `.default`.","wrong":"const InAppBrowser = require('react-native-inappbrowser-reborn');","symbol":"InAppBrowser","correct":"import InAppBrowser from 'react-native-inappbrowser-reborn';"},{"note":"Use a type import for the options interface, especially in TypeScript projects.","symbol":"InAppBrowserOptions","correct":"import type { InAppBrowserOptions } from 'react-native-inappbrowser-reborn';"},{"note":"Functions like `openAuth` are methods of the default `InAppBrowser` object, not named exports.","wrong":"import { openAuth } from 'react-native-inappbrowser-reborn';","symbol":"openAuth","correct":"import InAppBrowser from 'react-native-inappbrowser-reborn';\nconst authUrl = await InAppBrowser.openAuth(url, redirectUrl, options);"}],"quickstart":{"code":"import React from 'react';\nimport { Button, SafeAreaView, StyleSheet } from 'react-native';\nimport InAppBrowser from 'react-native-inappbrowser-reborn';\n\nconst App = () => {\n  const openBrowser = async () => {\n    const url = 'https://www.google.com';\n    try {\n      if (await InAppBrowser.is\\\\Available()) {\n        const result = await InAppBrowser.open(url, {\n          // iOS Properties\n          dismissButtonStyle: 'cancel',\n          preferredBarTintColor: '#4537FE',\n          preferredControlTintColor: 'white',\n          readerMode: false,\n          animated: true,\n          modalPresentationStyle: 'fullScreen',\n          modalTransitionStyle: 'coverVertical',\n          modalEnabled: true,\n          enableBarCollapsing: false,\n          // Android Properties\n          showTitle: true,\n          toolbarColor: '#4537FE',\n          secondaryToolbarColor: 'black',\n          navigationBarColor: 'black',\n          navigationBarDividerColor: 'white',\n          enableUrlBarHiding: true,\n          enableDefaultShare: true,\n          forceCloseOnRedirection: false,\n          hasBackButton: true,\n          // Specify browser package for Android\n          // browserPackage: 'com.android.chrome',\n          // Show in-app browser initially\n          showInRecents: true,\n        });\n        console.log('Browser result:', result);\n      } else {\n        console.log('InAppBrowser not available. Opening with Linking.');\n      }\n    } catch (error) {\n      console.error('Error opening browser:', error.message);\n    }\n  };\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <Button title=\"Open Google.com\" onPress={openBrowser} />\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates how to open a URL using InAppBrowser.open, including platform-specific customization options and basic error handling, after checking for availability."},"warnings":[{"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.","message":"Projects 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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade to `react-native-inappbrowser-reborn@3.6.0` or higher to resolve compatibility issues with iOS 14.5's security changes.","message":"Older 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.","severity":"breaking","affected_versions":"<3.6.0"},{"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`.","message":"When 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`.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always use `await` when calling methods like `InAppBrowser.open()` or `InAppBrowser.isAvailable()` to ensure proper execution flow and error handling.","message":"InAppBrowser 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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'3.7.1':62 'activ':66,125 'aim':72 'android':40,153 'app':3,54,159 'applic':33,130 'authent':141 'brows':55 'browser':4,27,115,155,160 'bug':82 'built':119 'built-in':118 'cadenc':77 'case':139 'chrome':36 'compat':100 'complex':104 'critic':137 'cross':98 'cross-platform':97 'crucial':106 'current':58 'custom':37,111 'demonstr':65 'develop':67 'differenti':94 'error':121 'experi':56 'extens':110 'extern':143 'featur':80 'fix':83 'flow':109 'function':28 'handl':103,122,145 'highlight':131 'in-app':1,52 'in-app-brows':157 'inappbrows':11,156 'includ':95 'incorpor':78 'interfac':20 'io':44,154 'javascript':15,146,152 'key':93 'leverag':35 'librari':16 'like':140 'link':144 'mainten':69 'matur':135 'minor':89 'nativ':7,10,25,32,149,151 'new':79 'oauth':108 'offer':46 'option':112 'packag':71 'patch':91 'perform':51 'platform':99 'product':129 'provid':17 'react':6,9,31,148,150 'react-nat':147 'react-native-inappbrowser-reborn':8 'reborn':12 'recent':64,88 'redirect':105 'regular':75 'releas':63,76 'reliabl':133 'rich':48 'robust':19 'safariservices/authenticationservices':42 'secur':49 'seen':85 'sever':128 'stabl':59 'support':101 'system':23 'tab':38 'typescript':161 'ui':116 'updat':92 'use':126,138 'version':60 'web':26 'within':29","created_at":"2026-04-20T01:56:48.841432+00:00","updated_at":"2026-04-20T01:56:48.841432+00:00","problems":[{"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.","cause":"This error typically occurs on Android when using an older version of the library or an incorrect Android Support/AndroidX configuration.","error":"Error: cannot find symbol builder.setNavigationBarColor"},{"fix":"Upgrade to `react-native-inappbrowser-reborn@3.6.3` or higher, which includes a fix for this specific exception.","cause":"An issue on Android where a key was not found in the React Native bridge, often due to a bug in parsing options.","error":"com.facebook.react.bridge.NoSuchKeyException"},{"fix":"Update your `react-native-inappbrowser-reborn` package to version `3.6.0` or newer.","cause":"Changes in iOS 14.5 security policies caused older versions of the library to fail when opening URLs.","error":"Build failed due to 'Invalid scheme' on iOS 14.5+"},{"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.","cause":"This usually indicates that the native modules for the library were not properly linked or initialized, or the `isAvailable()` check returned false.","error":"Error: InAppBrowser is not available. Please make sure you have linked the library correctly."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/proyecto26/react-native-inappbrowser","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-native-inappbrowser-reborn","openapi_spec":null,"status_page":null,"smithery":null,"categories":["http-networking","auth-security"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}