-
-
Save shiv19/1d027194e8d1107c5be20b6382b9b450 to your computer and use it in GitHub Desktop.
import { Frame } from '@nativescript/core/ui/frame'; | |
import { Color } from '@nativescript/core/color'; | |
import { isIOS } from '@nativescript/core/platform'; | |
/* | |
// Legacy require statements if using Vanilla {N} | |
const Frame = require('@nativescript/core/ui/frame').Frame; | |
const Color = require('@nativescript/core/color').Color; | |
const isIOS = require('@nativescript/core/platform').isIOS; | |
*/ | |
// declare these if you are using TS and not using tns-platform-declarations | |
declare var CAGradientLayer, CGPointMake, UIGraphicsBeginImageContext, UIGraphicsGetCurrentContext; | |
declare var UIGraphicsGetImageFromCurrentImageContext, UIBarMetrics, CGSizeMake, UIGraphicsEndImageContext; | |
export function onActionBarLoaded(args) { | |
if (isIOS) { | |
const navigationBar = Frame.topmost().ios.controller.navigationBar; | |
const gradient = CAGradientLayer.layer(); | |
const bounds = navigationBar.bounds; | |
gradient.frame = bounds; | |
gradient.colors = [new Color('#007fbe').ios.CGColor, new Color('#00bdda').ios.CGColor]; | |
gradient.startPoint = CGPointMake(0, 0); | |
gradient.endPoint = CGPointMake(1, 0); | |
const size = CGSizeMake(bounds.size.width, bounds.size.height); | |
UIGraphicsBeginImageContext(size); | |
gradient.renderInContext(UIGraphicsGetCurrentContext()); | |
const gradientImage = UIGraphicsGetImageFromCurrentImageContext(); | |
UIGraphicsEndImageContext(); | |
// doesn't work without this setTimeout | |
setTimeout(() => { | |
navigationBar.setBackgroundImageForBarMetrics(gradientImage, UIBarMetrics.default); | |
}); | |
} | |
} |
Hey man, I'm having the same issue, are you using angular? I put this code in the ngOnInit function, then I tried ngAfterViewInit. I'm sure it's running once when loaded, but needs to be in some other kind of event instead. Did you end up finding a solution?
In angular you can set it up on the page navigation event.
constructor( private page: Page ) { this.page.on( Page.navigatedToEvent, () => { /*Call to shivs code*/ this.iosGradientNavbar(); }); }
Hey man, I'm having the same issue, are you using angular? I put this code in the ngOnInit function, then I tried ngAfterViewInit. I'm sure it's running once when loaded, but needs to be in some other kind of event instead. Did you end up finding a solution?
In angular you can set it up on the page navigation event.
constructor( private page: Page ) { this.page.on( Page.navigatedToEvent, () => { /*Call to shivs code*/ this.iosGradientNavbar(); }); }
Hi, can you show me how can do it with vue?
Hey man, I'm having the same issue, are you using angular? I put this code in the ngOnInit function, then I tried ngAfterViewInit. I'm sure it's running once when loaded, but needs to be in some other kind of event instead. Did you end up finding a solution?