What's Changed

• Modal: Significantly improve animation by @qwertychouskie in #2805
• Fix memory leak in AnimatedProps constructor by @c-miles in #2809
• feat(accessibility): add inert to forwardedProps by @theonetheycallneo in #2773

New Contributors

• @qwertychouskie made their first contribution in #2805
• @c-miles made their first contribution in #2809
• @theonetheycallneo made their first contribution in #2773

Full Changelog: 0.21.1...0.21.2

Full Changelog: 0.21.0...0.21.1

These are fixes but also potentially breaking changes.

• Correctly propagate pointer-events: auto to children of elements using pointerEvents: 'box-none'.
• Update createPortal import from react-dom

Full Changelog: 0.20.0...0.21.0

React 19 support

• [change] React 19 support. Note that findNodeHandle is no longer supported on web.
• [change] Update inline-style-prefixer

Fixes

• [fix] Prevent clipped text from being scrolled by drag

Best compatibility: react-native@>=0.71

React 18 support

• [change] React 18 createRoot support.
• [change] Update Animated to support React 18, including new AnimatedColor node.
• [change] Update ScrollView to Class component for React 18 support.

New features

• [add] Map 'button' and 'paragraph' role to equivalent semantic HTML elements.
• [add] Add support for aria-* props.
• [add] Add support for role prop.
• [add] Add support for id prop.
• [add] Add support for tabIndex prop (only values 0 and -1).
• [add] Support for PointerEvent props.
• [add] Add support for pointerEvents style.
• [add] Add support for userSelect style.
• [add] Add polyfilled support for W3C logical styles (e.g., insetInline.)
• [add] Add <Image> support for tintColor prop.
• [add] Add <TextInput> support for enterKeyHint prop.
• [add] Add <TextInput> support for inputMode prop.
• [add] Add <TextInput> support for readOnly prop.
• [add] Add <TextInput> support for rows prop.

Deprecations

• [change] Deprecate Touchable* components. Use Pressable.
• [change] Deprecate Button component. Use Pressable.
• [change] Deprecate StyleSheet.compose(). Use style array syntax.
• [change] Deprecate accessibility* props. Use aria-* and role props.
• [change] Deprecate nativeId prop. Use id prop.
• [change] Deprecate focusable props. Use tabIndex prop.
• [change] Deprecate pointerEvents prop. Use pointerEvents style.
• [change] Deprecate selectable prop. Use userSelect style.
• [change] Deprecate fontVariant style array values. Use space-separated string values.
• [change] Deprecate textAlignVertical style. Use verticalAlign style.
• [change] Deprecate transform style array values. Use space-separated string functions.
• [change] Deprecate non-standard logical styles, e.g., 'marginStart'.
• [change] Deprecate <Image> style resizeMode. Use resizeMode prop.
• [change] Deprecate <Image> style tintColor. Use tintColor prop.
• [change] Deprecate <TextInput> prop keyboardType. Use inputMode prop.
• [change] Deprecate <TextInput> prop returnKeyType. Use enterKeyHint prop.
• [change] Deprecate <TextInput> prop editable. Use readOnly prop.
• [change] Deprecate <TextInput> prop numberOfLines. Use rows prop.
• [change] Deprecate BackHandler API.

Breaking changes

• [change] Remove previously deprecated Android/iOS platform-specific exports.
• [change] Remove previously deprecated setNativeProps API.
• [change] Remove previously deprecated AppState.removeListener API.
• [change] <Text> is position:relative by default.
• [change] Add task queue for InteractionManager.

Fixes

• [fix] Animated now works with compiled styles.
• [fix] Text inheritance of textAlign.

Breaking changes

• Browser support has been reduced. Changes as follows: 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)
• Linking.openURL supports target value. (#2277)

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.

<img width="512" alt="image" src="https://user-images.githubusercontent.com/239676/159770600-a186ed95-9304-45d4-86b5-5511b3a234a5.png">

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.

<img width="512" alt="image" src="https://user-images.githubusercontent.com/239676/159771465-501c555b-17b4-426b-a397-81fbfd802661.png">

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.,

const [ className, inlineStyle ] = StyleSheet([ styles.root, prop.styles ])

StyleSheet extraction

One of the benefits behind the new architecture is that StyleSheet can resolve compiled styles that conform to the expected format, whether they are produced by the built-in compiler or an external source. However, this is not yet recommended, as explained below.

Style compilers must produce annotated objects that are treated as class name maps, and classes are de-duplicated based on whether they share the same key, e.g.,

{
  $$css: true,
  display: 'display-class',
  opacity: 'opacity-class'
}

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 the StyleSheet.create() call needs transforming by the compiler.

The existence of the StyleSheet.flatten() API is a problem for build-time compiling of some styles. Components that flatten styles (e.g., Animated, Image) 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 also need to disallow the use of StyleSheet.flatten() entirely. A future release of React Native for Web may remove use of StyleSheet.flatten from internal implementations, but cannot prevent this API from being used in product code or 3rd party packages.

Accessibility improvements and breaking changes to unstable APIs.

Breaking changes

• Remove special treatment of elements with accessibilityRole="menuitem". It no longer adds elements to the tab flow.
• Remove anchor element inference from View and Text with accessibilityRole="link". Only requires addition of href prop.
• Remove unstable_createElement element-type inference using href. Fixes use with svg elements.
• Remove unstable_createElement keyboard shim for onClick. It no longer invokes onClick during onKeyDown for keyboard interactions on elements that are not natively interactive.

Fixes

• Fix Pressable support for keyboard interactions if element is unmounted during interaction.
• Remove unnecessary CSS reset for input number spin buttons.
• Fix ProgressBar & Switch rendering in Windows High Contrast mode
• Text preserves white-space if numberOfLines={1}.

This release includes Flow type exports, updates vendored modules, and miscellaneous bug fixes.

Breaking changes

• Animated & VirtualizedList have been updated from React Native.
• Dimensions has changed the source of window dimensions and works more reliably in Safari.
• NativeEventEmitter no longer inherits from EventEmitter and does not include the removeSubscription method.

New features

• Flow types are now exported. Thanks @comp615

This release introduces improved accessibility features and new documentation. It includes relatively minor breaking changes.

Breaking changes

• React 17 is a peer dependency.
• The I18nManager API has removed the isRTL and doLeftAndRightSwapInRTL properties. They must now be accessed using the getConstants() method, which returns an object with the same properties. This was an undocumented breaking change in a previous version of React Native.
• The focusable prop now determines whether an element appears in the keyboard tab flow.
• The hrefAttrs prop has been added to Text and View. The value is an object with rel, target, and download properties. This replaces the undocumented rel and target props.
• The automatic addition of rel="noopener" to anchors has been removed.
• The Linking.openURL(url) API now opens the url in new tab.
• The Linking API now includes the addEventListener methods.
• The deprecated importantForAccessibility prop has been removed. Use accessibilityHidden instead.
• The undocumented data-focusable attribute has also been removed from rendered DOM nodes.
• The undocumented disabled prop has been removed from View and Text; use accessibilityDisabled instead.

New features

• Pressable has added onHoverIn and onHoverOut props.
• All ARIA properties are now supported via equivalent accessibility* props. The undocumented support for aria-* prop forwarding remains and will be removed in a future version.
• Additional accessibilityRole values are mapped to HTML element equivalents.
• CSS aspectRatio property is now available in browsers with support.

Deprecations

• The accessible prop is deprecated and will be removed in the next minor release. React Native for Web will follow React Native for Windows/macOS in removing this prop. Use focusable instead.

Documentation

This release will include a rewrite of the documentation site and interactive examples.

https://necolas.github.io/react-native-web/

The examples will be embedded in relevant pages via a Next.js-powered codesandbox, making it easy for people to fork the example app from their browsers.