RFC: Media query support in StyleSheet

[intergalacticspacehighway]

This PR adds an RFC to support media queries with StyleSheet and resolving them natively.

Draft PR that implements the proposed RFC - react/react-native#57439

[rubennorte]

I'm not an expert on styling in RN but I think that doing this type of logic in a commit hook is a red flag. Commit hooks should mostly be used by external systems not but RN internals. I feel like this should be done directly as part of layout when committing the shadow tree (within ShadowTree.cpp) not from outside.

We can probably do this the same way we propagate the configuration for point scale factor, etc. from the root shadow node down to individual nodes.

cc @javache , @rozele .

[intergalacticspacehighway]

Thanks for reviewing. My initial instinct was to put it in tryCommit function, right before the layout but then i updated it after seeing AnimationBackendCommitHook, thinking it to be cleaner 😅. Putting it in tryCommit should work, will test and update the proposal/draft PR.

[rubennorte]

I think the shared animation backend was implemented that way because of different constraints (probably reconciling source props in React components vs. animation state for those props). We should be able to do it without them here.

[intergalacticspacehighway]

Tested, it works. Updated proposal - 9e0614b and PR - react/react-native@6ac78fa.

[satya164]

I wonder if there's a more type-safe API. there's a lot of specialized syntax inside this string that's not type-checked or validated when writing code without external tools.

Maybe template literals could help here but could get messy when combining multiple.

[intergalacticspacehighway]

Maybe template literals

i was thinking of something like this. Or maybe an object API could be better? I feel syntax wise CSS-like string makes sense. I also wanted to check how StyleX handles it, seems it is much more lenient and supports any string prefixed with @.

[rubennorte]

Not necessarily advocating for this, but another option could be something like this:

const $landscape = StyleSheet.media({
  orientation: 'landscape',
});

const $portrait = StyleSheet.media({
  orientation: 'portrait',
});

const styles = StyleSheet.create({
  padding: {
    default: 12,
    [$portrait]: 24,
    [$landscape]: 36,
  },
});

And possibly define some defaults:

const styles = StyleSheet.create({
  padding: {
    default: 12,
    [StyleSheet.media.PORTRAIT]: 24,
    [StyleSheet.media.LANDSCAPE]: 36,
  },
});

[intergalacticspacehighway]

I guess we can keep the string syntax for CSS familiarity (with weak typings like StyleX) and also add StyleSheet.media helper. wdyt?

[satya164]

I guess the CSS syntax + helper makes sense. prior art in unistyles: https://v2.unistyl.es/reference/media-queries/

but also this proposal is about specifying different property values based on conditions, unlike media query where where it provides a style block. so maybe it shouldn't be based on media query syntax, but CSS if conditions, which are closer to this concept? https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if

i was actually thinking to use a similar API in react navigation:

const styles = StyleSheet.create({
  padding: {
    'media (orientation: portrait)': 24,
    'media (orientation: landscape)': 36,
    else: 12,
  },
});

[intergalacticspacehighway]

TIL if function. Nice, i guess long term that would be ideal. Wondering if it's still early as it lacks support in widely used browsers and the proposal seems to be in draft (so it will require some polyfill for web if we support its CSS if() syntax). We're not doing style blocks with media query but we can aim to provide CSS like @media syntax for familiarity (to humans and LLMs 😅).