mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
nishan (o^▽^o)andFacebook GitHub Bot
cc89ddd50b
Summary: - Adds support for color transition hint syntax in linear gradients. e.g. `linear-gradient(red, 20%, green)` - Adds `px` support. Combination of `px` and `%` also works. - Simplified color stops parsing. - The `processColorTransitionHint` and `getFixedColorStops` is moved to native code so it can support combination of `px` and `%` units as it requires gradient line length, which is derived from view dimensions and gradient line angle. - Follows CSS [spec](https://drafts.csswg.org/css-images-4/#coloring-gradient-line) (Refer transition hint section) and implementation is referred from [blink engine source](https://github.com/chromium/chromium/blob/a296b1bad6dc1ed9d751b7528f7ca2134227b828/third_party/blink/renderer/core/css/css_gradient_value.cc#L240). ## Changelog: [GENERAL] [ADDED] - Linear gradient color transition hint syntax and `px` unit support. Pull Request resolved: https://github.com/facebook/react-native/pull/48410 Test Plan: Added testcase in processBackgroundImage-test.ts and example in LinearGradientExample.js <img width="500" alt="Screenshot 2025-01-05 at 11 38 13 PM" src="https://github.com/user-attachments/assets/62858bb7-1dbf-40cf-8dd4-ec0daf84ac1b" /> ## Todo Add testcases for `getFixedColorStops` and `processColorTransitionHint` in native code for both platforms. That's the only downside of moving it out of JS 🤦 Reviewed By: NickGerleman Differential Revision: D67870375 Pulled By: joevilches fbshipit-source-id: b91d741f3108c25df8000d220726bf180c64be60