InAppBrowser for NativeScript

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! 🎉
- 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

``javascript
tns plugin add @akylas/nativescript-inappbrowser
`

$3

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

$3

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]

$3


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]

$3

`ts
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'
});
}
}
...
`

$3

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







`

- Enable deep linking (iOS) - Info.plist
`
CFBundleURLTypes


CFBundleTypeRole
Editor
CFBundleURLName
my-scheme
CFBundleURLSchemes

my-scheme



`

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

- home-page.ts
`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)
}
}
...
`

$3

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.

$3

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.

$3

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


$3

|
_{Juan Nicholls}
✉ |
_{Nathanael Anderson}
✉ |
| :---: | :---: |

#### Individuals

Credits 👍

* React Native InAppBrowser: InAppBrowser for React Native