vt-nativescript-advanced-webview
v5.0.1
Published
An advanced webview using Chrome CustomTabs on Android and SFSafariViewController on iOS.
Downloads
5
Maintainers
Readme
Here is a video showing off Chrome CustomTabs in NativeScript.
Android
iOS
Why use this? Because Perf Matters
Demo
| Android | iOS | | ----------------------------------------- | ----------------------------------------------- | | | |
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
ornpm run demo.ios