React Strict DOM (RSD) standardizes the development of styled React components for web and native.
by facebook4 of 6 standards met
fixes #456 Verify that variableValue['@media (prefers-color-scheme: dark)'] is defined before using it as defaultValue Added test for css.defineVars This fix aligns the behavior across light and dark mode. A better solution would probably be to actually support a subset of the media query specification, but I think that would require some more effort and planing. The tests are a little strange as they tests that using media-queries other than will return the default value, and not that other media queries actually works. I used the as a template and tried to keep the test names a concise as possible.
add react-strict-animated library This introduces a new package to the RSD repo that provides a subset of React Native's API that works on both web and native, and built with integration of react-strict-dom in mind. The native implementation is largely a thin passthrough to the proper Animated API and some settings pre-configured (such as useAnimatedDriver always being enabled). The web side is a new Animated implementation that ends up being driven by the Web Animations API.
Repository: facebook/react-strict-dom. Description: React Strict DOM (RSD) standardizes the development of styled React components for web and native. Stars: 3482, Forks: 190. Primary language: JavaScript. Languages: JavaScript (94.9%), CSS (3.1%), TypeScript (1.8%), HTML (0.1%), Shell (0%). License: MIT. Homepage: https://facebook.github.io/react-strict-dom Latest release: 0.0.54 (4mo ago). Open PRs: 26, open issues: 45. Last activity: 18h ago. Community health: 75%. Top contributors: necolas, ecreeth, dependabot[bot], nmn, SamChou19815, javascripter, vincentriemer, AlexanderOMara, martinbooth, MoOx and others.
JavaScript
Last 12 weeks · 12 commits
Describe the issue When using dark mode on device the default value of with media-queries other than are ignored. If using light mode the default value is used as expected. From researching this a bit if think the issue is at line 71 in : It looks like the if-check should also check if the exists before setting the defaultValue. Expected behavior When device is set to dark mode styling should behave the same as in light mode. Steps to reproduce 1. Define a css-var like this: 2. Use the var in a component: 3. Check the component on device/simulator in dark-mode. Test case _No response_ Additional comments Images from the above example running in our test-app. (Ignore the ugly theme switcher in the upper right) Light-mode: Dark-mode:
iOS and Android both historically clip everything outside the bounds of the paragraph/top-level text element. This includes clipping content, when would set the bounds to be smaller than the text to be drawn. This is equivalent to setting manually on a paragraph. Changing this default behavior in React Native is scary and breaking and not something we are taking on right now, but with Facsimile/PreparedLayoutTextView on Android, it can be controlled with opt-in , for web style clipping. This change defaults to to get that web style behavior by default (e.g. no clipping the bounds of /`line-height` makes text larger than the bounds.