Prevent Angular NativeScript WebView from zooming with pinch zoom - ios

Question

So I have a Nativescript App using Angular (NG 5.1.1 / Angular 7.x)
I have a view with a webview.
#ViewChild("myWebView") webViewRef: ElementRef;
<WebView class="webview" #myWebView [src]="myURL"></WebView>
Inside my webview.component.ts I have this.
ngAfterViewInit(): void {
const webview: WebView = this.webViewRef.nativeElement;
webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
this.setIndicatorFalse();
if (webview.ios) {
webview.ios.scrollView.delegate = UIScrollViewDelegateZ.new();
webview.ios.scrollView.minimumZoomScale = 1;
webview.ios.scrollView.maximumZoomScale = 1;
}
});
webview.on(WebView.loadStartedEvent, (args: LoadEventData) => {
if (webview.android) {
webview.android.getSettings().setBuiltInZoomControls(false);
webview.android.getSettings().setDisplayZoomControls(false);
} else {
// #ts-ignore
webview.ios.multipleTouchEnabled = false;
webview.ios.scalesPageToFit = false;
webview.ios.scrollView.bounces = false;
webview.ios.scrollView.showsHorizontalScrollIndicator = true;
webview.ios.scrollView.showsVerticalScrollIndicator = true;
webview.ios.opaque = false;
webview.ios.scrollView.allowsInlineMediaPlayback = true;
webview.ios.scrollView.mediaPlaybackRequiresUserAction = false;
}
});
}
As you can see i've tried all sorts of stuff to get this webview to not pinch zoom.
I am overriding my ViewDelegate with
webview.ios.scrollView.delegate = UIScrollViewDelegateZ.new();
and that file is here
export class UIScrollViewDelegateZ extends NSObject implements UIScrollViewDelegate {
public static ObjCProtocols = [UIScrollViewDelegate];
static new(): UIScrollViewDelegateZ {
console.log("here we are");
return <UIScrollViewDelegateZ>super.new();
}
viewForZoomingInScrollView(scrollView: UIScrollView): UIView {
console.log("viewForZoomingInScrollView");
return null;
}
scrollViewDidScroll(scrollView: UIScrollView): void {
console.log("scrollViewDidZoom");
return null;
}
scrollViewWillBeginZoomingWithView(scrollView: UIScrollView, view: UIView): void {
console.log("scrollViewWillBeginZoomingWithView " + scrollView);
return null;
}
}
When I load my webview and pinch zoom my console log says this:
CONSOLE LOG file:///app/app/webview/scrollDelegate.js:9:20: here we are
CONSOLE LOG file:///app/app/webview/scrollDelegate.js:21:20: scrollViewWillBeginZoomingWithView <WKScrollView: 0x7fb140afe000; baseClass = UIScrollView; frame = (0 0; 375 603); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x600000ab2100>; layer = <CALayer: 0x600000537480>; contentOffset: {0, 0}; contentSize: {375, 1916}; adjustedContentInset: {0, 0, 0, 0}>
CONSOLE LOG file:///app/app/webview/scrollDelegate.js:17:20: scrollViewDidZoom
So I feel like I am close?? but I just can't get it to go? I thought I was suppose to return null / undefined when trying to pinch zoom? which is what a few other SO answers / the web say to do but nothing is working.
the HTML page also has the correct metatag headers...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
Any help would be appreciated! Thanks!!

Answer 1

You have to override the default meta data being set by tns-core-modules.
import { WebView } from 'tns-core-modules/ui/web-view';
declare var WKUserScript, WKUserScriptInjectionTime, WKUserContentController, WKWebViewConfiguration, WKWebView, CGRectZero;
(<any>WebView.prototype).createNativeView = function () {
const jScript = `var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'initial-scale=1.0 maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(meta);`;
const wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
const wkUController = WKUserContentController.new();
wkUController.addUserScript(wkUScript);
const configuration = WKWebViewConfiguration.new();
configuration.userContentController = wkUController;
configuration.preferences.setValueForKey(
true,
"allowFileAccessFromFileURLs"
);
return new WKWebView({
frame: CGRectZero,
configuration: configuration
});
};
Here is a Playground Sample, since you are using Angular you may add the above lines to your app.component.ts