nativescript-advanced-webview

NativeScript Advanced Webview

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

Installation

To install execute:

#### NativeScript 7+:

``bash
ns plugin add nativescript-advanced-webview
`

#### NativeScript < 7:

`bash
tns plugin add nativescript-advanced-webview@5.0.0
`

Here is a video showing off Chrome CustomTabs in NativeScript.

#### Android

CustomTabs

#### iOS

SFSafariViewController

$3

Android Comparison

$3

| Android | iOS |
| ----------------------------------------- | ----------------------------------------------- |
| !Android Sample | !iOS Sample |

Example

#### TypeScript

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

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

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

$3

- 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`