nativescript-advanced-webview
by bradmartin | v6.1.1
An advanced webview using Chrome CustomTabs on Android and SFSafariViewController on iOS.
npm i --save nativescript-advanced-webview

NativeScript Advanced Webview

An advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS.

npm npm stars

Installation

To install execute:

NativeScript 7+:

ns plugin add nativescript-advanced-webview

NativeScript < 7:

tns plugin add nativescript-advanced-webview@5.0.0

Here is a video showing off Chrome CustomTabs in NativeScript.

Android

CustomTabs

iOS

SFSafariViewController

Why use this? Because Perf Matters

Android Comparison

Demo

Android iOS
Android Sample iOS Sample

Example

TypeScript

Initiate the service before the app starts e.g app.ts, main.ts

import { init } from 'nativescript-advanced-webview';
init();
import { openAdvancedUrl, AdvancedWebViewOptions } from 'nativescript-advanced-webview';

public whateverYouLike() {

const opts: AdvancedWebViewOptions = {
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
toolbarColor: '#ff4081',
toolbarControlsColor: '#333', // iOS only
showTitle: false, // Android only
isClosed: (res) => {
console.log('closed it', res);
},
ios: {
viewController: // some viewcontroller to present from on iOS
}
};

openAdvancedUrl(opts);
}

Javascript

Initiate the service before the app starts e.g app.ts, main.ts

var AdvancedWebView = require('nativescript-advanced-webview');

AdvancedWebView.init();
exports.whateverYouLike = function(args){
var opts = {
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
toolbarColor: '#ff4081',
toolbarControlsColor: '#333', // iOS only
showTitle: false, // Android only
isClosed: function (res) {
console.log('closed it', res);
},
ios: {
viewController: // some viewcontroller to present from on iOS
}
};

AdvancedWebView.openAdvancedUrl(opts);

API

  • openAdvancedUrl(options: AdvancedWebViewOptions)
AdvancedWebViewOptions Properties
  • url: string
  • toolbarColor: string
  • toolbarControlsColor: string - ** iOS only **
  • showTitle: boolean - ** Android only **
  • isClosed: Function - callback when the browser closes
Demo App
  • fork the repo
  • cd into the src directory
  • execute npm run demo.android or npm run demo.ios