Skip to content

feat: add JS support for CSS mask properties - #58163

Open
paradowstack wants to merge 4 commits into
react:mainfrom
paradowstack:feat/mask-js
Open

feat: add JS support for CSS mask properties#58163
paradowstack wants to merge 4 commits into
react:mainfrom
paradowstack:feat/mask-js

Conversation

@paradowstack

@paradowstack paradowstack commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Rebase Note:

This branch is stacked on #54995 + #54996 + #54994 (Nishan's url() in background-image work). Once this work lands, this branch has to be rebased. Review only the last commit.

Summary:

This PR adds support for the mask-image, mask-size, mask-position and mask-repeat CSS properties. It follows the CSS spec described here. A mask clips a view and its whole subtree to the alpha channel of a gradient or an image. The remaining mask properties (mask-clip, mask-origin, mask-mode, mask-composite) and the mask shorthand are not covered here and can be added in a follow up PR if needed.

Every mask-* property accepts exactly the same values as its background-* counterpart, so the whole value pipeline is shared instead of duplicated - the same JS style processors and the same C++ prop conversions. url() masks are collected by the same shadow node code that requests background-image sources, so they go through the existing image loading path.

Work has been split into three stacked PRs for more convenient reviewing process:

  1. this PR - style attributes, Flow types and the cross platform prop plumbing in C++
  2. iOS - iOS rendering and the RNTester example page
  3. Android - Android rendering

Changelog:

[GENERAL] [ADDED] - Add JS support for CSS mask properties

Test Plan:

  • yarn fantom packages/react-native/Libraries/Components/View/__tests__/View-mask-itest.js
  • yarn flow-check, yarn build-types (ReactNativeApi.d.ts regenerated)

Rendering is covered in the iOS and Android PRs on top of this one.

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 27, 2026
@paradowstack paradowstack changed the title Feat/mask js feat: add JS support for CSS mask properties Aug 27, 2026
@github-actions

Copy link
Copy Markdown

Warning

JavaScript API change detected

This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API.

  • Please include a clear changelog message.
  • This change will be subject to additional review.

This change was flagged as: POTENTIALLY_BREAKING

@paradowstack
paradowstack marked this pull request as ready for review August 27, 2026 12:13
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Aug 27, 2026
@paradowstack
paradowstack force-pushed the feat/mask-js branch 2 times, most recently from d39fc84 to f9e24ac Compare August 27, 2026 12:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Callstack Partner: Callstack Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants