Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.
$ npm install react-native-inappbrowser-reborn --save
Linking the package manually is not required anymore with Autolinking.
-
iOS Platform:
$ cd ios && pod install && cd ..# CocoaPods on iOS needs this extra step -
Android Platform with Android Support:
Using Jetifier tool for backward-compatibility.
Modify your android/build.gradle configuration:
buildscript { ext { buildToolsVersion = "28.0.3" minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 # Only using Android Support libraries supportLibVersion = "28.0.0" } -
Android Platform with AndroidX:
Modify your android/build.gradle configuration:
buildscript { ext { buildToolsVersion = "28.0.3" minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 # Remove 'supportLibVersion' property and put specific versions for AndroidX libraries androidXAnnotation = "1.1.0" androidXBrowser = "1.0.0" // Put here other AndroidX dependencies }
$ react-native link react-native-inappbrowser-reborn
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-inappbrowser-rebornand addRNInAppBrowser.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNInAppBrowser.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)<
- Open up
ios/Podfile
- Add
pod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn'
- Run
pod install
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.proyecto26.inappbrowser.RNInAppBrowserPackage;to the imports at the top of the file - Add
new RNInAppBrowserPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/settings.gradle:include ':react-native-inappbrowser-reborn' project(':react-native-inappbrowser-reborn').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-inappbrowser-reborn/android') - Insert the following lines inside the dependencies block in
android/app/build.gradle:implementation project(':react-native-inappbrowser-reborn') - Update ProGuard config (Optional)
- Append the following lines to your ProGuard config (
proguard-rules.pro)-keepattributes *Annotation* -keepclassmembers class ** { @org.greenrobot.eventbus.Subscribe <methods>; } -keep enum org.greenrobot.eventbus.ThreadMode { *; }
| Methods | Action |
|---|---|
open |
Opens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari. |
close |
Dismisses the system's presented web browser. |
openAuth |
Opens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url (OAuth flow with deep linking redirection). |
closeAuth |
Dismisses the current authentication session. |
isAvailable |
Detect if the device supports this plugin. |
| Property | Description |
|---|---|
dismissButtonStyle (String) |
The style of the dismiss button. [done/close/cancel] |
preferredBarTintColor (String) |
The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF] |
preferredControlTintColor (String) |
The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080] |
readerMode (Boolean) |
A value that specifies whether Safari should enter Reader mode, if it is available. [true/false] |
animated (Boolean) |
Animate the presentation. [true/false] |
modalPresentationStyle (String) |
The presentation style for modally presented view controllers. [automatic/none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover] |
modalTransitionStyle (String) |
The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl] |
modalEnabled (Boolean) |
Present the SafariViewController modally or as push instead. [true/false] |
enableBarCollapsing (Boolean) |
Determines whether the browser's tool bars will collapse or not. [true/false] |
ephemeralWebSession (Boolean) |
Prevent re-use cookies of previous session (openAuth only) [true/false] |
| Property | Description |
|---|---|
showTitle (Boolean) |
Sets whether the title should be shown in the custom tab. [true/false] |
hasBackButton (Boolean) |
Sets a back arrow instead of the default X icon to close the custom tab. [true/false] |
toolbarColor (String) |
Sets the toolbar color. [gray/#808080] |
secondaryToolbarColor (String) |
Sets the color of the secondary toolbar. [white/#FFFFFF] |
enableUrlBarHiding (Boolean) |
Enables the url bar to hide as the user scrolls down on the page. [true/false] |
enableDefaultShare (Boolean) |
Adds a default share item to the menu. [true/false] |
animations (Object) |
Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }] |
headers (Object) |
The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }] |
forceCloseOnRedirection (Boolean) |
Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false] |
import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn'
...
async openLink() {
try {
const url = 'https://www.google.com'
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: 'cancel',
preferredBarTintColor: '#453AA4',
preferredControlTintColor: 'white',
readerMode: false,
animated: true,
modalPresentationStyle: 'fullScreen',
modalTransitionStyle: 'partialCurl',
modalEnabled: true,
enableBarCollapsing: false,
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: false,
// Specify full animation resource identifier(package:anim/name)
// or only resource name(in case of animation bundled with app).
animations: {
startEnter: 'slide_in_right',
startExit: 'slide_out_left',
endEnter: 'slide_in_left',
endExit: 'slide_out_right'
},
headers: {
'my-custom-header': 'my custom header value'
}
})
Alert.alert(JSON.stringify(result))
}
else Linking.openURL(url)
} catch (error) {
Alert.alert(error.message)
}
}
...In order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this,
define your app scheme and replace my-scheme and my-host with your info.
- Enable deep linking (Android) - AndroidManifest.xml
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="my-scheme" android:host="my-host" android:pathPrefix="" />
</intent-filter>
- Enable deep linking (iOS) - Info.plist
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>my-scheme</string>
<key>CFBundleURLSchemes</key>
<array>
<string>my-scheme</string>
</array>
</dict>
</array>
- utilities.js
import { Platform } from 'react-native'
export const getDeepLink = (path = "") => {
const scheme = 'my-scheme'
const prefix = Platform.OS == 'android' ? `${scheme}://my-host/` : `${scheme}://`
return prefix + path
}import { Root } from 'native-base'
import { getDeepLink } from './utilities'
import { createStackNavigator } from 'react-navigation'
const Main = createStackNavigator(
{
SplashComponent: { screen: SplashComponent },
LoginComponent: { screen: LoginComponent },
HomeComponent: { screen: HomeComponent },
CallbackComponent: { //Redirect users to the Home page if they are authenticated, otherwise to Login page...
screen: CallbackComponent,
path: 'callback/' //Enable Deep linking redirection to get the auth_token
}
},
{
index: 0,
initialRouteName: 'SplashComponent',
headerMode: 'none'
}
)
...
render() {
return (
<Root>
<Main uriPrefix={getDeepLink()} />
</Root>
)
}
...- LoginComponent
import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn'
import { getDeepLink } from './utilities'
...
async onLogin() {
const deepLink = getDeepLink("callback")
const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
try {
if (await InAppBrowser.isAvailable()) {
InAppBrowser.openAuth(url, deepLink, {
// iOS Properties
ephemeralWebSession: false,
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: false
}).then((response) => {
if (
response.type === 'success' &&
response.url
) {
Linking.openURL(response.url)
}
})
} else Linking.openURL(url)
} catch (error) {
Linking.openURL(url)
}
}
...- SplashComponent
...
async componentDidMount() {
// Play Lottie Animation :)
// Validate the stored access token (Maybe with a request)
// Redirect the user to the Home page if the token is still valid
// Otherwise redirect to the Login page
}
...- CallbackComponent
...
async componentDidMount() {
// Play Lottie Animation :)
try {
await this.loadUserInfo()
// Redirect to the Home page
} catch (error) {
// Show error and redirect the user to the Login page
}
}
async loadUserInfo() {
const { navigation } = this.props
const { state: { params } } = navigation
const { code, error } = params || {}
if (code) {
// Get and Save the access token request, user info...
}
else {
return Promise.reject(new Error(error))
}
}
...The StatusBar will keep the last one provided in your app. So if the StatusBar is dark-content before you open the browser this will keep it.
Starting with React Native 0.59 onwards, there is a simpler way of handling this update, without the need of patching StatusBar.
async openInBrowser(url) {
try {
const oldStyle = StatusBar.pushStackEntry({ barStyle: 'dark-content', animate: false });
await InAppBrowser.open(url)
StatusBar.popStackEntry(oldStyle);
} catch (error) {
Alert.alert(error.message)
}
})For previous versions, you can still apply the method described below.
If you want to change before opening you can do something like
async openInBrowser(url) {
try {
StatusBar.setBarStyle('dark-content')
await InAppBrowser.open(url)
} catch (error) {
Alert.alert(error.message)
}
})If you need to restore the old bar style, after the browser is dismissed, you can try and patch the StatusBar.setBarStyle function to store the old value like so:
// patch StatusBar.setBarStyle to make style accessible
const _setBarStyle = StatusBar.setBarStyle
StatusBar.setBarStyle = (style) => {
StatusBar.currentStyle = style
_setBarStyle(style)
}You can than restore the old bar style after the browser has been dismissed like this:
async openInBrowser(url) {
try {
const oldStyle = StatusBar.currentStyle
StatusBar.setBarStyle('dark-content')
await InAppBrowser.open(url)
if(oldStyle) StatusBar.setBarStyle(oldStyle)
} catch (error) {
Alert.alert(error.message)
}
})Using in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in Section 8.12 of RFC 8252.
- Expo: WebBrowser
- React Native Custom Tabs: Chrome Custom Tabs for React Native
- React Native Safari View: A React Native wrapper for Safari View Controller
Please do contribute! Issues and pull requests are welcome.
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
I believe in Unicorns 🦄 Support me, if you do too.
Available as part of the Tidelift Subscription.
The maintainers of InAppBrowser for React Native and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.
Made with ❤️
