Join Robin and Mazen as they navigate React Native 0.73's key updates! Topics cover enhanced debugging capabilities, Android and Kotlin template updates, and significant architectural updates for a more efficient development environment.
Join Robin and Mazen as they navigate React Native 0.73's key updates! Topics cover enhanced debugging capabilities, Android and Kotlin template updates, and significant architectural updates for a more efficient development environment.
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.
Connect With Us!
Todd Werth:
Welcome back to React Native Radio podcast brought to you by console dot log Works every time, no matter which thread you're in. Episode 286, react 0.73.
Robin Heinze:
Well usually we call this the warmer, but today I think it has to be the colder. It's 20 degrees outside where I am. How cold is it where you are Moen? It's
Mazen Chami:
40 today, but it is supposed to be 17 tomorrow.
Robin Heinze:
Oh, you didn't get the cold snap? Nope,
Mazen Chami:
Nope. It's still green outside, unlike what it looks like. I can't even see outside your window. It's so bright and
Robin Heinze:
White. The glare from my window is blinding because it's just all snow and it's not really, I can't even call it snow. It's like ice pellets. Those are the worst. So you have all the downsides of an ice, like a snow storm with no snow to go play in. We've just been stuck in the house for four
Mazen Chami:
Days. Kids can't go sledding or any of that. Yeah,
Robin Heinze:
No, we really haven't gotten to go outside and play.
Mazen Chami:
We haven't had snow in like two, three years I think. Yeah, it's weird.
Robin Heinze:
That's an add to go move to Durham. It is. Alright, let's get on with it. You've probably noticed that I'm not Jamon. I think I say that every time he's gone, but I'm Robin Hines, your host for today and director of engineering at Infinite Red, located in very chilly Beaverton, Oregon with my husband and my two kids who you might hear in the background of this episode because they're home because school's closed. I've specialized in React Native for the past six years and I'm joined by my inspecting co-host, Mazen Chami. Mazen lives in Durham, North Carolina, which does not have snow right now. So just saying he lives there with his wife and his toddler and he's a former pro soccer player and coach, also a senior React native engineer here at Infinite Red. Before we get into our topic, let's hear from our sponsor really quick.
Jamon Holmgren:
This episode is sponsored as always by Infinite Red. Infinite Red is a premier React native consultancy located fully remote in the US and Canada. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash React native and don't forget to mention that you heard about us through the React Native Radio podcast.
Robin Heinze:
All right, let's get to it. We have a great episode about React Native 73, which came out a little bit ago. We had some downtime for the holiday, so we're just getting to 73, but we're excited to talk about it. Lots of developer experience improvements this time around. New architecture updates, Android updates. Let's get into it. Starting with debugging improvements, first up, Hermes now captures console log calls starting from when the app starts. So I was reading the announcement and it sounds like previously if you made any calls before the debugger was connected, your console logs were lost and you didn't have any logs. So now you have logs from the very start, which can help debug any issues with Appstar. Does that sound right, Mazen?
Mazen Chami:
Yeah, that sounds about right. I think this also mainly pertains to if you have Flipper or I could be wrong. No, yeah, it does work with Flipper and also the Chrome debugger, so yeah,
Robin Heinze:
Which is funny because we'll talk about this in a little bit. Flipper's actually being phased out starting in this release, but if you still have it and you're still on the flipper bandwagon, this'll work with that.
Mazen Chami:
On that note, reactor three, which I think we covered in previous episode, automagically captures console log, so you don't have to do what we previously required you to do console dot tron dot log or import the reactor tron package log or dot display, whatever it is you want it to do now, it just magically catches on so everyone's getting on the console log bandwagon of it being the best way to debug. Of course, kidding there, but
Robin Heinze:
Yes, everybody doesn't, everybody
Mazen Chami:
Goes that. I know we all talk about going away from console log and finding some fancy shining way to debug, but console log is never going away. It's never going. I will
Robin Heinze:
Always come back to console log debugging. I don't care what anyone says, it's the best
Mazen Chami:
If this console table doesn't work, but I hope support for it comes soon. I know it's silly.
Robin Heinze:
Wait, what's console table?
Mazen Chami:
It pretty formats it for you. What? Yeah. Yeah, it's pretty cool. You should see it on a React app. It's fun when you do inspect and you see the lock. This
Robin Heinze:
Is what I missed out on by not being a web developer.
Mazen Chami:
Well, yeah, I was a web developer for just a minute and then I was out as soon as I could.
Robin Heinze:
Okay, okay, okay. I was at Web Bell for a minute and I knew about Cons. What are you trying to say Martin? Anyway, saying
Mazen Chami:
It was my favorite debugging tool and it still is,
Robin Heinze:
It's classic it. There's also the debugging docs on the React Native Doc site are updated now. I checked them out. They go into a lot more detail about how to open all the different various debugging options and what they are. The biggest thing to note I think, is that you'll see a section now about the new experimental debugger, which I think they're hoping will be the future of the React native debugger, which in the past has been kind of a ambiguous term. There's been a number of different options, and so no one really knew what you were talking about when you said the debugger, but they're introducing a new one, which is still an experimental phase. There's some bugs to work out and it's not super stable, but there's a section about it in the debugging docs now. So go read
Mazen Chami:
That and for our listeners, that's the future replacement for Flipper. So as Flipper gets removed, this new experimental debugger or new debugger I guess is what it's technically called, will be the new flipper
Robin Heinze:
In the announcement, they refer to it as the experimental debugger. I think just to
Mazen Chami:
Differentiate,
Robin Heinze:
Emphasize that you might encounter some wonkiness or bugs when you use it, but they do want you to use it. They want it to get better and they want to know where the rough edges are. You can run it by passing a flag to react native start. I think it's dash debugger,
Mazen Chami:
Experimental dash debugger. So there they are buttoning down on the experimental.
Robin Heinze:
Yeah, doubling down in case you didn't know it's experimental.
Mazen Chami:
Do we mention it's experimental?
Robin Heinze:
It is intended to replace Flipper. Some of the known issues are some connection, reliability, persistence of break points and reliability of break points.
Mazen Chami:
That actually break points are something I think we've been lacking a lot in React native because before it was like console log every other line to get like, oh wait, hold on, here's my error, and then kind of go back. But breakpoint just really help you with that. We really do need that in React native.
Robin Heinze:
Yeah. Yeah. I mean it's pretty standard in a lot of other languages, especially ones that have a full featured IDE and debugging is really built into the whole workflow, so I'm really excited to try it out and start incorporating it in addition to React Tron and in addition to console lock, because I'm never going to give those up, I think we intend to do an episode all about debugging and the new debugger and the old debuggers in a couple months. So look out for that because it's a huge topic and we have a lot to say about it, but in the meantime, go try out the new experimental with debugger. What's next, Moen?
Mazen Chami:
So the next one is SIM link support. So it's now stable and enabled by default in Metro. So what do I mean by this? This is basically if you have a Monorepo setup, this is a great feature because you would pass in a flag called watch folders, and what that does is any directories outside your project route can now be watched by Fast Refresh. So let's just say your project route in a Monorepo structure in Monorepo, you probably have multiple apps, you have a shared folder packages, whatever that may be. Structure may be, and let's say your project route is the app because everything lives within the app, but you can also tell it, Hey, watch all my packages for me because as I'm building, I do have a UI library that I'm maintaining at the same time in my repo. So Fast Refresh will automatically, again, back to my word automagically, catch and trigger a fast refresh every time you update something within those
Robin Heinze:
Folders. I love a little magic. Yeah,
Mazen Chami:
What would it be without magic?
Robin Heinze:
I love seeing all this mono repos support and symlink support because it seems like people are really moving towards mono repos and I don't know if it's in response to the era of microservices where everything was really, really segmented into small pieces and now everyone's like, no, no, no, let's just put it all back together. And that seems reflected in the features that they're putting in.
Mazen Chami:
I think a lot of our clients as of recent, I know I'm transitioning to a new project and they didn't mention monorepo specifically, but based on the conversation, it's a monorepo. My previous project was a Monorepo project before that was a monorepo. I could keep going. It seems like everyone wants the idea of separation of your apps shared folder. Well, it mainly comes from the idea that React native gives you all platforms, right? We have iOS, Android, and web. So now you do need a shared folder so you can share your components for example, but you also now need a design system library if you want to do that, right? I'm all for creating your own design system library other than using React native paper, whatever. There's a lot out there, UI can and all that. I think with that and the Monte repo structure and SIM link support, it makes it much easier to develop a React native, multiple React native apps, right? Different platforms in a Monte repo structure. Now
Robin Heinze:
Looking ahead, the next one in the announcement is the new Kotlin template on Android, and what that means is that the template that is used to generate a bare React native project from React native and Knit now uses Kotlin instead of Java for the Android files. Android like Google and Android officially recommend Kotlin. It's the default language for everything. Now, Java's really kind of being phased out. You can use, if you have an existing project with Java files, you can use, there's this utility in Android studio. It's under the code menu, convert Java file to Kotlin file, which should help you update your existing project so that React native upgrades are easier. You won't be able to use the upgrade helper if you're still using Java files in your project.
Mazen Chami:
I have used that utility before and it's pretty good. We had a project that was 72 I believe it was, but they wanted to use Kotlin, so I was tasked with making the conversion happen and I use that utility a lot comparing a copy and paste into chat. GPT and I actually used Bard at the same time and using this utility, they obviously this utility worked better given, so it is very helpful. It made it very easy.
Robin Heinze:
Obviously if you're using Expo Expo pre-build, that'll all be updated in the new SDK. I think they were already using Kotlin. I'm not positive, but if you're using pre-build, you shouldn't have to worry about that. You may have to update your config plugins if you've got any custom ones that use Java, but yeah, so be aware of that. What's next? Looks like Android 14 support.
Mazen Chami:
Yeah, so this one is interesting. Google's now requiring new apps to be at a certain API level or Android level. So Android 14 support API level 34 upside down cake Love, that name is now the support in React native 73.
Robin Heinze:
I love that they used desserts for their name and I can't believe they're already to you.
Mazen Chami:
Yeah, I wonder what Z's
Robin Heinze:
Going to be. I remember back when they were on Lollipop Kit Katts
Mazen Chami:
Kit Kat. Yep.
Robin Heinze:
Yeah, what are they going to do when they reach getting the alphabet? I wonder.
Mazen Chami:
AA is going to be interesting. Anyways,
To support this bump, there's a couple of things you need to do. One is you need Java 17 and the Android Gradle plugin is now at 8.1 point x whatever version, minor patch version you want from there, this 73 will be the last time you can support Android 5.0. So API level 21, I did not look up what that was, but it's probably some something cool. So as of 74 you'll be on API level 23 Android six. So if you do need Android five API level 2173 is probably your last version for that. So then you probably need to make a business decision on making that move over whether you have users using those old platforms. So there's that. According to the docs, what this kind of opens up is Android 14 now gives devs the ability so that as a user I can select specific media rather than giving access to my entire media. So if you have an app that's like a profile or something, you need to give access to your photos and all that kind of stuff, and in the past you had to do a full allow. I know I'm one that usually is like, I don't want to do this, but now that it's available, you can say, okay, select this one folder that I have and get access to it.
Robin Heinze:
How long has iOS been doing that? I wonder.
Mazen Chami:
I like the dig robin.
Robin Heinze:
Nice. The tables have turned.
Mazen Chami:
Yeah, there we go. Yeah, so that's pretty much it. Yeah. Now if you want to do it, install steps for Java 17 are in the docks, but again, it's Brew Tap, home Brew Cask versions, and then you install Cask Zulu 17.
Robin Heinze:
Man. Sometimes the Android ecosystem sounds like you're talking another language like Star Trek language, Zulu cat. Yeah. Anyway, next thing on the docket is there's some really cool new architecture updates, baby steps towards getting everyone fully integrated with the new architecture. We already have fabric and turbo modules and now 73 includes bridge list mode. But what previously, even when you enable a new architecture, the bridge was still there for compatibility with modules that didn't support
Mazen Chami:
Third party libraries, for example,
Robin Heinze:
Right? Third party libraries. So it was sort of there as a safety net and now you can disable the bridge entirely and go into Bridges mode. Optionally, this is something that you purposefully enable, but if you're trying to sort of test the bounds of your native module or the native modules that you use, you can turn off the bridge entirely and kind of see what breaks and how to make things work. So it's the next step towards getting everything fully new architecture compatible. They're going very slowly. They know it's a huge change and helping everyone make sure everything is up to date.
Mazen Chami:
And I assume that's because as a developer, if you have an app using React Native, you want to be on the new architecture for performance reasons and everything we've talked about over the past year plus at this point. So I think we all get that and this is one big step in that direction, but it's also giving you the ability. Luckily it's still optional, which is great because when you turn it on, you're going to learn, a lot of things are missing. You're going to learn a lot of issues in your modules, in maybe your modules, third party modules and all that. So this is a way for you to start debugging and moving towards the new architecture fully.
Robin Heinze:
Interestingly though, in addition to list mode, they're also shipping what they're calling a native module interop layer, and this is quoting from the announcement that will allow you to reuse your old modules when in bridge list mode, which feels like a new different kind of safety net. It's not the bridge, but it's
Mazen Chami:
Not the bridge, but it's the bridge under a new name, but
Robin Heinze:
It's kind of making your stuff that use the bridge still work when you don't have the bridge.
Mazen Chami:
It's like that same restaurant that used to go to all the time that now has the now open sign, but it's the same decoration and same food and same people,
Robin Heinze:
Right?
Mazen Chami:
New management.
Robin Heinze:
Yeah, and of course the caveat of the day is that this is experimental and you should expect maybe some inconsistencies or things that don't work quite right, which you should bring up to the core team in the new architecture discussion group. They really, really need people to try these things out and give them feedback.
Mazen Chami:
Please, a report
Robin Heinze:
Please report. Next up, we talked about some new debugging features, but there's also some deprecated debugging features. Most notably Flipper is no longer included in the bootstrap code. So the code that comes with your Bear React native app when you knit it does not include Flipper anymore. You can still use Flipper if you wish. You can install it yourself and add all of that boilerplate yourself and it will still work, but they're not including it by default anymore. Some of the reasons why that they gave were just that it's slow. Slipper often has a poor user experience and it's a transit of dependency, meaning it's this pretty significant dependency that is just coming along for the ride, even for folks that aren't using it. And that's less than ideal because it adds to the bundle size and all that. And they also acknowledged that the team behind Flipper was maybe slow at addressing issues, not because they weren't a good team, just because Flipper was maybe just not prioritized over in Meta, so no longer included in the boilerplate.
You can still add it yourself. That story with Flipper, use React Actron, we'll just throw that in there. They also have now removed JavaScript debugging using Chrome. That used to be where you would turn on the debugger and it would open a Chrome window and it would be debugging your React native app, but using the Chrome engine, which led to quite a lot of issues because React native doesn't use the Chrome engine, and so bugs that were happening in your React native app would not happen in your debugger. It was a completely different JavaScript engine. So they've deprecated that now, and so it's no longer available in the dev menu when you open that, which we just talked about in our recent episode about the dev menu. So as of 73, that's not in there anymore, and they did make a call out that if you're using JSC, it's now recommended that you use Safari developer tools instead for debugging on iOS. Cool.
Mazen Chami:
And last section we have the breaking changes. So the main one is some Babel packages have been renamed. I will not list them out here. Use the upgrade helper at all times. It gives you all of them. This is part of the whole initiative of moving from their own individual repos into the React native repository in their own monorepo. Whoa, would you look at that? It's all coming together. Post circle. Everybody
Robin Heinze:
Is doing mono repos. Yeah,
Mazen Chami:
There you go. So there's a couple of metro babble packages there that you'd want to change. Additionally, we've mentioned this, but Android, Java 17. So you need Java 17 for Android to build your Android apps. Android has a major bump of Fresco to 3.0. iOS raises the minimum iOS version to 13.4. I believe it was 13 prior. Metro will no longer be it automatically. Well, this is an interesting one actually. Metro no longer automatically starts when running builds from Xcode. So in the past when you'd run a build in Xcode or even just do yarn iOS, it would do Metro. So I think it still does it when you do yarn iOS, but when you run it from Metro from, sorry, Xcode, you won't get your metro started. So you still need to do yarn start and then run it from Xcode. So just that little one.
And then the minimum node JSS requirement is now 18. So that's an interesting one. So we might need to update that in some specific places. And the template uses the template is now using TypeScript 5.0. There's a lot of cool changes in TypeScript 5.0. So that would be a good one to take a look at. Additionally, there's a bunch of CLI changes. I think what we'll do for these is probably just link it in the show notes because they're very detailed. A lot of flags have been removed, a lot of stuff that would get lost over text, but over speech, sorry. So I would say please take a look at the changes under the React native CLI part section, which will include in the show notes if you do have any custom CLI command that leverage the React native CLI, you might want to take a look at this, it might affect you in some way.
Robin Heinze:
I would call out the removal of dash dash configuration and dash dash variant. I use those a lot. It's the CLI option that you use to run a release on IOS's configuration on Android. It's variant, they've removed those and standardized on dash dash mode. So if you're trying to run a release build, it'll be dash dash mode release on both iOS and Android.
Mazen Chami:
That's a good call out. And then the last breaking change is definitely type package for types for React native. So at type slash React dash native has been officially deprecated because if you remember starting in React native 71 first class support for TypeScript was automatically included and shipped. So React native types have been in for about two versions. So why maintain it in two spots when it's automatically shipped with React native. So there's that. If again, the docs do a good job of showing you how to migrate, if you are still using the definitely types and not the React native bundle types, there's an easy way to switch them out. And I'm sure even if you just uninstall it and just delete it from every single file, your VS code will help you auto import from React native. So yeah, that's the breaking change. Two couple things to just mention, and this is actually very important.
This is kind of out of the realm, but kind of in the realm of 73. Huge kudos to the React native team. Thanks to Ricardo who was on this show and Nicola Corti from the meta team, they were able to get three patches up within 24 hours. We cannot watched it happen live. So 71 point 15, 72 0.9, 73.2 were released and there was a bug where the third party library boost, which was hosted on Jfr was pointing to the wrong checksum in the pod file. So small pod file update to help fix a bug that a lot of people were seeing with this change, again, is just, it was a small thing, but it took them as these small things do, they take a long time to kind of figure out and get to the end of it. So huge kudos to them and thank you. And on top of that, kudos, thanks to every one of the 68 contributors who worked on this release that's 2,259 commits to get 73.0. Not counting the 0.2, 0.1, 0.2 that were also just released, getting that in our hands for us to use. So thank you to everyone who was part of that.
Robin Heinze:
Yep. We always appreciate the React native team for all they do, they make it possible for us to do our jobs. So thank you React Native report team and open source contributors. That's it for the show today. Upgrade to reacting to 73 if you're on expo, that'll be included with SDK 50, which we just talked about in our most recent We react to news episode that's in beta now. It might be fully released by the time this comes out. So good luck with your upgrades. I do have a mom joke.
Mazen Chami:
Let's
Robin Heinze:
Hear it. This is courtesy of none other than Frank Calise. My friends and I put a band together and we called it 999 megabytes. We still haven't gotten a gig though. Love it. Thanks. I lulled. Alright everyone, we'll see you next time.
Jed Bartausky:
As always, thanks to our production team with editor Todd Werth, our assistant editor and episode release coordinator. Yours truly, Jed Bartausky, our director of marketing, Justin Huskey and our guest coordinator, Derek Greenberg. Our producer and host is Jamon Holmgren and executive producers and hosts are Robin Heinze and Mazen Chami. Thanks to our sponsor, Infinite Red. Check us out at Infinite Red slash React native. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio wherever you get your podcasts.