In this episode Robin and Mazen hold down the fort while Jamon is gone and talk about their experiences with using React Native for desktop apps.
In this episode Robin and Mazen hold down the fort while Jamon is gone and talk about their experiences with using React Native for desktop apps.
This episode brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast, brought to you by Windows 11. Our new taskbar is completely original and not based on anything. Episode 237, React Native on Desktop.
Robin Heinze:
Hey, Mazen, did you catch Reactathon in the park yesterday?
Mazen Chami:
I listened to a couple talks. The most important one that I was really focused on were Gant and Jamon's talk about React Native.
Robin Heinze:
Ah, yes. Gant and Jamon did a really great talk at Reactathon yesterday about the future of React Native, AKA React Native Synergy.
Mazen Chami:
What, what.
Robin Heinze:
Funny story? I actually dared Gant to call it that on stage and he did, sort of.
Mazen Chami:
He did. He called it out. When I heard it, I was like, "Whoa."
Robin Heinze:
He called it out but in the context of it being a ridiculous name.
Mazen Chami:
Yeah. Yeah.
Robin Heinze:
So he said, "Some ridiculous name like React Native Synergy." I was like, "Well, technically, he fulfilled his end of the dare, but I don't think that's going to be the official name."
Mazen Chami:
We'll find out.
Robin Heinze:
Sad to say. But, yeah, Reactathon in the park. That was cool. It was, I think, one of the first in-person conferences since the pandemic. They decided to go for an outdoor venue.
Mazen Chami:
I thought that was cool. Great location. Great venue. And there were a lot of good talks, too. Just a lot of good people were there.
Robin Heinze:
Yeah, definitely.
Mazen Chami:
Some of the talks I listened to were very helpful, especially in regards to React 18 also coming out.
Robin Heinze:
Yep. Great keynote by Kent. C. Dodds. A lot of familiar faces. So I think we're excited to get back to in-person conferences pretty soon. I'm sure Jamon will have lots to tell about that whole experience when he gets back. But, obviously, he's not here for that reason because he's in the Bay Area for that. So it's just me and Mazen today. Of course, I'm Robin. I'm a senior software engineer here at Infinite Red. I live just west of Portland, Oregon with my husband and my two little kiddos. Of course, I'm joined by my synergistic cohost, Mazen.
Mazen Chami:
See what you did there.
Robin Heinze:
Mazen lives in Durham, North Carolina with his wife and his not-so-newborn son.
Mazen Chami:
No.
Robin Heinze:
How old's your son now?
Mazen Chami:
Nine weeks today.
Robin Heinze:
Nine weeks. Yeah. So he's getting out of the newborn phase. Mazen is also a senior React Native engineer here at Infinite Red. Of course, I should mention that this episode is sponsored by Infinite Red. Infinite Red is a premier React Native design and development agency located fully remote in the US and Canada. So if you're looking for React Native expertise for your next React Native project hit us up. You can learn more at our website, infinite.red/reactnative. And, of course, don't forget to mention that you heard about us through React Native Radio. Also, imagine working with Mazen and myself and the rest of the amazing team here. Who wouldn't want to? If you're a senior level React Native engineer in the US or Canada, go to careers.infinite.red. We'd love to hear from you. All right. Let's get into our topic for today, which is React Native on desktop.
Mazen Chami:
This is a cool topic. I'm excited about this one.
Robin Heinze:
Yeah. If you didn't know, React Native is not just iOS and Android. You probably did know that because we've talked a lot about React Native Web, React Native being also for web. But there are also many other. They're called out-of-tree platforms. I don't know where that phrase came from. That's just what the React Native docs call them. Out-of-tree platforms, which are maintained by other organizations besides React Native Core.
Mazen Chami:
We've also called them all-platforms, React Native all-platforms, on the podcast in the past.
Robin Heinze:
Ah.
Mazen Chami:
So stuff like tvOS also, iOS, Android, macOS, Windows, and I believe you could also develop on gaming consoles, so like Xbox.
Robin Heinze:
Oh, yeah. You could make mini-programs for the WeChat platform. WeChat is really huge in China, and they have integrated mini-apps, kind of like iMessage apps, I think. But there's a React Native platform for that.
Mazen Chami:
Just as a side note, too, I know I mentioned tvOS. You could also develop on Android TV. I know they're considered two different types of platforms, similar to how we have Android and iOS. It's the same on TV devices, but pretty much the same thing when you're building React Native.
Robin Heinze:
Fun fact. We literally just got an Apple TV two days ago in my household. It is amazing. I can't believe I have waited until now to get one. So maybe I'll have to try building some tvOS app.
Mazen Chami:
I will preface this talk with I have done a tvOS app in the past and now that I've... We'll get into what aspect of the macOS or Windows I did. tvOS was much easier to work with.
Robin Heinze:
Interesting. What's the development cycle like? How does that work?
Mazen Chami:
It's very similar to what we're about to get into, where there's a third-party package done by Doug Lowder that pretty much does the same thing that the React Native Windows and React Native macOS do, or similar to React Native Web, same way that works. That functions in the same aspect. Let's get into our topic a little bit deeper because it'll be very similar, but some of the issues we ran into-
Robin Heinze:
Gotcha.
Mazen Chami:
... I doubt you'll run into when it comes to tvOS. Again, tvOS is also still in development because it's brand new and there's not a lot of need or support for it as much as iOS or Android.
Robin Heinze:
So, specifically, as Mazen alluded, we're talking about desktop today, so macOS and Windows, which I would argue are probably two of the most prominent of the out-of-tree platforms after iOS, Android, web. Both of us actually went through the process of initializing and running a macOS app and a Windows app. Mazen did Mac, I did Windows. We're just going to talk about what that was like, what the challenges were, and, in general, what you might expect if you're going to try and build a desktop app using React Native. So, Mazen, why don't you talk about how the macOS one went?
Mazen Chami:
Yeah. So it was a little bit interesting because we're on React Native 68, going to 69 soon, and this is a third-party library that's linking into React Native. For macOS, though, it was using a much older version, and I say much now, considering it's not too far away, but React Native 64 was the version that I had to use. So I pretty much initted a React Native project with the template of React Native 64. Once all that was done, I went into my package and there's a command you run, npx react-native-macos-init, hyphens in between. Once that was done, there was a macOS folder, similar to iOS and Android folders that you get. At that point, the next command was to run the app, so npx react-native-run-macos, and the similar boiler plate React Native app that you get came up, but it was in this little mini-screen, which I assume you can resize.
Robin Heinze:
So it's basically a simulator. Is it? I guess it doesn't have to be a simulator because it's like you're on macOS so you're just running the app.
Mazen Chami:
Correct. Yeah. In my Docker at the bottom, just this app started bouncing when I ran it, and that was it.
Robin Heinze:
Whoa.
Mazen Chami:
I had a little app. I'm sure if I changed the icon, the icon would show up there and all that. Getting it to run, I also tried to go a step further by trying to run it via Xcode because sometimes, when you open up Xcode, things go crazy. It ran, no issues. Now, I did have to change at the top... You select your device. I had to change it to be my Mac, and it ran just fine, same way as before. I had iOS, Android, Mac all open at the same time. I changed some text on the screen and live reload, and I got to see it change right there on the screen.
Mazen Chami:
The next thing I tried to do, and I think this is where things got crazy for me, I tried to add in navigation. I was thinking, "Okay, in a Mac app, you don't necessarily navigate like you do on an iOS app, right?" You don't click and then it slides in or out. It's more of a drawer that's always on the left or right or at the top sometimes. The one that always came to my mind was... Slab actually came to mind when I was looking at it because that's the latest Mac app-
Robin Heinze:
Does Slab have a desktop app?
Mazen Chami:
They do, yeah.
Robin Heinze:
What? Whoa, hang on.
Mazen Chami:
It's pretty cool, pretty slick.
Robin Heinze:
Pause for a second. I'm going to have to go download that. I didn't know that existed. That's game-changing.
Mazen Chami:
Yeah.
Robin Heinze:
Cool. I'm going to have to get that.
Mazen Chami:
Yeah. So I compared Slab, Slack, and Spotify, the three S's, and-
Robin Heinze:
The three most important S's.
Mazen Chami:
Yeah. And they all had the drawer navigation look. So it was like, "Okay, this should be straightforward." React Navigation is a macOS supported library.
Robin Heinze:
Famous last words, "This should be straightforward."
Mazen Chami:
Famous last words. Right? After installing everything, it took a long time and started eating into my lunchtime and the baby woke up and it was too much. I think the main issue was, because it's React Native version 64, I had to play with the package.json and install the different React... I think I'd went down to React Navigation .59, I think. I don't know if that's right. But then Gesture Handler, Reanimated, safe area context, I had to start going down in the versions and I couldn't get that running, essentially. The odd part is if you were to just google, "React Native macOS example," there are none. There are a lot of Windows examples but not macOS examples. Now, I don't have a windows machine to try it out, which is why... Enter Robin.
Robin Heinze:
So one thing that is probably relevant to note is that both React Native Windows and React Native macOS are maintained by Microsoft, and you can guess which one of those Microsoft is probably putting more effort into.
Mazen Chami:
Linux?
Robin Heinze:
Microsoft, famously, the creator of Windows, is probably putting more effort into React Native Windows. But I did find it quite funny that Microsoft is also the maintainer of React Native macOS, and I'm guessing probably a lot of the Microsoft developers are probably using MacBooks, if I had to gander, I guess.
Mazen Chami:
That'd be funny. I think one thing we ran into, which is why we did this split, is you do need a Mac for the macOS and you do need Windows for the Windows. So I don't know if you can do parallels if you're on a Windows and have a macOS running. Can you?
Robin Heinze:
I have no idea. That would be pretty wild if you could do that. But I definitely went the route of running it on a Windows machine, and as a result, I didn't get nearly as far as you did. I didn't actually get into trying to install any libraries because it took me a while just to get the machine running. I had to learn like what PowerShell is. I was like, "Wait a minute. I don't know where anything is. There's no Terminal."
Mazen Chami:
Is PowerShell the Terminal version for Windows?
Robin Heinze:
Yeah. So what I learned is Windows has... It used to be called Command Prompt, and now PowerShell has kind of replaced Command Prompt as the default console application. Then I actually was using a recommended program called CMDR, spelled C-M-D-R, which is meant to be sort of a terminal emulator, so it runs more like Unix type commands if that's what you're familiar with. So that's what I was using. But I had to use PowerShell for a couple of things to install dependencies, so that was fun to navigate. There is a script that runs. It takes quite a while, but it checks everything that you need and installs it. I had to install Visual Studio manually and do some manual configurations to get that to run.
Mazen Chami:
That's odd because that's also a Microsoft product, right, and there's extra configuration on a Windows.
Robin Heinze:
Well, yeah, I just had to set it up for Node and a couple of other things.
Mazen Chami:
I guess the asterisk here is I did all this on a MacBook Pro that I already use for React Native development. So I had all this already set up. I think, yes, what you were mentioning, if I was coming into a clean MacBook or I grabbed my wife's MacBook or something, I'd have to install Node and all that kind of stuff, too, also.
Robin Heinze:
If you have already been building Android apps using a Windows machine, your environment will already be a lot of the way there. There are additional dependencies, though, because of the type of app that you're building because a Windows app... The target app is called a Universal Windows Platform App, and it's either C++ or C#, and so you have to have tooling around that in order to run the native target app. So that's a lot of what I was installing. But I did get it running. I did get it running eventually. But then, beyond that, I didn't do much be beyond changing the text and seeing it live reload.
Mazen Chami:
Two points there.
Robin Heinze:
It was cool.
Mazen Chami:
You mentioned C++. That makes me think, the new architecture is coming out in C++, so I assume once it's maybe React Native 69, we're looking at a much easier way to build Windows apps and then, essentially, because it's C++, macOS apps could essentially be easier.
Robin Heinze:
Mm-hmm. Yeah, possibly. I know you can choose to use C# instead of C++, and there are a couple of reasons why you would pick one or the other. I think performance is definitely one because C++ is a intermediate level language and C# is a high level language. So there's a bit of a performance hit for using C#, but I think it's a better developer experience, and it also just matters what else you're using in the Windows Toolchain ecosystem. But you can choose one or the other when you're initializing your app.
Mazen Chami:
So, for me, it took me about, I would say, five-ish minutes to get from starting my init React Native app to React Native, so npx react-native-run-macos, and then getting the app bouncing on my Docker and then me seeing it right there. How long did it take you to do all that?
Robin Heinze:
When I ran the initialized command, I got errors for a while because my dependencies weren't right. So I had to go through the process of fixing that. I would fix something and then run it again, fix something and run it again. So that took a little while. But once my environment was fixed, when I ran... Let's see. I initialized it, and that took maybe a couple minutes, and then I ran Run Windows. That command alone, the first time I ran it, took about five minutes. So it had a very long build time.
Mazen Chami:
And that was the one that, eventually, the outcome was-
Robin Heinze:
Eventually, the outcome was an app-
Mazen Chami:
Cool.
Robin Heinze:
... popped up with the, "Welcome to React Native."
Mazen Chami:
You also had a windows folder in your project, right, similar to Android iOS?
Robin Heinze:
Correct. Right. I had an Android folder, an iOS folder, and a Windows folder, and the Windows folder was full of C++ files, which is the default.
Mazen Chami:
That's cool.
Robin Heinze:
Yeah. But then the JavaScript is identical to building iOS and Android apps, which is the whole... I mean, that's the whole point. That's the philosophy of React Native, right? Write once, run anywhere.
Mazen Chami:
And it almost seems like if you are building a one-page app, I guess, so a calculator, let's say, or maybe even a to-do list, but it's a one-page to-do list app, you could build it once and it's available iOS, Android, macOS, Windows, Web.
Robin Heinze:
If you want to put a to-do list on your TV, you could build a tvOS.
Mazen Chami:
You could do that now. So who knows? It's limitless.
Robin Heinze:
You're definitely going to have the most success if you stay in JavaScript, though.
Mazen Chami:
Correct.
Robin Heinze:
That's definitely one of the biggest caveats that we found going through this process, is in terms of native support, there's not nearly as many options for Windows and macOS. A lot of the libraries that you're probably familiar with, Windows and macOS are definitely not first-class citizens and may not be supported at all.
Mazen Chami:
Totally. I found, on the website, reactnative.directory, if you filter by macOS, there's 16 supported third-party libraries, which is very small. I mean, I could only imagine how many there are for iOS and Android.
Robin Heinze:
Right. Exactly. There are more for Windows-
Mazen Chami:
About 43.
Robin Heinze:
... most likely because of the Microsoft involvement.
Mazen Chami:
Correct. Yeah.
Robin Heinze:
But, I mean, even packages in that list that are supported, you're going to have a harder time finding examples and people to answer questions and documentation.
Mazen Chami:
And it's a slower cycle, which is why, I guess, they're still on an older version of React Native, because once a third-party library supports it, the React Native Windows, React Native macOS project has to go through their implementation of it, so, like you mentioned, the C++ conversion and making sure that it's actually digging in. There's some stuff that you might not have the functionality on a Mac but you might have on a Windows, and that's where the platform dotOS will come in handy, so you can restrict certain aspects of the app. I'm getting a little bit deeper. Let's say you're using something with the compass. I don't think Windows machines have compasses these days. So that would be something you would have to limit based on your platform.
Robin Heinze:
Yeah, definitely. I think using React Native to build a macOS app or a Windows app, it's not something I would choose, a., if you're not looking to have an app with a cross-platform experience. I might choose it if you're a JavaScript developer or a web developer who needs to make a desktop app and isn't familiar with the native technologies. This is an option to get something running very easily. But if you're trying to do something really complex that really integrates with the native toolchains, I don't know if React Native would be the choice that I would make, but it's definitely a pretty quick and easy way to get something running right away.
Mazen Chami:
Totally. This might be a perfect example of how sometimes you might do, let's say, index.android.JS and you have your Android-specific code in that file. There's obviously set-up around that, but this might be a certain scenario where you have your windows.JS set up, too, or .macOS so that you limit it. Maybe that's your navigator, right? If you're on a macOS or Windows, you're only displaying the one screen you want available on there. I think there might be some issues, too, with your packages and installation of all those because they might not be compatible. Certainly, that's something with a little bit of time that could... You could get it running and working.
Robin Heinze:
Yeah. For sure. If you do have experience with building the native versions or working with Windows apps or macOS apps, you'll probably have a little bit easier times since you'll probably have to do some customization on the native layer. So if you're familiar with those technologies already, you'll probably have an easier time.
Mazen Chami:
One thing I realized when I did the macOS, actually, you just reminded me, is the macOS folder looked just like an iOS folder. So if you're used to opening up your X project folder file in Xcode, you have pretty much everything the same as you would in iOS, so you could dig into there and build whatever it is. Obviously, the functions are different because it's a Mac and not an iOS and there's some... The API is different in that sense.
Robin Heinze:
But Apple is Apple.
Mazen Chami:
Exactly. Yes. You're still objective C Swift on that layer and at the end of the day, so-
Robin Heinze:
Cool. I think that's pretty much the gist of it for today. If you'd like to nerd out a little bit more about React Native, of course, feel free to check out Jamon's Twitch stream, @rn.live. We just redid the website, rn.live website. You should definitely take a look. Our designer, Jenna, designed a whole beautiful landing page.
Mazen Chami:
Did a really good job.
Robin Heinze:
Complete with a sweet chat animation. Worth the price of admission just to go see that. You can also go directly to youtube.infinite.red. You can join our Slack community, community.infinite.red, and also check out our new Twitter community, which I'm not a part of because Twitter hates me. But that's at-
Mazen Chami:
What did you do, Robin?
Robin Heinze:
I don't know. Maybe now that Elon owns it, I'll appeal directly to him. But you can find that at rntwitter.infinite.red. Mazen, where can people find you on Twitter.
Mazen Chami:
@mazenchami.
Robin Heinze:
Of course, I'm @robin_heinze with an E at the end, and you can find React Native Radio at React Native R-D-I-O. As always, thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky, our designer, Justin Huskey, and our guest coordinator, Derek Greenberg. Thanks to our sponsor, Infinite Red. Check us out at infinite.red/reactnative. And a special thanks to all of you for listening. Make sure you have subscribed on your favorite podcasting platform. A reminder that Infinite Red is hiring, so check out careers.infinite.red, and we'll see you all next time.