-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
0.18 preview release #2248
0.18 preview release #2248
Conversation
We only need to test against the baseline of css-modules. Fix #2210
Removes 'accessible', 'accessibilityState', and 'accessibilityValue' props.
Size change: -0.29 kB
View unchanged
|
* Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close #2208 Fix #2138 Fix #2196 Fix #2007 Fix #1517
Also add node-based unit tests for SSR APIs.
Remove libraries from benchmarks as comparison to css-modules baseline is what matters. This makes benchmark builds faster and will reduce how often people open PRs asking for their library to be included. Close #2210
* Control writing direction using 'dir' and 'lang' props. * Change the compiler output for RTL styles polyfill. * Export 'useLocaleContext' for working with writing direction context. * Turn I18nManager into a mock API
There appears to be an issue with https://codesandbox.io/s/crazy-chatelet-iq8uq4?file=/src/App.js Error: You can see on the root |
See this note on problems for static extraction:
Possibly StyleSheet.flatten could be modified to keep compiled and dynamic styles separate. But at the moment no one is using static extraction of styles. Unfortunately, the RN API isn't being designed for Web, and that both limits a lot of what we can do, as well as adds a lot of overhead in the web shim. |
@marklawlor @necolas I attempted a fix to the |
Using the latest react-native-web with react / react-dom version 18 or above causes error as ReactDOM.render is no longer supported. The error is reproducable by taking your sandbox example and changing the react and react-dom versions to 18.0.0 or above. The error is then logged in the console. I do not see any issues in general but. Is this something that will be addressed? I can create an issue / observation if this is the wrong PR to mention it in. |
It's a warning, not an error. I don't intend to switch to |
@jmeistrich that patch doesn't look like it will work with more than one style. As I mentioned above, fundamentally this is a problem related to having |
Bumps [semver-regex](https://github.com/sindresorhus/semver-regex) from 3.1.3 to 3.1.4. - [Release notes](https://github.com/sindresorhus/semver-regex/releases) - [Commits](https://github.com/sindresorhus/semver-regex/commits/v3.1.4) --- updated-dependencies: - dependency-name: semver-regex dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
This branch was merged into master and 0.18 is now available on npm |
@marklawlor I may have found a workaround for this issue while looking into #2387. If you follow that issue I'll likely have a patch up and publish a test version for you to try in your e2e setup |
# Why - Since 0.18, RNW allows passing css classes to views using [$css: true](necolas/react-native-web#2248) and handles merging with styleQ processor. - Flattening creates issue for libraries such as NativeWind that uses `$css` approach to pass classnames in View. - Checkout this [repro](https://github.com/intergalacticspacehighway/nativewind-expo-av-web-repro/blob/main/App.tsx). Here, we pass `w-40 h-40` which gets translated to `{$css: true, width: "w-40", height: "h-40"}` by NativeWind. expo-av's flattening results in `{$css: true, width: "w-40", height: "h-40", overflow: "hidden" }`. styleQ converts that object into a class string `h-40 w-40 hidden`, resulting in a hidden View. # How I think we don't need to flatten styles (unless I am missing something) as RN and RNW internally do the [flattening](https://github.com/facebook/react-native/blob/4a07ed2c0c78fd7d3353aff6e0a7f75a2a4b6b86/Libraries/Components/View/View.js#L102). Also, recursive array styles work with RN (also TS definitions support it) # Test Plan - Tested running video [example](https://github.com/intergalacticspacehighway/nativewind-expo-av-web-repro/blob/main/App.tsx) on native and web. Before and after this change should have no effect on the UI apart from fixing the hidden View bug on **web.**
0.18 preview
npm i react-native-web@0.0.0-de1d3a7c
Breaking changes
StyleSheet.create()
is now the identify function, returning the input style objects. Previously, it replaced styles with numeric ids. This improves compatibility with React Native, but accessing the returned style objects at runtime is still not recommended as it can prevent static extraction to CSS. (Stylesheet.create incompatible return type #2068)AppRegistry
to inline styles, but all styles in eval-ed modules will be included, rather than only the styles produced by the initial render. TheStyleSheet.getSheet()
API can also be used to retrieve the current style sheet as a CSS string. (React 18 support #2196)I18nManager
is now a mock API included only for compatibility with React Native. The ability to swap between left/right values for RTL writing directions has been removed entirely. See below for new localization APIs.StyleSheet.create()
.accessible
,accessibilityState
, andaccessibilityValue
props have been removed.:focus-visible
polyfill has been removed, as by default modern browsers no longer show focus rings for pointer interactions.unstable_createElement
API has changed. Children are no longer accepted as the 3rd argument, they must be included in the props as the 2nd argument. The 3rd argument is now an options object with a field to set the expected writing direction ({ writingDirection }
).New features
dir
orlang
prop on a component.useLocaleContext
API is exported to query a component's locale and writing direction for fine-grained control over localized layout.Fixes
CheckBox
andSwitch
elements. (Show foucs ring on checkbox #2242)Notes
StyleSheet runtime
StyleSheet
has been rewritten to better separate the runtime from the compiler. The performance of the new merging runtime is on par with using css-modules. The core runtime is a standalone package called styleQ; refer to the styleQ documentation for more details.The performance of inline styles has also been significantly improved, although
StyleSheet
still has to perform extra work to transform non-standard React Native styles and polyfill logical styles.The
StyleSheet
import is now a standalone module.StyleSheet
itself is a function that can be called to resolve styles to DOMclassName
andstyle
values, e.g.,StyleSheet extraction
One of the benefits behind the new architecture is that
StyleSheet
can now resolve compiled styles that conform to the expected format, whether they are produced by the built-in compiler or an external source.Style compilers must produce annotated objects that are treated as class name maps, and classes are deduped based on whether they share the same key, e.g.,
This is the first step towards allowing 3rd party tools to extract styles to static CSS files, and optionally dropping the client-side compiler, without needing to integrate deeply with the
StyleSheet
runtime or having to modify props/prop values in the source code, i.e., only theStyleSheet.create()
call needs transforming by the compiler.The existence of the
StyleSheet.flatten()
API can be a problem for build-time compiling of some styles. Components that flatten styles expect to be able to work with the source styles, and use the source values at runtime. A compiler that aims to extract all styles and have no runtime transform would need to disallow the use ofStyleSheet.flatten()
entirely (unfortunately it's also used by the Animated API internals).