{"id":88,"date":"2020-05-19T00:00:02","date_gmt":"2020-05-19T07:00:02","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/react-native\/?p=88"},"modified":"2022-11-17T00:54:24","modified_gmt":"2022-11-17T08:54:24","slug":"2020-05-19-rn4m-updates","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/react-native\/2020-05-19-rn4m-updates\/","title":{"rendered":"Announcing React Native for macOS and more"},"content":{"rendered":"<p>We&#8217;re excited to announce our first preview release aligning with <a href=\"https:\/\/reactnative.dev\/blog\/2020\/03\/26\/version-0.62\">React Native 0.62<\/a>!<\/p>\n<p>As a preview release, we will try our best not to make breaking changes, but still have a few bumps to sort out before we&#8217;re ready for release. You can now start trying out the <a href=\"https:\/\/www.npmjs.com\/package\/react-native-windows\/v\/0.62.0-preview.6\">0.62-preview of React Native for Windows<\/a>!<\/p>\n<p>A similar upgrade for <a href=\"https:\/\/github.com\/facebook\/react-native\/compare\/master...microsoft:fb62merge\">React Native for macOS is in progress<\/a>. Stay tuned for the next update!<\/p>\n<h2>What&#8217;s New?<\/h2>\n<ul>\n<li>New Features from React Native 0.62, like <a href=\"https:\/\/reactnative.dev\/docs\/appearance\"><code>Appearance<\/code><\/a> and <a href=\"https:\/\/reactnative.dev\/docs\/usecolorscheme\"><code>useColorScheme()<\/code><\/a> hooks<\/li>\n<li>Visual Studio V142 build tools are now used<\/li>\n<li>Better RTL support<\/li>\n<li>New native module APIs (<code>REACT_INIT<\/code> and <code>REACT_FUNCTION<\/code>)<\/li>\n<li>Improved diagnostics in command line tools<\/li>\n<li>Initial ARM64 support<\/li>\n<li>Experimental support for binary distribution of React Native Windows<\/li>\n<li>Bug fixes and reliability improvements<\/li>\n<\/ul>\n<h2>React Native for macOS<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/react-native\/wp-content\/uploads\/sites\/76\/2022\/11\/eloy_rn4m_preview_full.png\" alt=\"react-native-mac\" \/><\/p>\n<p>One of our biggest announcements recently is our addition and full support of the <a href=\"https:\/\/microsoft.github.io\/react-native-windows\/docs\/rnm-getting-started\">React Native for macOS<\/a> extension! We are super excited to be developing React Native support for macOS along side our Windows effort.<\/p>\n<p>We have an official <a href=\"https:\/\/www.npmjs.com\/package\/react-native-macos\">npm package out for React Native for macOS<\/a> and a <a href=\"https:\/\/github.com\/microsoft\/react-native-macos\">repo available<\/a> to the public to follow and contribute to &#8211; we hope to see some really cool React Native apps out there in the future that can now truly run everywhere.<\/p>\n<h2>React Native on the Surface Duo<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/04\/reactnative-emulator-800.png\" alt=\"react-native-duo-emu\" \/><\/p>\n<p>React Native runs on the Surface Duo!<\/p>\n<p>This is a little bit to be expected, as React Native works great today with Android, but just running on the new Surface Duo device isn&#8217;t enough. We&#8217;ve also added support for awareness of the dual-screen device and its status through shipping two important APIs: <strong>TwoPaneView<\/strong> and <strong>DeviceInfoModule<\/strong>.<\/p>\n<p>To learn more about developing on the Surface Duo with React Native, <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/build-react-native-apps-for-microsoft-surface-duo\/\">go check out our latest blog post<\/a> detailing the experience.<\/p>\n<h2>New Modules Supported!<\/h2>\n<p>We&#8217;ve begun addressing the Windows community module support gap &#8211; starting with contributions from us! This includes <a href=\"https:\/\/github.com\/react-native-community\/react-native-webview\"><strong>WebView<\/strong><\/a> and <a href=\"https:\/\/github.com\/react-native-community\/react-native-camera\"><strong>Camera<\/strong><\/a>, <a href=\"https:\/\/github.com\/react-native-community\/react-native-picker\">Picker<\/a>, <a href=\"https:\/\/github.com\/react-native-community\/async-storage\">AsyncStorage<\/a>, <a href=\"https:\/\/github.com\/react-native-community\/react-native-netinfo\">NetInfo<\/a>, and <a href=\"https:\/\/github.com\/react-native-community\/datetimepicker\">DateTimePicker<\/a>.<\/p>\n<p>On top of that initial set, we&#8217;re also looking at a whole bunch more that we know are awesome and essential to have when building a React Native app. Check out the full list of what we&#8217;re tracking and planning to tackle next on our <a href=\"https:\/\/github.com\/microsoft\/react-native-windows\/projects\/23\">GitHub Project Board<\/a>.<\/p>\n<p>Lastly, in addition to contributing to these community modules personally, we want to help bootstrap a robust test infrastructure and enhance reliability for consumers of these modules. We have started this process by adding CI to <code>react-native-webview<\/code> repo. Stay tuned for more!<\/p>\n<h3>WebView<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/react-native\/wp-content\/uploads\/sites\/76\/2022\/11\/final_demo_gif.gif\" alt=\"react-native-webview-module\" \/><\/p>\n<p>The WebView module sets you up with the barebones web hosting tech that&#8217;s available nativly on the device you&#8217;re targetting. This module has been updated to support Windows and macOS.<\/p>\n<blockquote>\n<p>To get your own version of the app in this short clip, check out the <a href=\"https:\/\/github.com\/microsoft\/react-native-windows-samples\/tree\/main\/samples\/rssreader\">RssReader sample<\/a>.<\/p>\n<\/blockquote>\n<h3>Camera<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/react-native\/wp-content\/uploads\/sites\/76\/2022\/11\/react-camera.png\" alt=\"react-native-camera-module\" \/><\/p>\n<p>The Camera module is another big step towards making it easier to give you unfettered access to native APIs.<\/p>\n<p>Just like on mobile, when you define a CameraFeed module, and the device you&#8217;re running the app on has a camera attached, the component will hookup to the correct native APIs to give you access to the hardware needed to snap sweet pics.<\/p>\n<h3>Picker<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/react-native\/wp-content\/uploads\/sites\/76\/2022\/11\/picker-windows-module.png\" alt=\"react-native-picker-module\" \/><\/p>\n<h3>AsyncStorage<\/h3>\n<p>Arguably one of the most important modules to have available to you when building a React Native app, AsyncStorage is now fully supported on Windows and macOS.<\/p>\n<h3>NetInfo<\/h3>\n<p>An important network API for hooking up to and checking the health of your connection. As React Native is a JavaScript-based framework the need for an API such as this to be readily available on all platforms is very valuable &#8211; our recent release for this module supports both Windows and macOS.<\/p>\n<h3>DateTimePicker<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/react-native\/wp-content\/uploads\/sites\/76\/2022\/11\/windows_datetimepicker-module.png\" alt=\"react-native-datetimepicker-module\" \/><\/p>\n<p>A unique component that in many ways defines the design of the platform you&#8217;re using, the DateTimePicker community control has been updated to support Windows as well now.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re excited to announce our first preview release aligning with React Native 0.62! As a preview release, we will try our best not to make breaking changes, but still have a few bumps to sort out before we&#8217;re ready for release. You can now start trying out the 0.62-preview of React Native for Windows! A [&hellip;]<\/p>\n","protected":false},"author":103906,"featured_media":156,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[2,3],"class_list":["post-88","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-react-native","tag-react-native-windows"],"acf":[],"blog_post_summary":"<p>We&#8217;re excited to announce our first preview release aligning with React Native 0.62! As a preview release, we will try our best not to make breaking changes, but still have a few bumps to sort out before we&#8217;re ready for release. You can now start trying out the 0.62-preview of React Native for Windows! A [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/users\/103906"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/media\/156"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/react-native\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}