feat: linear gradient android #45433

intergalacticspacehighway · 2024-07-15T10:20:28Z

Summary:

Adds backgroundImage prop that supports CSS's linear gradient. Later this can be extended to support various other gradients and possibly CSS's background image (less motivation as better solutions exists for image)
Extended CSSBackgroundDrawable to draw Linear Gradient shader while preserving the border style support.
Style supports JS object to specify LinearGradient, so it can support Animated libraries.

Changelog:

[ANDROID] [ADDED] - linear gradient

Test Plan:

Check out processBackground-test.js for supported syntax testcases.
Checkout examples added in LinearGradientExample.js

Although the PR is tested well but open to any changes/feedback on the approach taken.

iOS PR - #45434. Separated the PRs to keep it easier to review. Both PRs can be reviewed individually.

wip wip wip parse position linear gradient start end points wip wip simplify angle to points wip gradients array wip wip wip wip wip wip wip merge main wip wip nit weird white space parser wip cleanup cleanup cleanup gradient example

analysis-bot · 2024-07-15T10:50:54Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	21,386,065	+18,584
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	24,581,462	+17,241
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: 2eb7bcb
Branch: main

NickGerleman · 2024-07-15T20:33:34Z

This is a fun surprise 😃. I chatted with a couple other engineers on RN to think about how this fits into some of the CSS stuff we have been planning.

I think broadly:

This change makes sense in RN core, instead of a separate custom component, to be able to support web patterns, and complex backgrounds without adding extra views to the hierarchy
We don't want to ship a background prop that only does anything today for linear gradients, instead of acting like web for colors, shorthands, etc.
Despite adding more recently, we want to be able to delete all the viewconfig processors eventually, replacing with Fabric CSS parser. This has meant, us intentionally limiting some newer capabilities like this to Fabric, so that once the Fabric CSS parser is ready, we don't have any more reliance on the viewconfig processors in Paper (see 2d67b72 as example)

A way to unblock some of this would be to follow a pattern we are using, of adding the functionality first under experimental_foo. We are testing some of these against existing web code using react-strict-dom, to get some production validation before rolling out (if @necolas wanted to shim gradients using this as a primitive). But, this would let us fill out more of the right shorthands, etc, using Fabric CSS parser later, to roll out a version of background that acted more like the web.

We are also in the middle of refactoring of background management in order to start rolling out box shadow. Part of the strategy we are taking there is to put less directly in CSSBackgroundDrawable, and to have different drawables for different patterns, that we may composite using a LayerDrawable under the hood. I think CompositeShader is technically more efficient than multiple shader drawables, but if we start to support different background layer types, we cannot generically combine them all in the right rendering order. I would consider factoring the gradient background as its own drawable, that we will composite in higher level area.

necolas · 2024-07-15T22:14:36Z

Just to add to what @NickGerleman said. Even in StyleX we don't allow background as a style, because it's specced as a shorthand for multiple other background properties. React Native doesn't support shortform styles with values that could potentially override the values of more specific longform styles. So CSS background (as defined by web) doesn't fit into RN's styling merging model. Instead, this would be better implemented as part of backgroundImage, which is the background property that supports gradients.

intergalacticspacehighway · 2024-07-15T23:50:59Z

Thanks @NickGerleman @necolas

I had been checking the commits on Fabric CSS Parser by @NickGerleman 🙌 and knew it will eventually gonna replace the JS processors. Also i was wondering if team was planning to leverage static hermes in future so JS processors kinda becomes auto native. Anyways, I still wanted to make the PR to get some feedback 😄

So based on your feedback I think next steps for me are.

Rename background to more like experimental_backgroundImage.
Gate this prop for fabric only.
Try out composing drawables instead of shader. Only reason i went for Shader was to get the border styles right as currently CSSBackgroundDrawable draws it so it was easier to hook the shader into paint and draw. But I just checked box shadow drawables in the source and it uses clipping to clip border paths. I will experiment with that. If there are some additional pointers in this direction let me know.

Let me know how this sounds @NickGerleman. Thank you for your contributions and quick feedback! 🙏

NickGerleman · 2024-07-17T03:31:53Z

That sounds about right to me!

I didn’t think about clipping considerations. Currently we clip most often in onDraw(), so all foreground content gets clipped to the padding box. This is why background drawables can still draw outside of the clip region, but why they aren’t automatically clipped.

Feel free to keep this inside CSSBackgroundDrawable for now, if it makes border use easier. The connective tissue the shadows are using is still being checked in right now.

intergalacticspacehighway · 2024-07-20T08:06:18Z

@NickGerleman updated the PR. Will experiment with Drawables and closely monitor the BoxShadow updates. Let me know if any more feedback. Next, will update the iOS implementation for prop name changes (it will use most of the stuff from this PR)

NickGerleman · 2024-07-23T23:13:05Z