- Version: 3.1.8
- GitHub: https://github.com/proyecto26/nativescript-inappbrowser
- NPM: https://www.npmjs.com/package/%40akylas%2Fnativescript-inappbrowser
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
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
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