iOS gradient

[airandfingers]

On iOS, diagonal gradients don't look right when the container has a larger height than width:

I don't know the terms, but the "contour" lines that show the same color should be perpendicular to the direction of the gradient, as they are on Android:

Strangely, while the Android implementation is supported by the MDN docs, OSX Google Chrome shows this Codepen the same way as the iOS implementaiton above.

This is a minor change for this roughly 4:3 height:width ratio, but for large stretched-out containers (like a long ScrollView - our use case), the difference becomes much more pronounced.

[EddyVerbruggen]

Can you share the code used to render these gradients?

[airandfingers]

The CodePen link includes the implementation: https://codepen.io/anon/pen/ZxVdYX

I didn't think to Google til now, but it looks like this is a known issue with CAGradientLayer: https://stackoverflow.com/questions/38821631/cagradientlayer-diagonal-gradient/43176174#43176174

[EddyVerbruggen]

I meant: can you share the actual NativeScript code used to render these gradients?

[airandfingers]

Sorry, my mistake.

<StackLayout height="100%" backgroundColor="#F2F2F2" orientation="vertical">
    <ScrollView height="100%">
        <Gradient height="100%" direction="to top right" colors="rgba(0,0,0,1), rgba(255,0,0,1), rgba(0,255,0,1), rgba(0,0,255,1),">
            <StackLayout height="100%"></StackLayout>
        </Gradient>
    </ScrollView>
</StackLayout>

Forgive the repeated height="100%"; I wanted to force the height without including content, and I'm still not quite sure which one of those does the trick.

[EddyVerbruggen]

Thanks! Interesting.. I never used this plugin to create diagonal gradients actually. Only horizontal and vertical.. but I see what you're saying.

Not really sure how we can improve upon this implementation:

https://github.com/EddyVerbruggen/nativescript-gradient/blob/34eb76fe04531e8dd62485e4dc1c166666085e73/src/gradient.ios.ts#L75-L78

[airandfingers]

Ahh, I see.

I don't understand enough Swift to follow the code in this repo or that StackOverflow link, but it seems like a large change, and an equally (or larger) change to switch to context.drawLinearGradient().

This isn't high enough priority to us to fix this ourselves, and I wouldn't ask you to rewrite your plugin for a feature you never use! So, maybe this will just remain a known iOS issue.

[EddyVerbruggen]

That's very considerate of you. I'll leave this open for now, because you obviously have a point.

[airandfingers]

Hey Eddy, a coworker of mine spent some time on this, and got it to work for our container's specific dimensions (roughly 375x1635) using these values:

          this._gradientLayer.startPoint = CGPointMake(0.48, 1);
          this._gradientLayer.endPoint = CGPointMake(0.52, 0);

He confirmed that getting this to work for arbitrary dimensions would take some work, but he also said that the StackOverflow answer includes all the information we would need to do so.

Still, as we only have on diagonal gradient and no plans to add any others, it's not worth our time.

Thanks for your quick responses!