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

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

iOS with Podfile

1. Open up ios/Podfile

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

1. Run pod install

Android

1. 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

1. 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')
   

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implementation project(':react-native-inappbrowser-reborn')
   

3. 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

iOS Options

Android Options

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

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
}

• 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(
  {
    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))
    }
  }
...

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

Authentication

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.

Credits 👍

• Expo: WebBrowser
• React Native Custom Tabs: Chrome Custom Tabs for React Native
• React Native Safari View: A React Native wrapper for Safari View Controller

Contributors ✨

Please do contribute! Issues and pull requests are welcome.

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too. Professionally supported react-native-inappbrowser-reborn is coming soon

Security contact information 🚨

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

Happy coding 💯

Made with ❤️