Skip to content

Commit 33af0cf

Browse files
feat: background image native CSS parser (facebook#53609)
Summary: This PR adds native CSS parser for `backgroundImage` property. Currently, it supports linear-gradient and radial-gradient spec compliant CSS syntax. ## Changelog: [GENERAL] [ADDED] - background image native parser. <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: facebook#53609 Test Plan: - Replicated existing testcases from JS. Currently i've added CSS syntax testcases. Checkout `CSSBackgroundImageTest.cpp` ### Verify example screens in RNTester - Set `enableNativeCSSParsing` to true in `ReactNativeFeatureFlags.config.js` and run `yarn featureflags --update` - Rebuild the project and verify `LinearGradientExample` and `RadialGradientExample` screens on both platforms. ### Notes - Currently it is difficult to run CSS renderer tests. I made a custom cmake config to get it working, some steps would be helpful. - Right now the new CSS renderer seems to be only working on iOS. NickGerleman mentioned there is some WIP to get it working on android. So please test this PR on iOS. Differential Revision: D83341309 Pulled By: javache
1 parent d9ea1b2 commit 33af0cf

File tree

10 files changed

+2143
-203
lines changed

10 files changed

+2143
-203
lines changed

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
146146
/**
147147
* Linear Gradient
148148
*/
149-
experimental_backgroundImage: {process: processBackgroundImage},
150-
149+
experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
150+
? true
151+
: {process: processBackgroundImage},
151152
/**
152153
* View
153154
*/

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,9 @@ const validAttributesForNonEventProps = {
179179
backgroundColor: {process: require('../StyleSheet/processColor').default},
180180
transform: true,
181181
transformOrigin: true,
182-
experimental_backgroundImage: {
183-
process: require('../StyleSheet/processBackgroundImage').default,
184-
},
182+
experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
183+
? (true as const)
184+
: {process: require('../StyleSheet/processBackgroundImage').default},
185185
boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
186186
? (true as const)
187187
: {process: require('../StyleSheet/processBoxShadow').default},

packages/react-native/React/Fabric/Utils/RCTGradientUtils.mm

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,10 @@ @implementation RCTGradientUtils
267267
+ (std::vector<ProcessedColorStop>)getFixedColorStops:(const std::vector<ColorStop> &)colorStops
268268
gradientLineLength:(CGFloat)gradientLineLength
269269
{
270+
if (colorStops.empty()) {
271+
return {};
272+
}
273+
270274
std::vector<ProcessedColorStop> fixedColorStops(colorStops.size());
271275
bool hasNullPositions = false;
272276
auto maxPositionSoFar = resolveColorStopPosition(colorStops[0].position, gradientLineLength);

0 commit comments

Comments
 (0)