Releases: necolas/react-native-web
0.13
This release includes many significant changes and improvements.
- Modern React: implements components using function components and hooks. It removes use of various legacy React features such as legacy context and
create-react-class. These changes mean better support for Concurrent Mode, Fast Refresh, and interaction handling. - Gesture Responder System: this has be rewritten from scratch in user space. Dozens of bugs have been fixed and the system is heavily unit tested; it's now the most accurate and well integrated implementation of any platform.
- React Alternatives: this release removes the use of unstable React DOM APIs. React Native for Web can now be used with Preact and other libraries that are API compatible with React. However, it should be noted that benchmark rendering of 0.13 with React DOM is a lot faster than Preact.
Breaking changes
- The Responder System has been rewritten. This should not be a breaking change (and comes with many bug fixes), but since the system is implemented in user-space rather than React, it may encounter differences in timings relative to the ReactDOM events.
- The
onPresscallback on Touchables is now backed by nativeclickevents and will be called in almost every situation a nativeclickevent is called. TheonPressprop ofTouchable*components now receives aSyntheticMouseEventnot aSyntheticResponderEvent. It may be fired without a precedingonPressIn. - All the components are implemented as function components, so using
findNodeHandleto get a reference to the component's underlying host node will not work. Userefinstead. ThefindNodeHandleandfindDOMNodeAPIs are discouraged and are not safe with function components or concurrent mode. - The
forwardedRefprops have been removed. Therefon a component will now return a ref to the host node, which has the imperative methods attached to it. - The
hitSlopprop has been removed. This caused incorrect hit targets for mouse interactions. The browser's built-in touch hitslop will be relied on instead. - The prop types of each component are now explicit. Unknown props will not be forwarded to the underlying React DOM component.
- Forwarding of
data-*props is no longer supported. UsedataSetinstead. For example,dataSet={{ someName: 1 }}. - The
onLayoutprop now requires aResizeObserverpolyfill to work, and does not fallback to windowresizeevents. - Removed React Native APIs that have been removed or deprecated:
TabBarIOS,TimePickerAndroid - Removed support for HTML microdata props. Microdata has been removed from the HTML spec.
- Removed the
accessibilityRelationshipprop. This prop was not added to React Native. Continue usingaria-*props for now.
New features
- Added
Viewsupport foraccessibilityValue. - Added the
Pressablecomponent. - Add the
AppearanceAPI anduseColorSchemehook.
Fixes
- The active touch responder will now be terminated when the body scrolls, context menu appears, etc.
- Performance improvements for Touchables.
TheonPressevent can now be used topreventDefaultthe native click behavior (this is no longer done automatically) - Fixes
Imagesupport for variable resolution images (requires bundler integration). - Fixes
TextInputsupport foronContentSizeChangeto allow auto-grow textareas. - Fixes the correctness of setting styles using
ref.setNativeProps. Recommend avoiding this API as it is expected to be deprecated in React Native.
0.12.0
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.
Breaking changes
createElementis renamed tounstable_createElementand is an unstable implementation detail for now (d4b9f35)- Remove prop types exports from package. These are deprecated in React Native and introduce significant DEV time performance cost. Flow types are now preferred (1ad1693)
- Remove the following exports which are all deprecated or removed in React Native core:
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. - Hydrating SSR markup is now an explicit opt-in via options passed to
AppRegistry.runApplication(afb8d3b) - Remove deprecated
accessibilityStatesprop (d57fb6e) - Remove deprecated
classNameprop and forwarding of arbitrary props fromViewandTextto the host DOM element. - Remove deprecated
accessibilityTraitsandaccessibilityComponentTypeprops (ae94551) - Remove
resizeModestatic fromImage(c35f849) - Remove
placeholderTextColorfromunstable_createElementprops. Instead, this is now exposed as astyleproperty (287251a) - Update
Switchprop types to latest from React Native (aa8593b)
New features
- The following exports have been updated to align with React Native:
Animated,Touchable,TouchableHighlight,TouchableOpacity,TouchableWithoutFeedback,FlatList,SectionList,VirtualizedList,VirtualizedSectionList. - Add support for
accessibilityRelationshipandaccessibilityStateprops (d57fb6e) - Add support for native "thin" scrollbars (e0412ac)
- Add support for
forwardedRefonTextandView; use this instead offindNodeHandleto get a reference to the native element. (React has deprecatedfindDOMNodein Strict Mode, and you can anticipate the same happening tofindNodeHandle.) - Add a
disabledprop toTextInputto support disabling the element (fc033a3) - Add
useWindowDimensionshook (df1b62c) - Add support for
Platform.isTesting(ad674e4) - Only inject the
ResponderEventPluginwhen client rendering (250ee3c)
Fixes
0.11.0
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.
Breaking changes
- CSS output has changed to better optimize browser layout times (9f860b8 and d4417e9)
- Remove
export defaultfrom the ESM entry point, to help with tree-shaking (69bd0f6) - Remove
ARTfrom the exports to reduce CJS bundle size (3d3ea9a) - Remove
resizeModestatic fromImage(49edcb2) - Replace
outlinewithoutline{Color,Style,Width}styles (f048d84) - Replace
animationNamewithanimationKeyframesstyle prop.
Deprecations
- The
classNameprop onViewandTextis deprecated and will be removed shortly (d50f630)
New features
- Add
TextInputsupport foronContentSizeChange, by @awinograd (67979b7) - Add
Textsupport fornumberOfLinesprop value greater than1. Only supported in WebKit and Blink browsers; limited localization support (f048d84)
Fixes
- Organize unimplemented modules in directories to help reduce CJS build size, by @EvanBacon (2a418be)
- Fix the
NativeEventEmitterimplementation, by @EvanBacon (9ce2b5b) - Allow text shadow to be set if only a
textShadowBlurandtextShadowColorare provided, by @skahack (cf7b020) - Fix animation style prop types.
- Fix use of
maxWidthwithTextusingnumberOfLinesprop. - Passing
nullvalues for style props now produces improved compatibility with React Native rendering.
Appendix
- StyleSheet refactor reduces browser layout times up to 30% in the stress tests.
- StyleSheet refactor reduces HTML payload size for SRR, e.g., the size of the HTML produced by the Twitter PWA's home timeline screen is reduced from 25.56 KB to 21.35 KB (-16%) gzipped.
0.10.0
This release includes accessibility, measurement, performance and reliability improvements.
Breaking changes
- The measurements provided by
onLayouthave 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. (93eb3f0) TextInputevents no longer include thewhichproperty. (8925bf7)
New features
- Support for the new
accessibilityRoleandaccessibilityStatesprops (4040151)
Fixes
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.
- Fix a memory leak in the
applyLayoutregistry (ad188a7 by @comp615) - Only observe resizes for elements making use of the 'onLayout' prop which improves
ResizeObserverpolyfill performance (d31bdf2 by @comp615) - Cache the
Clipboard.isAvailable()value to avoid forced style calculation in Chrome (5855e55 by @comp615) - Improve the performance of the modality style helper (4b9a5fd and 1b7ce4e by @giuseppeg)
- Only call
node.getBoundingClientRectifnativeEvent.location{X,Y}is accessed (40c433c by @hushicai) - Improve the performance of the style resolver for registered styles (2b77bfd by @sayrer)
0.9.0
0.8.0
This release provides compatibility with the vast majority of React Native v0.55.
Breaking changes
- Use of the responder events on a link element will now prevent the browser's default click behavior #970. (c336995)
- The props passed to ReactDOM are now whitelisted #898. (e0f010d)
- A jest preset is included in the
react-native-webpackage and should be used in place of the previous snapshot serializer. (8f0c39c) StyleSheet.hairlineWidthis now always1due to browser rounding errors. (3f8624e)Imageis no longer draggable by default. (0eae7be)Imagedecoding is async when possible, no longer usesrequestIdleCallbackinternally #764. (b8f54f6)LinkingAPI updates the application document's URL and supports deep-links. (0ee3310)- Export basic stubs for platform-specific modules that may be imported (but not rendered / called) in files running on web. (cf43ffd)
New features
ImagesupportsblurRadiusandtintColor, as well as correctly applying shadows to image pixels. (3153cd8)Textsupport fortextDecoration{Color,Style}styles. (f62ed22)Sharesupport (using WebShare API.) (10407f3)SwipeableFlatListsupport. (b299eb6)SwipeableListViewsupport. (b299eb6)SectionListsupport. (377f23f)FlatListsupport. (fc0b814)ScrollViewsupportsstickyHeaderIndices#434. (bb66639)DeviceInfobasic support. (206a236)LayoutAnimationbasic support. (cb545b0)NativeEventEmittersupport. (ea744fe)AlertAPI stub. (19b356a).Animatedupdate. (f254c8e)ListViewupdate. (5fcb36f)babel-plugin-react-native-webcan be configured to rewrite paths to either the CommonJS or ESModule exports #961. (026a92f)
Fixes
- Shadow style props are resolved as per React Native. (a40521f and da38e87)
Clipboardpreserves line breaks in original source #979. (14f7dfd)ImageimplementsresizeMode=center|repeatas per React Native. (9fb818c)NativeModulesincludesUIManagerproperty. (bfaca05)UIManagermeasurement tasks don't block the main thread. (b4e3427)Imagelayout in Firefox. (a82cfbe)Imageloading callbacks are correctly called when rendering an image assumed to be in the browser cache. (d5c6b98)Imagedoesn't throw error when loading an empty string source #962. (16b2fb9)- Add
targetproperty toonLayoutevent object. (0816c40) TextInputallowsnumbers-and-punctuationkeyboardType. (2756ab4)InteractionManagerbasic support improvements. (f684a36)ScrollViewis scrollable when horizontal and combined withRefreshControl. (c003604)AppStatedoesn't throw an error formemoryWarningevent. (4bc16fa)Vibrationincludes a default pattern. (2237777)ImageBackgroundnow works with<Text>children. (6a22528)processColoris now compatible with React Native. (ff5a928)- All CommonJS exports in the package can be imported without adding
.defaultto the require statement. (61bf7e7) - Fix issues related to webpack bundling of modules mixing
importandmodule.exports. (e317062)
0.7.0
Breaking changes
- ES modules are now exported and the package is labelled
sideEffect:false. Babel plugin is legacy. (c4864f5) - Fixes and potential breaking changes to the Responder system. The
ResponderEventPluginnow rejects browser emulated mouse events that occur after touch events. This fixes several issues, but it's possible that you may have depended on the previously incorrect behaviour #835 #888 #932. (edc99e7) - Remove erroneous
NetInfo.isConnected.getConnectionInfo()API. (8b1e6f8)
New features
- Support for CSP policy requiring
nonceon<style>. (ee5e800) - Mark focusable DOM nodes with 'data-focusable' for integration with TV focus libraries #827. (e8f2c98)
Fixes
0.6.0
Improvements to layout when ResizeObserver is available, and improved consistency with React Native behaviors.
Breaking changes
AppRegistrycontainer is no longer absolutely positioned. (a9cacb2)- The
onLayoutprop is now called when elements resize (ifResizeObserveris supported in the rendering environment). (5a04d07) - Layout measurements are now performed synchronously in the current frame. (a67bf0f)
react-artmust now be installed as peer dependency. (ce89b7e)
New features
AppRegistrynow allows you to define a render callback (web-only feature). (7a3a9a5)AppRegistryincludes provider methods from React Native:setComponentProviderInstrumentationHookandsetWrapperComponentProvider. (b96dd66)- Experiment support for
VirtualizedListfrom React Native. (9427eea)
Fixes
Textpress event no longer propagates. (1a225bc)createElementno longer overrides a provided function component. (cf26126)- Fix the consistency of
nativeEvent.location{X,Y}values between touch and mouse events. (2050730) SafeAreaViewnow includes inset padding for Safari iOS. (4c59343)Picker.Itemsupports thecolorprop but whether it is applied depends on browser support. (1aec803)- Fix the reliability of font styles resolution. (23fa663)
0.5.0
New features for styling LTR/RTL applications. Improvements to mouse support in the Responder Event system. Relicensed under the MIT license to match the relicensing of React Native.
Breaking changes
- Potentially breaking change for web-only apps depending on bugs in the Responder Event System that have been fixed in this release. The
ResponderEventPluginno longer extracts anymouse{move,up}events unless a press is active, and no longer extracts any events triggered by the middle/wheel/right button. (9ee89bc)
New features
StyleSheetsupports new style properties and values that automatically account for the writing direction (as introduced in React Native 0.51.0), e.g.,margin{End,Start}andtextAlign: "end" | "start". (b754776)I18nManagersupportsdoLeftAndRightSwapInRTLandswapLeftAndRightInRTL(swap: boolean)to query and control the BiDi-flipping of left/right properties and values. For example, you may choose to useendto position elements relative to the writing direction, and then disable left/right swapping in RTL so thatleftwill always be left. (92794cd)TextInputnow includes arrow keys inonKeyPress#791. (73b459e)
Fixes
- Account for scroll offsets in
measureandmeasureInWindowinstance methods #702. (399f465) Touchablepress events are not triggered on right-click #719. (9ee89bc)PanResponderonly firesmouse{move,up}events when a press is active #701. (9ee89bc)onResponderGrantis not fired twice on touch devices #802. (893963a)Imagesupport for base64 SVG data. (31db333)Imageupdates tosourceare correctly rendered if the initialsourcevalue wasundefined#811. (748b2d0)TextInputhas correct default font styles. (b28cbbb)TextsupportsfontVariantstyle #824. (6d90818)StyleSheetacceptsspace-evenlyvalue forjustifyContent. (7265736)- Style flex properties can be set with
setNativeProps. (00c9dc4) - New development warning for bad style values that include
!important. (9fe089c) babel-plugin-react-native-webonly rewrites import paths for known exports #822. (a53372c)
0.4.0
New StyleSheet features and SSR improvements
Breaking changes
StyleSheet.create()no longer eagerly resolves and injects styles at boot-time. (2ad710d)- Server-side rendering no longer accumulates styles across requests. (240cf7e)
- The return type of
AppRegistry.getApplication()has changed. (240cf7e) StyleSheet.getStyleSheets()has been removed; useAppRegistry.getApplication().
New features
- Add support for
TextInputpropplaceholderTextColor. (31d428a) - Add support for defining CSS keyframes in
animationNamestyle. (998e275)
Fixes