Browser support has been reduced: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. This is needed to account for changes to rendering in React 18.
Style sheets rendered on the server will now include styles from all the eval-ed modules, rather than only the styles produced by the initial render.
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. (#2068)
StyleSheet.getSheet() can be used on the server to retrieve the current style sheet as a CSS string. (#2196)
I18nManager is now a mock API included only for compatibility with React Native. The ability to flip left/right properties or values has now been removed entirely (use start/end instead). See below for new localization APIs.
Inline styles are no longer automatically vendor-prefixed. This improves inline style performance and discourages use of inline styles. This should have little effect in practice if your app is predominantly using StyleSheet.create().
The deprecated accessible, accessibilityState, and accessibilityValue props have been removed.
The :focus-visible polyfill has been removed, as by default modern browsers no longer show focus rings for pointer interactions.
VirtualizedList, FlatList, and SectionList vendor components have been updated to match latest React Native. (#2241) Thanks to @DavidRieman.
The legacy jest preset and snapshot serializer has been removed from the npm package.
The 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
Localized LTR/RTL layouts can now be nesting to arbitrary depths simply by setting the dir or lang prop on a component. By default, layouts are rendering RTL. To render RTL you must set dir="rtl" on an outer element rendered by React.
Localized LTR/RTL layouts can be switched dynamically at runtime.
useLocaleContext is a new export API. Use it to query a component's locale and writing direction context for fine-grained control over localized layout.
Rendering into multiple windows and shadow roots in now supported. (#1517, #2138)
Extraction to static CSS and consumption of external CSS is now possible but not yet recommended. The StyleSheet runtime can consume any styles that match an expected format, but StyleSheet.flatten cannot work with extracted styles. (See below for more details.)
Fixes
Fixes static and dynamic shortform / longform deduplication. (#2007)
Display the focus ring on CheckBox and Switch elements. (#2242)
Prevent href navigation for disabled Pressables and Touchables. (#2299)
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 DOM className and style values, e.g.,
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Bumps react-native-web from 0.17.1 to 0.18.9.
Release notes
Sourced from react-native-web's releases.
... (truncated)
Commits
dee258a
0.18.99766fe6
[fix] Export useLocaleContext as default exportc764f96
[fix] Allow TextInput to dispatch 'submit' eventb6c8da8
Bump terser from 5.14.1 to 5.15.0bd409f6
0.18.8290cae2
[fix] Image throws error if packager asset isn't resolved93b1d04
[fix] CheckBox supports readOnly on native control107c6ee
[fix] Allow Pressable to be programmatically focused when disabled3fc40bd
Fix README examples app urlbac3651
0.18.7Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)