use this code with loaded event of a page to get gradient actionbar on iOS for NativeScript Apps

gradientActionbarIosNativeScript.js

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

Hi Shiv, thanks for the code. Works great except when using the back button from another page. The gradient does not get applied the second time around (or subsequently). If I reload the whole page it works again. Any idea how to fix this? Thanks, Will

Hi Shiv, thanks for the code. Works great except when using the back button from another page. The gradient does not get applied the second time around (or subsequently). If I reload the whole page it works again. Any idea how to fix this? Thanks, Will

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?

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?