InAppBrowser for React Native

Chrome Custom Tabs for Android & SafariServices/AuthenticationServices for iOS.

Getting started

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

Mostly automatic installation

Using React Native >= 0.60

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
  }

Using React Native < 0.60

$ react-native link react-native-inappbrowser-reborn

Manual installation

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-inappbrowser-reborn and add RNInAppBrowser.xcodeproj
In XCode, in the project navigator, select your project. Add libRNInAppBrowser.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<

iOS with Podfile

Open up ios/Podfile

Add pod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn'

Run pod install

Android

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 the getPackages() 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 { *; }

Usage

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.

iOS Options

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`]

Android Options

Property	Description
`showTitle` (Boolean)	Sets whether the title should be shown in 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`]

Demo

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: 'overFullScreen',
          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)
    }
  }
...

Authentication Flow using Deep Linking

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
}

App.js (Using react-navigation with Deep Linking)

import { Root } from 'native-base'
import { getDeepLink } from './utilities'
import { createStackNavigator } from 'react-navigation'

const Main = createStackNavigator(
  {
    LoginComponent: { screen: LoginComponent },
    HomeComponent: { screen: HomeComponent },
    SplashComponent: { //Redirect users to the Home page if they are authenticated, otherwise to Login page...
      screen: SplashComponent,
      path: 'callback/' //Deep linking 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
          dismissButtonStyle: 'cancel',
          // Android Properties
          showTitle: false,
          enableUrlBarHiding: true,
          enableDefaultShare: true
        }).then((response) => {
          if (response.type === 'success' &&
            response.url) {
            Linking.openURL(response.url)
          }
        })
      } else Linking.openURL(url)
    } catch (error) {
      Linking.openURL(url)
    }
  }
...

SplashComponent

...
  componentWillMount() {
    const { navigation } = this.props
    const { state: { params } } = navigation
    const { access_token } = params || {}

    if (access_token) {
      // Opened by deep linking, the user is authenticated
      // Redirect to the Home page
    }
    else {
      // Detect if the stored token is still valid
      // And redirect the user to Home or Login page
    }
  }
...

StatusBar

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)
    }
  })