Skip to content

Releases: necolas/react-native-web

0.13

26 Jun 22:17

Choose a tag to compare

This release includes many significant changes and improvements.

  1. 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.
  2. 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.
  3. 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 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.
  • All the components are implemented as function components, so using 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.
  • The 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.
  • The 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.
  • 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. Use dataSet instead. For example, dataSet={{ someName: 1 }}.
  • The onLayout prop now requires a ResizeObserver polyfill to work, and does not fallback to window resize events.
  • 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 accessibilityRelationship prop. This prop was not added to React Native. Continue using aria-* props for now.

New features

  • Added View support for accessibilityValue.
  • Added the Pressable component.
  • Add the Appearance API and useColorScheme hook.

Fixes

  • The active touch responder will now be terminated when the body scrolls, context menu appears, etc.
  • Performance improvements for Touchables.
    The onPress event can now be used to preventDefault the native click behavior (this is no longer done automatically)
  • Fixes Image support for variable resolution images (requires bundler integration).
  • Fixes TextInput support for onContentSizeChange to 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

28 Jan 18:19

Choose a tag to compare

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

  • createElement is renamed to unstable_createElement and 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 accessibilityStates prop (d57fb6e)
  • Remove deprecated className prop and forwarding of arbitrary props from View and Text to the host DOM element.
  • Remove deprecated accessibilityTraits and accessibilityComponentType props (ae94551)
  • Remove resizeMode static from Image (c35f849)
  • Remove placeholderTextColor from unstable_createElement props. Instead, this is now exposed as a style property (287251a)
  • Update Switch prop 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 accessibilityRelationship and accessibilityState props (d57fb6e)
  • Add support for native "thin" scrollbars (e0412ac)
  • Add support for 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.)
  • Add a disabled prop to TextInput to support disabling the element (fc033a3)
  • Add useWindowDimensions hook (df1b62c)
  • Add support for Platform.isTesting (ad674e4)
  • Only inject the ResponderEventPlugin when client rendering (250ee3c)

Fixes

  • Fix support for disabling scroll in ScrollView for touch interactions (e22f0be)
  • Fix support for autoComplete on TextInput (b10711b)
  • Remove UA default margin from TextInput (5334a4f)

0.11.0

13 Mar 01:15

Choose a tag to compare

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 default from the ESM entry point, to help with tree-shaking (69bd0f6)
  • Remove ART from the exports to reduce CJS bundle size (3d3ea9a)
  • Remove resizeMode static from Image (49edcb2)
  • Replace outline with outline{Color,Style,Width} styles (f048d84)
  • Replace animationName with animationKeyframes style prop.

Deprecations

  • The className prop on View and Text is deprecated and will be removed shortly (d50f630)

New features

  • Add TextInput support for onContentSizeChange, by @awinograd (67979b7)
  • Add Text support for numberOfLines prop value greater than 1. 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 NativeEventEmitter implementation, by @EvanBacon (9ce2b5b)
  • Allow text shadow to be set if only a textShadowBlur and textShadowColor are provided, by @skahack (cf7b020)
  • Fix animation style prop types.
  • Fix use of maxWidth with Text using numberOfLines prop.
  • Passing null values 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

30 Jan 22:37

Choose a tag to compare

This release includes accessibility, measurement, performance and reliability improvements.

Breaking changes

  • The measurements provided by 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. (93eb3f0)
  • TextInput events no longer include the which property. (8925bf7)

New features

  • Support for the new accessibilityRole and accessibilityStates props (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 applyLayout registry (ad188a7 by @comp615)
  • Only observe resizes for elements making use of the 'onLayout' prop which improves ResizeObserver polyfill 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.getBoundingClientRect if nativeEvent.location{X,Y} is accessed (40c433c by @hushicai)
  • Improve the performance of the style resolver for registered styles (2b77bfd by @sayrer)

0.9.0

17 Sep 18:01

Choose a tag to compare

This release provides compatibility with React DOM v16.5.1

Breaking changes

0.8.0

04 Jun 18:58

Choose a tag to compare

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-web package and should be used in place of the previous snapshot serializer. (8f0c39c)
  • StyleSheet.hairlineWidth is now always 1 due to browser rounding errors. (3f8624e)
  • Image is no longer draggable by default. (0eae7be)
  • Image decoding is async when possible, no longer uses requestIdleCallback internally #764. (b8f54f6)
  • Linking API 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

  • Image supports blurRadius and tintColor, as well as correctly applying shadows to image pixels. (3153cd8)
  • Text support for textDecoration{Color,Style} styles. (f62ed22)
  • Share support (using WebShare API.) (10407f3)
  • SwipeableFlatList support. (b299eb6)
  • SwipeableListView support. (b299eb6)
  • SectionList support. (377f23f)
  • FlatList support. (fc0b814)
  • ScrollView supports stickyHeaderIndices #434. (bb66639)
  • DeviceInfo basic support. (206a236)
  • LayoutAnimation basic support. (cb545b0)
  • NativeEventEmitter support. (ea744fe)
  • Alert API stub. (19b356a).
  • Animated update. (f254c8e)
  • ListView update. (5fcb36f)
  • babel-plugin-react-native-web can 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)
  • Clipboard preserves line breaks in original source #979. (14f7dfd)
  • Image implements resizeMode=center|repeat as per React Native. (9fb818c)
  • NativeModules includes UIManager property. (bfaca05)
  • UIManager measurement tasks don't block the main thread. (b4e3427)
  • Image layout in Firefox. (a82cfbe)
  • Image loading callbacks are correctly called when rendering an image assumed to be in the browser cache. (d5c6b98)
  • Image doesn't throw error when loading an empty string source #962. (16b2fb9)
  • Add target property to onLayout event object. (0816c40)
  • TextInput allows numbers-and-punctuation keyboardType. (2756ab4)
  • InteractionManager basic support improvements. (f684a36)
  • ScrollView is scrollable when horizontal and combined with RefreshControl. (c003604)
  • AppState doesn't throw an error for memoryWarning event. (4bc16fa)
  • Vibration includes a default pattern. (2237777)
  • ImageBackground now works with <Text> children. (6a22528)
  • processColor is now compatible with React Native. (ff5a928)
  • All CommonJS exports in the package can be imported without adding .default to the require statement. (61bf7e7)
  • Fix issues related to webpack bundling of modules mixing import and module.exports. (e317062)

0.7.0

19 May 01:15

Choose a tag to compare

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. TheResponderEventPlugin now 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 nonce on <style>. (ee5e800)
  • Mark focusable DOM nodes with 'data-focusable' for integration with TV focus libraries #827. (e8f2c98)

Fixes

  • Fix onLayout without ResizeObserver #911 #941. (dcdf146)
  • Fix findNodeHandle import in VirtualizedList. (02b6f3f)
  • Flex styles can be applied as inline styles #798. (1e8577f)
  • Remove browser UI from numeric TextInput in Firefox #900. (96c3f09)

0.6.0

15 Apr 23:14

Choose a tag to compare

Improvements to layout when ResizeObserver is available, and improved consistency with React Native behaviors.

Breaking changes

  • AppRegistry container is no longer absolutely positioned. (a9cacb2)
  • The onLayout prop is now called when elements resize (if ResizeObserver is supported in the rendering environment). (5a04d07)
  • Layout measurements are now performed synchronously in the current frame. (a67bf0f)
  • react-art must now be installed as peer dependency. (ce89b7e)

New features

  • AppRegistry now allows you to define a render callback (web-only feature). (7a3a9a5)
  • AppRegistry includes provider methods from React Native: setComponentProviderInstrumentationHook and setWrapperComponentProvider. (b96dd66)
  • Experiment support for VirtualizedList from React Native. (9427eea)

Fixes

  • Text press event no longer propagates. (1a225bc)
  • createElement no longer overrides a provided function component. (cf26126)
  • Fix the consistency of nativeEvent.location{X,Y} values between touch and mouse events. (2050730)
  • SafeAreaView now includes inset padding for Safari iOS. (4c59343)
  • Picker.Item supports the color prop but whether it is applied depends on browser support. (1aec803)
  • Fix the reliability of font styles resolution. (23fa663)

0.5.0

20 Feb 00:07

Choose a tag to compare

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 ResponderEventPlugin no longer extracts any mouse{move,up} events unless a press is active, and no longer extracts any events triggered by the middle/wheel/right button. (9ee89bc)

New features

  • StyleSheet supports 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} and textAlign: "end" | "start". (b754776)
  • I18nManager supports doLeftAndRightSwapInRTL and swapLeftAndRightInRTL(swap: boolean) to query and control the BiDi-flipping of left/right properties and values. For example, you may choose to use end to position elements relative to the writing direction, and then disable left/right swapping in RTL so that left will always be left. (92794cd)
  • TextInput now includes arrow keys in onKeyPress #791. (73b459e)

Fixes

  • Account for scroll offsets in measure and measureInWindow instance methods #702. (399f465)
  • Touchable press events are not triggered on right-click #719. (9ee89bc)
  • PanResponder only fires mouse{move,up} events when a press is active #701. (9ee89bc)
  • onResponderGrant is not fired twice on touch devices #802. (893963a)
  • Image support for base64 SVG data. (31db333)
  • Image updates to source are correctly rendered if the initial source value was undefined #811. (748b2d0)
  • TextInput has correct default font styles. (b28cbbb)
  • Text supports fontVariant style #824. (6d90818)
  • StyleSheet accepts space-evenly value for justifyContent. (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-web only rewrites import paths for known exports #822. (a53372c)

0.4.0

07 Feb 00:37

Choose a tag to compare

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; use AppRegistry.getApplication().

New features

  • Add support for TextInput prop placeholderTextColor. (31d428a)
  • Add support for defining CSS keyframes in animationName style. (998e275)

Fixes

  • Fix Babel plugin rewrites in modules using require to load react-native. (21b3f39)
  • Remove UA controls from numeric text inputs in Firefox. (69d5373)