fix(Reanimated): trim padded string values in the props builder - #10422
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review. 📝 WalkthroughWalkthroughThe props builder now trims string values before processing. Style tests cover individual and mixed properties. SVG number-array processing no longer trims locally, and percentage processing trims before parsing. New tests cover padded SVG values, percentage conversion, and clamping. The changelog records the fix. Priority: ⬇️ Low Change: Bug fix Merge Risk: ⚪ Minimal · up to The reviewed change has no identified merge-blocking risk. 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 9cfdbc96-3649-4b28-8e7d-ecb32e4a8483
📒 Files selected for processing (8)
packages/react-native-reanimated/CHANGELOG.mdpackages/react-native-reanimated/src/common/style/__tests__/createPropsBuilder.test.tspackages/react-native-reanimated/src/common/style/__tests__/stylePropsBuilder.test.tspackages/react-native-reanimated/src/common/style/createPropsBuilder.tspackages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.tspackages/react-native-reanimated/src/common/style/processors/__tests__/transformOrigin.test.tspackages/react-native-reanimated/src/common/style/processors/transform.tspackages/react-native-reanimated/src/common/style/processors/transformOrigin.ts
💤 Files with no reviewable changes (3)
- packages/react-native-reanimated/src/common/style/processors/transform.ts
- packages/react-native-reanimated/src/common/style/processors/tests/transformOrigin.test.ts
- packages/react-native-reanimated/src/common/style/processors/tests/transform.test.ts
Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.
dfca141 to
288e5a7
Compare
CSS strips the whitespace around a declaration value, so a padded string has to parse like a bare one. Only transform and transformOrigin did that, each with its own trim, while a padded color or font weight threw and a padded gap was forwarded to the shadow node with the padding intact. Trimming once in the build loop covers every processor-backed property, so the two local trims are gone and processors can assume a clean string. Properties configured as pass-through are left alone: their values reach React Native untouched, exactly as they do outside an animated style.
processPercentage trimmed the value to test for the '%' suffix but sliced the untrimmed string, so trailing whitespace left the '%' inside the number and the result fell back to 1. Leading whitespace survived only because Number() skips it. Gradient stops reach the processor through processSVGGradientStops, which reads offset and opacity from inside an array the props builder never descends into, so the padding is still there. processNumberArray runs behind a props builder only, and that now trims for it, so its own trim is gone.
9320a45 to
499caec
Compare
## Summary Trim string values in one shared `processStyleValue` boundary before invoking style processors. This covers regular styles, animated `transform`/`transformOrigin`, and nested SVG gradient stops while leaving pass-through properties unchanged and removing duplicate outer trims from individual processors. ## Test plan - Added props-builder and real style-config coverage for padded strings. - Added SVG gradient stop coverage for padded offsets and opacity. - Reanimated, Worklets, monorepo, build, and changelog checks pass.
2 participants
Summary
Trim string values in one shared
processStyleValueboundary before invoking style processors. This covers regular styles, animatedtransform/transformOrigin, and nested SVG gradient stops while leaving pass-through properties unchanged and removing duplicate outer trims from individual processors.Test plan