Who is using InAppBrowser?

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

• Oxycar - Offers innovative ways to facilitate home-work journeys.
• Pegus Digital - Your innovation partner in digital product development.

Share your awesome project here! ❤️

Getting started

tns plugin add @akylas/nativescript-inappbrowser

Manual installation

• Android Platform with Android Support:

  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
      androidXBrowser = "1.0.0"
      // Put here other AndroidX dependencies
    }

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] ephemeralWebSession (Boolean) | Prevent re-use cookies of previous session (openAuth only) [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] navigationBarColor (String) | Sets the navigation bar color. [gray/#808080] navigationBarDividerColor (String) | Sets the navigation bar divider color. [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] backButtonDrawableId (String) | Sets a custom drawable instead of the X browserPackage (String) | Package name of a browser to be used to handle Custom Tabs. showInRecents (Boolean) | Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false]

Demo

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';

...
  openLink = async () => {
    try {
      const url = 'https://www.proyecto26.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: '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'
          },
          hasBackButton: true,
          browserPackage: '',
          showInRecents: false
        });
        Dialogs.alert({
          title: 'Response',
          message: JSON.stringify(result),
          okButtonText: 'Ok'
        });
      }
      else {
        Utils.openUrl(url);
      }
    }
    catch(error) {
      Dialogs.alert({
        title: 'Error',
        message: error.message,
        okButtonText: 'Ok'
      });
    }
  }
...

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

export const getDeepLink = (path = "") => {
  const scheme = 'my-scheme';
  const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
  return prefix + path;
}

• home-page.ts

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';
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
          ) {
            Utils.openUrl(response.url)
          }
        })
      } else Utils.openUrl(url)
    } catch {
      Utils.openUrl(url)
    }
  }
...

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.

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 👍

• React Native InAppBrowser: InAppBrowser for React Native

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

Collaborators

| Juan Nicholls✉ | Nathanael Anderson✉ | | :---: | :---: |

Individuals

Credits 👍

• React Native InAppBrowser: InAppBrowser for React Native