Repository navigation
Conversation
Functional color regexes lacked ^/$, so junk around a valid rgb()/hsl()/hwb() substring was accepted while hex forms already required a full match.
This was referenced Sep 12, 2026
meta-codesync Bot
pushed a commit
that referenced
this pull request
Oct 20, 2026
…59103) Summary: `react-native/normalize-colors` anchors its hex matchers but not `rgb`, `rgba`, `hsl`, `hsla` and `hwb`, so a string that only contains one of those calls normalizes to that color: `normalizeColor('xxrgb(1, 2, 3)yy')` is `0x010203ff` (#58495). Animated pays for it. `AnimatedInterpolation` treats an output range that normalizes as a color as a color, so a JS-driven interpolation of a box shadow such as `inset 0 0 0 1px rgba(124, 58, 237, 1)` returns the bare `rgba(…)`, which `processBoxShadow` parses to no shadow at all. This anchors the five functional matchers, as the hex ones already are. It is the change #58496 proposed before its author closed it. ## Changelog: [GENERAL] [FIXED] - An Animated interpolation of a string that contains an `rgb()`, `hsl()` or `hwb()` color, such as a box shadow, interpolates the whole string instead of collapsing to the color Pull Request resolved: #59103 Test Plan: `normalizeColor-test.js` gains a case for strings that only contain a functional color, which returned `16909311` for `'xxrgb(1, 2, 3)yy'` before the change. `Interpolation-itest.js` gains a box-shadow range, which returned `'rgba(124, 58, 237, 1)'` before the change and now answers `'inset 0 0 0 2px rgba(124, 58, 237, 0.75)'` halfway. - `yarn jest packages/normalize-color packages/react-native/Libraries/Animated packages/react-native/Libraries/StyleSheet`: 80 passed - `yarn flow check`: no errors - `eslint` and `prettier --check` on the three files: clean - RNTester release builds on a Galaxy S23 (Android 14), [before and after](#59103 (comment)): 24 views animating an inset ring through a JS-driven interpolation draw no ring without the change and the ring at its interpolated alpha with it Under Fantom, this PR's CI run passes `Interpolation-itest.js` and `normalizeColor-itest.js`. Reviewed By: christophpurrer Differential Revision: D126415662 Pulled By: javache fbshipit-source-id: 6ea989cd8709b847ae8cf4d04d9d46d0dff9d3d4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@react-native/normalize-colorsanchors hex color forms with^/$, butrgb/rgba/hsl/hsla/hwbmatchers did not. BecauseRegExp.prototype.execfinds a substring match, strings likexxrgb(1, 2, 3)yyorrgba(1,2,3,0.5)extrawere accepted and normalized.That is inconsistent with hex handling (
#fff/#fffalready returnnull) and with treating the whole input as a single color token.Fixes #58495
Changelog
[GENERAL] [FIXED] - Reject functional color strings that only partially match rgb/hsl/hwb
Test Plan
yarn test packages/normalize-color/__tests__/normalizeColor-test.jsAll 14 tests pass. Added cases for leading/trailing junk around
rgb/rgba/hsl/hwb.Minimal repro (before fix):
Made with Cursor