Nature's Powerful Meme

    nativescript-advanced-webview
    TypeScript icon, indicating that this package has built-in type declarations

    7.0.1 • Public • Published

    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 {
      AdvancedWebviewEvents,
      AdvancedWebViewOptions,
      init,
      NSAdvancedWebViewEventEmitter,
      openAdvancedUrl
    } from 'nativescript-advanced-webview';
    
    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'
      };
    
      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

    Install

    npm i nativescript-advanced-webview

    DownloadsWeekly Downloads

    568

    Version

    7.0.1

    License

    MIT

    Unpacked Size

    15 kB

    Total Files

    8

    Last publish

    Collaborators

    • bradmartin