React Native Web Versions Save

This release provides compatibility with React DOM v16.5.1

Breaking changes

• Requires React 16.5.1 #1096. (506dba933ce69830feaace08aee85c38ce3e59fb)

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. (c33699595281416d67faa1d380b7dba812bd8ebe)
• The props passed to ReactDOM are now whitelisted #898. (e0f010da477ceb14bcedaa5a22e58868331d3138)
• A jest preset is included in the react-native-web package and should be used in place of the previous snapshot serializer. (8f0c39c2fe78ea487996d407d37e7f45415d6097)
• StyleSheet.hairlineWidth is now always 1 due to browser rounding errors. (3f8624e25f644c305e923a6776acabc2f99e70a4)
• Image is no longer draggable by default. (0eae7bed2e53c009294752e8ab2e5f57c463f4a6)
• Image decoding is async when possible, no longer uses requestIdleCallback internally #764. (b8f54f61f05bd84228050d7efd0919f5ababce24)
• Linking API updates the application document's URL and supports deep-links. (0ee3310290f7df59ed6e4910e4af1412fc17afe1)
• Export basic stubs for platform-specific modules that may be imported (but not rendered / called) in files running on web. (cf43ffd7003431f9839d1f6489c76fc6b2284e3e)

New features

• Image supports blurRadius and tintColor, as well as correctly applying shadows to image pixels. (3153cd8213f393bd6e8f22a027b278b40293778e)
• Text support for textDecoration{Color,Style} styles. (f62ed22a14f1482e81b2b7aba4d7288a4af6e21c)
• Share support (using WebShare API.) (10407f3aa261d1b841bbe33188f70ffd9f5634bf)
• SwipeableFlatList support. (b299eb6c5913ef972990d1a73d6c2a0d555767da)
• SwipeableListView support. (b299eb6c5913ef972990d1a73d6c2a0d555767da)
• SectionList support. (377f23f72547a6f211e94d9b6965ec5f97351588)
• FlatList support. (fc0b81416a7114d995db2c192cf63a10077173c5)
• ScrollView supports stickyHeaderIndices #434. (bb6663951920841bde6db757efd53454c4e9d772)
• DeviceInfo basic support. (206a236df24cbb9f94548afb25ebdaad3c5010ad)
• LayoutAnimation basic support. (cb545b0daccd9625384bb61a558ed5fab9d2a636)
• NativeEventEmitter support. (ea744fe7809b82662e870da332b9599732b6672a)
• Alert API stub. (19b356aaea2b936696c96fc9a4fec8ecd175bd68).
• Animated update. (f254c8eae61f7afc35be886f2e7c3b8f31966731)
• ListView update. (5fcb36fc217bf43b0b74b4a25708370a2a22eb1c)
• babel-plugin-react-native-web can be configured to rewrite paths to either the CommonJS or ESModule exports #961. (026a92fd53bb8625d29357991ce973f2ba04b5d3)

Fixes

• Shadow style props are resolved as per React Native. (a40521f4852538030347f30d73eb837f518e2a29 and da38e87b50553156b6a70149942d59740d475e8a)
• Clipboard preserves line breaks in original source #979. (14f7dfd515ffd46d823eaefa8072f17ab2b6169e)
• Image implements resizeMode=center|repeat as per React Native. (9fb818cfd42fb314a3a44ab67f4312aa64041dab)
• NativeModules includes UIManager property. (bfaca0557bf7df669744a1df8f99e0165e5bdc84)
• UIManager measurement tasks don't block the main thread. (b4e3427fea9bd943e3b3be13def0f4ffb3df917c)
• Image layout in Firefox. (a82cfbe5043cb3934efddefcd17c9dd17f67b361)
• Image loading callbacks are correctly called when rendering an image assumed to be in the browser cache. (d5c6b9834007f7db9452b53bd4ff98586ee88674)
• Image doesn't throw error when loading an empty string source #962. (16b2fb9bd777e94fff6ff83bf270f2e6e7f42912)
• Add target property to onLayout event object. (0816c407904e430ddbd4fdc13373ed3e2f25b647)
• TextInput allows numbers-and-punctuation keyboardType. (2756ab49c3dea19314ce9e19251719874723492b)
• InteractionManager basic support improvements. (f684a3656e43e050588f08e4aa597efc61837b98)
• ScrollView is scrollable when horizontal and combined with RefreshControl. (c00360491b6f0658ec8f33c2f59349794646b27a)
• AppState doesn't throw an error for memoryWarning event. (4bc16fa3eb76048b600b0fc8a07631914d765875)
• Vibration includes a default pattern. (22377773415f1ac96e05523304d2d386ef5ad5ee)
• ImageBackground now works with <Text> children. (6a2252891a95f707cea5d53d6ded0b55b9dd6144)
• processColor is now compatible with React Native. (ff5a928a5067859b289098cd6a8853b635841805)
• All CommonJS exports in the package can be imported without adding .default to the require statement. (61bf7e76b0ed87b36deab25e7d40e09f4cd0a818)
• Fix issues related to webpack bundling of modules mixing import and module.exports. (e3170623f194081e89d13a7f3373342b8aa0af1d)

Breaking changes

• ES modules are now exported and the package is labelled sideEffect:false. Babel plugin is legacy. (c4864f5d178767e4542039921108c50311ce659b)
• 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. (edc99e79eb8790d70e0f8be406d68058f13adf08)
• Remove erroneous NetInfo.isConnected.getConnectionInfo() API. (8b1e6f816f3b2806b9fabdbaa519ea737c9b08bc)

New features

• Support for CSP policy requiring nonce on <style>. (ee5e80064f08e83f0cbcd95c77d3b797029a5262)
• Mark focusable DOM nodes with 'data-focusable' for integration with TV focus libraries #827. (e8f2c987864562bda11bec6611db98b7239688d6)

Fixes

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

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

Breaking changes

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

New features

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

Fixes

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

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. (9ee89bc7f7e0548a930d37087caa63636d490fa2)

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". (b75477637385e46037014cbec5b364f085821c3b)
• 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. (92794cdc9f967f84ba6108568a6d60f17640a14a)
• TextInput now includes arrow keys in onKeyPress #791. (73b459e770d40831d044cebb34f15cd4e22e66f3)

Fixes

• Account for scroll offsets in measure and measureInWindow instance methods https://github.com/necolas/react-native-web/issues/702. (399f465e591ae56d3426f6d12eab44c791a1c4d6)
• Touchable press events are not triggered on right-click https://github.com/necolas/react-native-web/issues/719. (9ee89bc7f7e0548a930d37087caa63636d490fa2)
• PanResponder only fires mouse{move,up} events when a press is active https://github.com/necolas/react-native-web/issues/701. (9ee89bc7f7e0548a930d37087caa63636d490fa2)
• onResponderGrant is not fired twice on touch devices #802. (893963a79932a4faa79432690858f3504e3c2ba1)
• Image support for base64 SVG data. (31db333ba307ad71995218eeddf05d3d3932c762)
• Image updates to source are correctly rendered if the initial source value was undefined https://github.com/necolas/react-native-web/pull/811. (748b2d0f3fc49ff66c18b6e7d463840a92245892)
• TextInput has correct default font styles. (b28cbbb37ece3476a40370d359e982b4ba563bbb)
• Text supports fontVariant style #824. (6d908189a7da91626aa8932f819ba9b37c8eec19)
• StyleSheet accepts space-evenly value for justifyContent. (7265736545b58e7f6c04639c7abd189bff9640c9)
• Style flex properties can be set with setNativeProps. (00c9dc42364af97318feca03c96e68704b7df23b)
• New development warning for bad style values that include !important. (9fe089ca21064dc8a7c7216bb57ee31aad6d9caa)
• babel-plugin-react-native-web only rewrites import paths for known exports #822. (a53372ceb3a5ce9707e7a8a60139434025df5722)

New StyleSheet features and SSR improvements

Breaking changes

• StyleSheet.create() no longer eagerly resolves and injects styles at boot-time. (2ad710d83a6d05a4b10bdcfc0b464dd619002cb2)
• Server-side rendering no longer accumulates styles across requests. (240cf7e05f05a622621d0ee5f58380a35d28ab44)
• The return type of AppRegistry.getApplication() has changed. (240cf7e05f05a622621d0ee5f58380a35d28ab44)
• StyleSheet.getStyleSheets() has been removed; use AppRegistry.getApplication().

New features

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

Fixes

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

React Native for Web is now structured as a monorepo (3026465ae39b1708fb1f5f48212a81eb3ec65180). An additional benchmark introduced by the emotion project has been included; it stress-tests style updates to mounted trees.

Breaking changes

• The Babel plugin must now be installed separately: babel-plugin-react-native-web. Depending on react-native-web/babel will no longer work.
• The package's internal paths have changed; if you were reaching into react-native-web/dist those modules have moved.

Fixes

• Fix babel rewrite for import/export/require react-native-web. (209bd3aee1e6ed115b9c0c5b3afe2f7cefccba9f)
• Fix babel rewrite when importing CheckBox. (87fdd6c73bf7365fd8f22acb619b71373a6deea7).
• Fix RTL flipping of styles set via setNativeProps. (85aaa39206aedd90b6c2a282132b0b73fa553022)
• Prevent ReactDOM hydration warnings in development. (41d90e0238a808fca9536e1d123e0ce982fa9ca6)
• Fix React warnings when using the hitSlop prop. (af47d5f414ed2155180acbda4dff30ccbc5ac103)
• Fix AppRegistry.unmountApplicationComponentAtRootTag. (6f10f6be9c3896a2124c17e9ccd0f8eafb9b99f4)
• Fix StyleSheet.hairlineWidth error when document.body is missing in the client. (6d9154196e510219d5b39e5d2bebca7021d50b89)
• Fix development warnings for more native-only props. (fd6ccbcfb3d785c9c3aff5421d2b9da4f4cde4d6)
• Apply "monospace" font-family hack when needed. (b6ef1d3a362c4ea6547c1670e771941a243e8c16)

Breaking changes

• The Image component no longer accepts child content. Use ImageBackground as a replacement. (541d2458fb9d6e2cd0522dd3d7ae8a1ff4d65d70)

New features

• Add ImageBackground component. (e8eab9b3eca65d2a480455c6507830ac3a46261b)
• Add Picker and Picker.Item components. (b7e970f4e6b48ee2c063d01914df1df4556c7d94)
• Add CheckBox component. (6de892c92bad455960314c54fca632518f75a418)
• Add ART components. (321051b72366666ba6e28985cff017cb6d3c506d)
• Add SafeAreaView shim for compatibility with React Native. (034108a2a07e73e2de95824cb91f65275e3e3c85)
• Add StyleSheet.compose. (1a20fcfce6b802041e93de9274dbf136976c7286)
• Sync the Animated implementation with React Native to pick up new additions to the API. (0dfe319d412bd48c7861db0db8a83439e5b0a974).
• Sync the PanResponder implementation with React Native. (f96d7b868f6ba3d2dc9df0bb5d49618878483374)

Fixes

• Use ReactDOM.hydrate in AppRegistry.runApplication to allow clients to boot using HTML from server-rendered apps (82c044ee3379a655ea28bb61f6e239709345cad8).
• Fix AppRegistry.getApplication style element key warning for server-side rendering. (f1ce6c2acbdec24dcb73a9b84497592b34f7e1ca)
• Fix imports of render and unmountComponentAtNode when using the Babel plugin. (9bcc67e73a5a83f1551c47598be7bf65c3a812e1)
• Fix error when testing Touchables using react-test-renderer. (5f68542529ad26dbf0f220e42695a6d8a4d72384)
• Fix animated scrolling in ScrollView. (556dc8926eabe07b3bd20a29f679802ae0a12ab0)
• Fix the value of StyleSheet.hairlineWidth on retina screens. (495defd69b0e47460c043d79d5b2bd48e3671681)

Compatible with React/ReactDOM 16

• StyleSheet now resolves React Native styles to class names and caches results (13x faster than 0.0.61)[https://github.com/necolas/react-native-web/commit/d87f71ebc11d4ac986ec39a039ec4f7c96916e7d]
• ActivityIndicator and ProgressBar now use CSS animations instead of Animated. [https://github.com/necolas/react-native-web/commit/cfc56a1354960260d6e7d40e401e7b1ba43e3a7e, https://github.com/necolas/react-native-web/commit/ea75cced133358eccda1dd83292784e554afc28c]
• CSS animation properties are supported; there is no public API for creating CSS keyframes in JS.