Building Apps for both Windows and Mac

Hello, everyone, and welcome! My name is Kiki St. Ong. I've been with Microsoft for about five years now on the Windows UI Platform Team and have recently been helping drive the React Native for Windows and Mac efforts with that team. I am Eloi Duran, or Eloi. I have been using React Native professionally since early 2016 and have joined the Microsoft Office team in December to help them out with their React Native efforts.

Today, we'll be giving you a brief, very brief talk about React Native for Windows and Mac and that effort. Today, we'll be talking about how to, sort of our focus around that, why we chose to add it, how to set up in Windows and Mac, and then Eloi will be taking us through a more in-depth look at installing that, installing a community module running on both Windows and Mac, and just sort of the dev experience there. Then I'll go over future modules and sort of how we want to support the community modules in the future with React Native. And then we will cover some resources and wrap up.

So, as many of you may know, React Native originally started out as a way to bring JavaScript-based apps cross-platform to both Android and iOS. Of course, we're always looking for ways to bring more developers to Windows, and we saw this as an opportunity, this framework as a great opportunity to entice web devs to experiment with the native Windows app development while still being able to utilize their skills and tools that they're used to. In adding support for Windows, there was a lot of gaps that we needed to fill in order to make it work great on our platform, so we added things like pen, mouse, and keyboard, that kind of support was added, as well as support for other Windows devices, like Xbox and dual screen. But as we were doing this work, we realized that there was actually a lot of crossover between what we were writing for Windows and that desktop experience and what macOS has. In fact, a lot of APIs, inputs, and even just general tools and functionality that we had written and enabled to work great for React Native for Windows matched very closely in behavior to what was needed to light up that same experience on Mac. So they took this realization as an opportunity to not only give back to the React Native community by driving the React Native for Mac effort, but also as a secondary opportunity to be a leader in the React Native space when it comes to cross-platform development for desktop experiences specifically. And that's what we're going to be focusing on today.

Now I'm going to pass this off to Eloy, who is going to show us how to do this in code. Thanks, Kiki. For the sake of time, because we have very little time, I'm going to be going through this as quickly as possible. So to create a macOS or Windows React Native application, we start with the normal template. You may also want to have an iOS, an Android application, etc. So those are all in the default template. This should not be new to anybody creating React Native applications already. So now we wait for the template to be downloaded. Great. And so now we can move on to adding the macOS bits. We do that using the npx React Native macOS init command. And before we continue, I'm going to already add another dependency, which is a dependency that has a native module that supports both macOS and Windows. Okay, let's go ahead and open this up in VS Code. As you can see, we've now added our macOS fork and also this native module.

Let's go ahead and get that building. First we'll need to install all the native bits, which is both React Native and the WebView. Then let's also start a packager. We can actually start the build as you are used to using mpx react-native and then run macOS. And there we go. As you saw, it was loading. You can see that here as well. And here we have the well-known launch screen of the React Native app.

Then let's open up the app.js and here we can, for instance, change some code. And as you know by now, React Native instant reloading, pretty sweet. But we also added the community web view module. So let's try using that instead. For that I'm just going to paste in some code that I've prepared, which imports the web view from the module and then just renders that web view. And it will just show the React Native Windows site.

Cool, so we can do the exact same thing on Windows. And here we'll be doing pretty much the same thing as before, except Windows is ahead a little bit, so we can actually use a newer version. So let's go ahead and create that. Again, that same project. And again, like before, we're going to add the Windows bit, so similar to before, except now it's React Native Windows in it. And again, like before, we're going to add the WebView native module. So, let's... I am not entirely used to Windows, so forgive me. Let's see, we need to open the solution in Visual Studio. Once in here, we're going to navigate to the solution and add an existing project which comes with the WebView package. Let's see, here we go. So we add that and then to the actual application, we add a reference to that project which is added to the product of that project. Okay. And finally, we're going to make a few code changes. Let's see, we're going to add include here, save that. And to the app file, we are going to add some initialization code.

Let's see, we should do that just before initialize component. Oh, here I go, command saving again. Cool, let's see, then I'm just going to save all, close this project. And then we can, as normal, run the React Native and then in this case, run the Windows command which will build all of the React Native Windows sources as well as the WebView package. Okay. And there we go, loading the bundle. And then, let's see, open this one here. And again, I'm going to just paste in the same code that we had before, Ctrl-S to save, which will retrigger and there we go. Cool. Back to you, Kiki. Awesome. Thanks, Eloy.

So, a few things that I want to sort of talk about as you saw Eloy set up the WebView demo is that you may be wondering, well, what about all the other awesome community modules that React Native has today and available for you. And I just wanted to let everybody know that we are tracking and working to enable a lot of the core and essential, as well as as we get further in the project, more and more community modules working for Windows and in turn working for Mac as well. So Windows comes first and Mac will follow closely after.

Lastly, there's some resources that I wanted to have everybody know about so that they can follow us more closely. Obviously, the React Native site, that's the origin. We also are our own React Native for Windows repo, as well as our Doc site, and we do have a DualScreen repo. We didn't talk about DualScreen today, but we have some information up there if you're curious about it, and our Twitter handle, as well as some tools and stuff that we recommend if you're developing in React Native for Windows. Other than that, that's it for our talk. And I thank everybody for coming, and I look forward to seeing what you create.