The nativescript-advanced-webview's intro from bradmartin

bradmartin / nativescript-advanced-webview Goto Github PK

View Code? Open in Web Editor NEW

NativeScript plugin for Chrome CustomTabs on Android and SafariViewController on iOS.

License: Other

TypeScript 69.20% JavaScript 11.47% Shell 5.51% CSS 4.24% HTML 9.58%

nativescript-advanced-webview's Introduction

NativeScript Advanced Webview

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

Installation

To install execute:

NativeScript 7+:

ns plugin add nativescript-advanced-webview

NativeScript < 7:

tns plugin add [email protected]

Here is a video showing off Chrome CustomTabs in NativeScript.

Demo

Android	iOS

Example

TypeScript

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

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

import {
  AdvancedWebviewEvents,
  AdvancedWebViewOptions,
  init,
  NSAdvancedWebViewEventEmitter,
  openAdvancedUrl
} from 'nativescript-advanced-webview';
import { getRootView } from '@nativescript/core/application';

function whateverYouLike() {
  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadStarted, () => {
    console.log('LOAD STARTED');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadFinished, () => {
    console.log('LOAD FINISHED');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadError, () => {
    console.log('LOAD ERROR');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.Closed, () => {
    console.log('CLOSED');
  });

  const opts: AdvancedWebViewOptions = {
    url: 'https://nativescript.org',
    showTitle: true,
    toolbarColor: '#336699',
    toolbarControlsColor: '#fff',
    ios: {
        viewController: getRootView().viewController
    }
  };

  openAdvancedUrl(opts);
}