NativeScript: CSS linear-gradient doesn't work for ActionBar background

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?

Yes

Tell us about the problem

Setting ActionBar’s background to linear-gradient doesn’t work.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

Cross-platform modules: 4.2.x

Please tell us how to recreate the issue in as much detail as possible.

https://play.nativescript.org/?id=MJ30W7&v=3

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

.action-bar {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2));
}

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

About this issue

Original URL
State: open
Created 6 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

This issue does have a PR, which was closed due to unresolved issues almost an year ago, we may want to revisit it.

bundyo on Feb 19, 2020

Any updates on this issue?

kfw9257 on May 9, 2019

@bundyo Starting off from where you pointed, I’ve boiled it down to this https://gist.github.com/shiv19/1d027194e8d1107c5be20b6382b9b450

you can run this function off of the loaded event on the action bar. Setting the gradient image outside the setTimeout doesn’t work for some reason.

If anyone knows a way to get rid of that setTimeout, please let me know here or in the gist 😃

shiv19 on Jan 23, 2020

Will mark this to include in 8.3 - for those looking for a solution you can use this:

<ActionBar (loaded)="onLoaded($event)">

with handling:

let actionBar: ActionBar;
let gradientImage;

onLoaded(args) {
    actionBar = args.object;
    setupGradient();
  }

  setupGradient() {
    if (isIOS && actionBar && !gradientImage) {
      const navBar: UINavigationBar = actionBar.ios;
      const gradient = CAGradientLayer.layer();
      const bounds = navBar.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());
      gradientImage =
        UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();

      if (
        NSString.stringWithString(UIDevice.currentDevice.systemVersion)
          .intValue >= 15
      ) {
        const appearance =
          navBar.standardAppearance ?? UINavigationBarAppearance.new();
        appearance.backgroundImage = gradientImage;
        navBar.standardAppearance = appearance;
        navBar.compactAppearance = appearance;
        navBar.scrollEdgeAppearance = appearance;
      } else {
        // legacy styling
        setTimeout(() => {
          navBar.setBackgroundImageForBarMetrics(
            gradientImage,
            UIBarMetrics.default
          );
        });
      }
    }
  }

NathanWalker on Mar 30, 2022