Skip to content

feat: Add backdrop-filter CSS attribute js support - #59138

Open
marcinszalski-callstack wants to merge 1 commit into
react:mainfrom
marcinszalski-callstack:feat/css_backdrop_filter_js
Open

marcinszalski-callstack wants to merge 1 commit into
react:mainfrom
marcinszalski-callstack:feat/css_backdrop_filter_js

Conversation

@marcinszalski-callstack

@marcinszalski-callstack marcinszalski-callstack commented Oct 16, 2026 •

Copy link
Copy Markdown

Summary:

This PR adds JS support for the backdrop-filter style property. It follows the CSS Filters spec as applied to backdrop rendering. The property accepts the same FilterFunction type already used by the filter property, so no new types are introduced — the existing array and string parsing via processFilter is reused directly.

Supported filter functions: blur, brightness, contrast, grayscale, sepia, saturate, invert, hue-rotate, drop-shadow.

Note: opacity() and drop-shadow() are parsed and accepted without error, but are effectively no-ops in a backdrop-filter context — opacity() reveals the unfiltered content beneath, and drop-shadow() operates on the rectangular backdrop image rather than content-shaped output, producing no visible result. This matches expected CSS spec behavior.

Work has been split into three PRs for more convenient reviewing. This part adds JS parsing, type wiring, and the example page. Native rendering is covered by the iOS and Android PRs.

Changelog:

[GENERAL] [ADDED] - Add backdrop-filter CSS style property JS support

Test Plan:

Merge the iOS and Android PRs into this branch, then run the RNTester app.

  • Test the Backdrop Filter screen in RNTester (BackdropFilterExample.js)
  • JS parser integration tests (processBackdropFilter-itest.js)
bf_merged2

@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 Oct 16, 2026
@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 Oct 16, 2026

This branch has not been deployed

No deployments
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. 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.

1 participant