Skip to content

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

License

Notifications You must be signed in to change notification settings

bradmartin/nativescript-advanced-webview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 [email protected]

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

API

  • openAdvancedUrl(options: AdvancedWebViewOptions)
  • close() _ iOS Only _ :: Closed the safari view controller.

AdvancedWebViewOptions Properties

  • url: string
  • toolbarColor: string
  • toolbarControlsColor: string - ** iOS only **
  • showTitle: boolean - ** Android only **

Events

  • LoadStart
  • LoadFinished
  • LoadError
  • Closed
Demo App
  • fork the repo
  • cd into the src directory
  • execute npm run demo.android or npm run demo.ios