react-native-inappbrowser

InAppBrowser for React Native

Provides access to the system's web browser and supports handling redirects

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

Who is using InAppBrowser?

Do you want to see this package in action? Check these awesome projects, yay! 🎉

• MyApp - A template to create awesome Apps easily ⚡️
• OLIO - Share more. Waste less.
• Alpe Audio - Courses On The Go.
• VibePay - A simple, smarter, better way to get paid.
• Opinio - Allows the population to be surveyed on social issues.
• medpex: Online Apotheke - Online pharmacy for medicines & cosmetics with over 5 million customers.
• CONTACT Software - Energizing your digital business.

Share your awesome project here! ❤️

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 = "30.0.2"
      minSdkVersion = 21
      compileSdkVersion = 30
      targetSdkVersion = 30
      ndkVersion = "21.4.7075529"
      // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
      androidXAnnotation = "1.2.0"
      androidXBrowser = "1.3.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'

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

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

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

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

4. 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, Alert } from 'react-native'
import { InAppBrowser } from 'react-native-inappbrowser-reborn'

...
  async sleep(timeout) {
    return new Promise(resolve => setTimeout(resolve, timeout))
  }
  async openLink() {
    try {
      const url = 'https://github.com/proyecto26'
      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: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          navigationBarColor: 'black',
          navigationBarDividerColor: 'white',
          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'
          }
        })
        await this.sleep(800);
        Alert.alert(JSON.stringify(result))
      }
      else Linking.openURL(url)
    } catch (error) {
      Alert.alert(error.message)
    }
  }
...

Android Optimizations

On Android, you can warmup the in app browser client to make it launch siginificantly faster. To do so, add the following to your MainActivity

import com.proyecto26.inappbrowser.RNInAppBrowserModule;

public class MainActivity extends ReactActivity {

  @Override
  protected void onStart() {
    super.onStart();
    RNInAppBrowserModule.onStart(this);
  }

}

You can further optimize performance and pre-render pages by providing the urls that the user is likely to open.

// Do not call this every time the component render
useEffect(() => {
  InAppBrowser.mayLaunchUrl("Url user has high chance to open", ["Other urls that user might open ordered by priority"]);
}, []);

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

<activity
  ...
  android:launchMode="singleTask">
  <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>
</activity>

• 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 { createStackNavigator } from 'react-navigation'
import { getDeepLink } from './utilities'

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', animated: 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

Contributing ✨

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️. You can learn more about how you can contribute to this project in the contribution guide.

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.

Donate Ethereum, ADA, BNB, SHIBA, USDT/USDC, DOGE, etc:

Wallet address: jdnichollsc.eth

Please let us know your contributions! 🙏

Enterprise 💼

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.

Security contact information 🚨

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

License ⚖️

This repository is available under the MIT License.

Happy coding 💯

Made with ❤️