[iOS][backgroundImage] - Use CAGradientLayer for linear gradient #52096
Conversation
facebook-github-bot
added
CLA Signed
| @@ -16,6 +16,9 @@ NS_ASSUME_NONNULL_BEGIN | |||
| + (std::vector<facebook::react::ProcessedColorStop>)getFixedColorStops: | |||
| (const std::vector<facebook::react::ColorStop> &)colorStops | |||
| gradientLineLength:(CGFloat)gradientLineLength; | |||
| + (std::pair<CGPoint, CGPoint>)fixGradientPoints:(CGPoint)startPoint | |||
There was a problem hiding this comment.
What does fix mean here? Can you make the method name more meaningful or add a docblock?
| if (std::isinf(slope)) { | ||
| return 0.0; | ||
| } | ||
| if (facebook::react::floatEquality(slope, 0.0f)) { |
There was a problem hiding this comment.
| if (facebook::react::floatEquality(slope, 0.0f)) { | |
| if (floatEquality(slope, 0.0f)) { |
| CGFloat gradientLineLength = sqrt(dx * dx + dy * dy); | ||
| const auto colorStops = [RCTGradientUtils getFixedColorStops:gradient.colorStops | ||
| gradientLineLength:gradientLineLength]; | ||
| NSMutableArray *colors = [NSMutableArray array]; |
| CGColorRef cgColor = RCTCreateCGColorRefFromSharedColor(colorStop.color); | ||
| [colors addObject:(__bridge id)cgColor]; |
There was a problem hiding this comment.
Use RCTUIColorFromSharedColor instead, so we don't need to call CGColorRelease
| // CAGradientLayer linear gradient squishes the non-square gradient to square gradient. | ||
| // This function fixes the "squished" effect. | ||
| // See https://stackoverflow.com/a/43176174 for more information. | ||
| + (std::pair<CGPoint, CGPoint>)fixGradientPoints:(CGPoint)startPoint |
There was a problem hiding this comment.
Can we add a unit test for this method?
There was a problem hiding this comment.
Sure, I should add one in the rn-tester/RNTesterUnitTests directory, correct?
| CGFloat gradientLineLength = sqrt(dx * dx + dy * dy); | ||
| const auto colorStops = [RCTGradientUtils getFixedColorStops:gradient.colorStops | ||
| gradientLineLength:gradientLineLength]; | ||
| NSMutableArray<id> *colors = [NSMutableArray array]; |
There was a problem hiding this comment.
Can this be NSMutableArray<UIColor *>?
There was a problem hiding this comment.
no, actually the gradientLayer.colors require it to be CGColors 😕
|
@javache has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
@javache has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
Summary:
This PR replaces Core Graphics implementation with Core Animation for linear gradients. I came across a great solution that makes the
CAGradientLayer's start and end point behaviour CSS spec compliant. This will make gradients much more performant.Changelog:
[IOS] [CHANGED] - Optimised Linear Gradients.
Test Plan:
Non breaking change. Test Linear gradient example from RNTester. Compare results with web, android and iOS. Each platform should render the gradients identically.
Note:
I will be doing a PR to use
CAGradientLayerfor radial gradients as well. The next properties that I have locally working arebackground-size,background-positionandbackground-repeat. These will be addressed in small PRs.