Cross-platform React UI packages
Best compatibility: react-native@>=0.71
createRoot
support.Animated
to support React 18, including new AnimatedColor
node.ScrollView
to Class component for React 18 support.'button'
and 'paragraph'
role to equivalent semantic HTML elements.aria-*
props.role
prop.id
prop.tabIndex
prop (only values 0
and -1
).PointerEvent
props.pointerEvents
style.userSelect
style.insetInline
.)<Image>
support for tintColor
prop.<TextInput>
support for enterKeyHint
prop.<TextInput>
support for inputMode
prop.<TextInput>
support for readOnly
prop.<TextInput>
support for rows
prop.Touchable*
components. Use Pressable
.Button
component. Use Pressable
.StyleSheet.compose()
. Use style array syntax.accessibility*
props. Use aria-*
and role
props.nativeId
prop. Use id
prop.focusable
props. Use tabIndex
prop.pointerEvents
prop. Use pointerEvents
style.selectable
prop. Use userSelect
style.fontVariant
style array values. Use space-separated string values.textAlignVertical
style. Use verticalAlign
style.transform
style array values. Use space-separated string functions.<Image>
style resizeMode
. Use resizeMode
prop.<Image>
style tintColor
. Use tintColor
prop.<TextInput>
prop keyboardType
. Use inputMode
prop.<TextInput>
prop returnKeyType
. Use enterKeyHint
prop.<TextInput>
prop editable
. Use readOnly
prop.<TextInput>
prop numberOfLines
. Use rows
prop.BackHandler
API.setNativeProps
API.AppState.removeListener
API.<Text>
is position:relative
by default.InteractionManager
.Animated
now works with compiled styles.textAlign
.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.StyleSheet.create()
.accessible
, accessibilityState
, and accessibilityValue
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 }
).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.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.StyleSheet.flatten
cannot work with extracted styles. (See below for more details.)CheckBox
and Switch
elements. (#2242)Linking.openURL
supports target
value. (#2277)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.,
const [ className, inlineStyle ] = StyleSheet([ styles.root, prop.styles ])
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.
accessibilityRole="menuitem"
. It no longer adds elements to the tab flow.View
and Text
with accessibilityRole="link"
. Only requires addition of href
prop.unstable_createElement
element-type inference using href
. Fixes use with svg elements.unstable_createElement
keyboard shim for onClick
. It no longer invokes onClick
during onKeyDown
for keyboard interactions on elements that are not natively interactive.Pressable
support for keyboard interactions if element is unmounted during interaction.ProgressBar
& Switch
rendering in Windows High Contrast modeText
preserves white-space if numberOfLines={1}
.This release includes Flow type exports, updates vendored modules, and miscellaneous bug fixes.
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.This release introduces improved accessibility features and new documentation. It includes relatively minor breaking changes.
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.focusable
prop now determines whether an element appears in the keyboard tab flow.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.rel="noopener"
to anchors has been removed.Linking.openURL(url)
API now opens the url in new tab.Linking
API now includes the addEventListener
methods.importantForAccessibility
prop has been removed. Use accessibilityHidden
instead.data-focusable
attribute has also been removed from rendered DOM nodes.disabled
prop has been removed from View
and Text
; use accessibilityDisabled
instead.onHoverIn
and onHoverOut
props.accessibility*
props. The undocumented support for aria-*
prop forwarding remains and will be removed in a future version.accessibilityRole
values are mapped to HTML element equivalents.aspectRatio
property is now available in browsers with support.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.This release will include a rewrite of the documentation site and interactive examples.
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.
This is a relatively small release that introduces a couple of new features and makes a change to the default flexBasis
value of View
. There are no breaking API changes and it should be straight-forward to upgrade from 0.13. Thank you to Twitter Engineering and everyone else who tested and helped to improve the 0.14 release.
React Native has an implementation of flexbox that does not quite follow the W3C spec for flexbox. Previously, React Native for Web attempted to replicate the React Native rendering by setting flexBasis
to 0%
. However, this created its own problems where views could collapse down to 0px
in height on the web. This patch sets the default flexBasis
back to auto
. This will occasionally cause different rendering inconsistencies with React Native, which can be addressed by making changes small to existing React Native styles to set the flexBasis
back to 0%
or the desired percentage. And ultimately, Yoga 2 intends to correct its flexbox implementation and this will make its way into React Native eventually.
Fix #1640, #1604, #1264
A Modal
implementation using CSS animations and ARIA, courtesy of @imnotjames. When the modal is open the rest of the app is hidden from screen readers via aria-modal
. Focus is contained within the modal. When the Escape key is pressed, the onRequestClose
function is called on the top-most modal.
Fix #1020
The Pressable
component state now includes hover
, which scoped is scoped to a Pressable
instance and does not bubble to ancestor Pressables. This behavior aligns with the behavior of the focus and press states.
<Pressable
children={
({ pressed, hovered, focused }) => {}
}
style={
({ pressed, hovered, focused }) => {}
}
/>
Fix #1708
This release includes many significant changes and improvements.
create-react-class
. These changes mean better support for Concurrent Mode, Fast Refresh, and interaction handling.onPress
callback on Touchables is now backed by native click
events and will be called in almost every situation a native click
event is called. The onPress
prop of Touchable*
components now receives a SyntheticMouseEvent
not a SyntheticResponderEvent
. It may be fired without a preceding onPressIn
.findNodeHandle
to get a reference to the component's underlying host node will not work. Use ref
instead. The findNodeHandle
and findDOMNode
APIs are discouraged and are not safe with function components or concurrent mode.forwardedRef
props have been removed. The ref
on a component will now return a ref to the host node, which has the imperative methods attached to it.hitSlop
prop has been removed. This caused incorrect hit targets for mouse interactions. The browser's built-in touch hitslop will be relied on instead.data-*
props is no longer supported. Use dataSet
instead. For example, dataSet={{ someName: 1 }}
.onLayout
prop now requires a ResizeObserver
polyfill to work, and does not fallback to window resize
events.TabBarIOS
, TimePickerAndroid
accessibilityRelationship
prop. This prop was not added to React Native. Continue using aria-*
props for now.View
support for accessibilityValue
.Pressable
component.Appearance
API and useColorScheme
hook.onPress
event can now be used to preventDefault
the native click behavior (this is no longer done automatically)Image
support for variable resolution images (requires bundler integration).TextInput
support for onContentSizeChange
to allow auto-grow textareas.ref.setNativeProps
. Recommend avoiding this API as it is expected to be deprecated in React Native.This release includes compatibility with the vast majority of React Native v0.60. React features like createContext
and forwardRef
have been integrated, as well as several breaking changes from upstream. In most cases, you should be able to update smoothly if not using components and APIs deprecated in React Native.
createElement
is renamed to unstable_createElement
and is an unstable implementation detail for now (d4b9f35d3379e3b92b7dfe279d1a9fa58dacecb6)AsyncStorage
, AlertIOS
, ActionSheetIOS
, CameraRoll
, DatePickerAndroid
, DatePickerIOS
, ImageEditor
, ImagePickerIOS
, ImageStore
, ListView
, MaskedViewIOS
, NavigatorIOS
, NetInfo
, PickerIOS
, ProgressBarAndroid
, ProgressViewIOS
, PushNotificationsIOS
, SegmentedControlIOS
, Slider
, SnapshotViewIOS
, StatusBarIOS
, SwipeableListView
, ToolbarAndroid
, VibrationIOS
, ViewPagerAndroid
, WebView
.AppRegistry.runApplication
(afb8d3b7fbe03feb7a79ca069c1c246787a51060)accessibilityStates
prop (d57fb6eb01f5226c01e034bd1ce535b5a7204b33)className
prop and forwarding of arbitrary props from View
and Text
to the host DOM element.accessibilityTraits
and accessibilityComponentType
props (ae94551ac54b6f098dabf2084564f25aa1ca5b02)resizeMode
static from Image
(c35f849524deafffc35aef96122a9dc56ef3be10)placeholderTextColor
from unstable_createElement
props. Instead, this is now exposed as a style
property (287251a06a08f7338a0516b1648a25118a1c410b)Switch
prop types to latest from React Native (aa8593ba9704d42f26c87303ac5a584856cbadaa)Animated
, Touchable
, TouchableHighlight
, TouchableOpacity
, TouchableWithoutFeedback
, FlatList
, SectionList
, VirtualizedList
, VirtualizedSectionList
.accessibilityRelationship
and accessibilityState
props (d57fb6eb01f5226c01e034bd1ce535b5a7204b33)forwardedRef
on Text
and View
; use this instead of findNodeHandle
to get a reference to the native element. (React has deprecated findDOMNode
in Strict Mode, and you can anticipate the same happening to findNodeHandle
.)disabled
prop to TextInput
to support disabling the element (fc033a3161be76224d120dec7aab7009e9414fa7)useWindowDimensions
hook (df1b62cd454565cc3d07662f84848b483c6f8744)Platform.isTesting
(ad674e4b4f71613422a95b60b3edb2c54028336f)ResponderEventPlugin
when client rendering (250ee3c234196fdddf6e5189c572a292566c3cb2)ScrollView
for touch interactions (e22f0bebb3262f882497f8818d59f77139402d90) autoComplete
on TextInput
(b10711bddd1fdf6e01e82c0d49840dce9c2e04d2)TextInput
(5334a4f0d8c2aefb64131fe59647e9ce2d946aac)This release includes: a refactor of StyleSheet internals to improve browser layout times; improved compatibility with React Native; reduced bundle sizes in worse-case-scenario; and improved text truncation capabilities in supporting browsers.
export default
from the ESM entry point, to help with tree-shaking (69bd0f631dc0a1640e1f4449611e03d0339e8e81)ART
from the exports to reduce CJS bundle size (3d3ea9aeed7d18ea9daf505e70bb14cfc966da23)resizeMode
static from Image
(49edcb291e9aa2b8a935448f5355c0d17151e229)outline
with outline{Color,Style,Width}
styles (f048d848a14fdd255cfabf1e32f8c55adc2622f0)animationName
with animationKeyframes
style prop.className
prop on View
and Text
is deprecated and will be removed shortly (d50f6304dc5da9d3e88b1a583214e1279b9dd32d)TextInput
support for onContentSizeChange
, by @awinograd (67979b72827ee7f6e60c9e3fff9f74c9bc972f80)Text
support for numberOfLines
prop value greater than 1
. Only supported in WebKit and Blink browsers; limited localization support (f048d848a14fdd255cfabf1e32f8c55adc2622f0)NativeEventEmitter
implementation, by @EvanBacon (9ce2b5bf0cfa3e985c669bc3042fd326df965c67)textShadowBlur
and textShadowColor
are provided, by @SKAhack (cf7b020c5dd50a61b744898a7abb033b2073b62b)maxWidth
with Text
using numberOfLines
prop.null
values for style props now produces improved compatibility with React Native rendering.This release includes accessibility, measurement, performance and reliability improvements.
onLayout
have been fixed but if you are depending on bugs in the prior implementation you may experience breaking changes. The dimension values will now include border size; the position values will now include transforms. (93eb3f041ff27c5ff7ce963faf4f412ce1784cea)TextInput
events no longer include the which
property. (8925bf76af2e0e5571fb4bfd05e12bedd0175401)accessibilityRole
and accessibilityStates
props (4040151ee643a02534e72deb51eee76f001b9a5f)The following fixes were included in 0.9.x patch releases, and I want to bring attention to them in these release notes. Thank you to the people who contributed these improvements.
applyLayout
registry (ad188a7ad6c7f71c9ea94911a0299a60968cdefc by @comp615)ResizeObserver
polyfill performance (d31bdf2cf8f74a398efede27cc850e05a6655f30 by @comp615)Clipboard.isAvailable()
value to avoid forced style calculation in Chrome (5855e55615363f733ef8d563f7bad061af889655 by @comp615)node.getBoundingClientRect
if nativeEvent.location{X,Y}
is accessed (40c433c6dfb98204ef74c86585940af80b42cc21 by @hushicai)