Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-inappbrowser-reborn with all npm packages installed. Try it out:

require("react-native/package.json"); // react-native is a peer dependency. var reactNativeInappbrowserReborn = require("react-native-inappbrowser-reborn")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-inappbrowser-reborn v2.0.4

InAppBrowser for React Native

MIT license Current npm package version Maintenance Downloads Total downloads Follow @jdnichollsc

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

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

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-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 PhasesLink 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')
    

Usage

MethodsAction
openOpens 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.
closeDismisses the system's presented web browser
openAuthOpens the url with Safari in a modal on iOS using SFAuthenticationSession, 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.
closeAuthDismisses the current authentication session
isAvailableDetect if the device supports this plugin

iOS Options

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

Android Options

PropertyDescription
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 ...' }]

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: 'gray',
          preferredControlTintColor: 'white',
          readerMode: 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
}
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. 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)
    }
  })

Credits 👍

Contributors ✨

Thanks goes to these wonderful people:

| [jdnichollsc
Juan Nicholls](https://github.com/jdnichollsc)
[✉](mailto:jdnichollsc@hotmail.com) | [EQuimper
Emanuel Quimper](https://github.com/EQuimper)
[✉](mailto:quimperemanuel@gmail.com) | [bonesyblue
Jonathan Bones](https://github.com/bonesyblue)
[✉](mailto:bonesyblue@gmail.com) | [mlazari
Mihai Lazari](https://github.com/mlazari) | [maestor
Kalle Haavisto](https://github.com/maestor)
[✉](mailto:maestori@gmail.com) | [plamworapot
Worapot Pengsuk](https://github.com/plamworapot) | [adammcarth
Adam McArthur](https://github.com/adammcarth)
[✉](mailto:adam@adammcarthur.net) | | :---: | :---: |:---: | :---: | :---: | :---: | :---: | | [SnaiNeR
Artem Emelyanov](https://github.com/SnaiNeR)
[✉](mailto:snainer@gmail.com) | [rbscott
Robert Scott](https://github.com/rbscott) | [Kikketer
Chris Weed](https://github.com/kikketer) | [almouro
Alexandre Moureaux](https://github.com/almouro) | [petekp
Pete Petrash](https://github.com/petekp) | [miktolon
Mika Tolonen](https://github.com/miktolon)

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Happy coding 💯

Made with ❤️

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free