5.0.1 • Published 4 years ago

vt-nativescript-advanced-webview v5.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

Here is a video showing off Chrome CustomTabs in NativeScript.

Android

CustomTabs

iOS

SFSafariViewController

Why use this? Because Perf Matters

Android Comparison

Demo

AndroidiOS
Android SampleiOS Sample

Installation

To install execute

tns plugin add nativescript-advanced-webview

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);
        }
    };

    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);
        }
    };

   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