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

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?