Skip to content

feat(style) - Add media query syntax support#57439

Draft
intergalacticspacehighway wants to merge 11 commits into
react:mainfrom
intergalacticspacehighway:feat/media-query
Draft

feat(style) - Add media query syntax support#57439
intergalacticspacehighway wants to merge 11 commits into
react:mainfrom
intergalacticspacehighway:feat/media-query

Conversation

@intergalacticspacehighway

@intergalacticspacehighway intergalacticspacehighway commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Summary:

  • Adds native media query support to stylesheet. The majority of changes are in the shared cpp layer. It relies on shadow node commit hook to resolve the media query styles. Platform layer just adds a color scheme listener. The viewport size (size that is used by orientation media query) is derived from the root node surface size.
  • It borrows the stylex's syntax and naming conventions for media query styles (conditional styles). RSD also uses similar syntax. It also works for RN since it makes the ordering intuitive when flattening.
  • RFC more details - RFC: Media query support in StyleSheet react-native-community/discussions-and-proposals#1010

Changelog:

[GENERAL] [ADDED] - Stylesheet media query support

Test Plan:

Tried to cover majority of paths. Added unit and fantom tests.

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-07-06.at.13.06.47.mov

@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 Jul 6, 2026
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.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant