In this episode, Jamon, Robin, and Mazen go through some of the differences in React Native 0.68. We also find out that somehow Robin managed to get "banned" from Twitter Communities.
In this episode, Jamon, Robin, and Mazen go through some of the differences in React Native 0.68. We also find out that somehow Robin managed to get "banned" from Twitter Communities.
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 Nyquil If it wasn't for Nyquil, I wouldn't be releasing this today. Episode 235, Dissecting React Native 0.68.
Jamon Holmgren:
I was prepping just before we started recording and realized I hadn't written down a warmer. But Robin told me that I had an obvious warmer, that I am back from Florida, which, yes, is warmer than where I am now. So yes, I'm back everybody. It's good to be back.
Robin Heinze:
Yay, does that mean I can't be the CTO anymore?
Jamon Holmgren:
You can be the CTO. Yeah.
Robin Heinze:
Sweet.
Jamon Holmgren:
I'll do whatever you do.
Robin Heinze:
I'm going to go tell HR.
Jamon Holmgren:
You should. Probably be a better CTO than I am. Thanks to both of you for carrying this show forward when I was gone. And John Major as well, when he was here. It was a great vacation. I'm definitely glad to be back in the saddle here doing my thing.
Robin Heinze:
You missed the snow, which is fortunate, probably.
Jamon Holmgren:
I wouldn't say I missed it.
Robin Heinze:
You avoided it.
Jamon Holmgren:
I saw pictures. Yeah. Yeah. We were sitting by the pool and I was scrolling my phone, looking at pictures of snow back home in April.
Robin Heinze:
Yeah. I was not happy to wake up to snow in April.
Jamon Holmgren:
That was a little weird. So all three of us, Robin, Mazen, and myself are going to be probably a little loopy today. They have good excuses, I don't. They both have babies who keep them up at night. I am just a big baby who decided to go play hockey at 10:30 PM and didn't get to sleep until like 2:00.
Robin Heinze:
10:30?
Jamon Holmgren:
The thing is, after a hockey game, that's an hour and 15 minutes or something. And then I drive home, and that's another 15 minutes, and then take a shower and that's another 15 minutes and then I'm still keyed up from the game so I'm sitting there trying to go to sleep, and I can't.
Robin Heinze:
Jamon is starting his hockey game when I've been asleep for an hour. That's very different lifestyles.
Mazen Chami:
I was actually asleep two hours before that last night, so. I had to.
Robin Heinze:
When you know you're going to be awake later, you go to sleep when the baby is asleep.
Jamon Holmgren:
I try not to do that too often, but my wife told me that she would very kindly get... Normally I get our girls up for elementary school. But she very kindly said, "Well, you have a late game, I'll get them up this morning." Because she puts them to bed, I get them up. That's kind of the deal. But yeah. Anyway, enough about that. We're all going to be a little loopy, a little slower today. I don't know, maybe the audience can't tell. Maybe it's just a normal thing.
Robin Heinze:
I was like eh, It sounds pretty normal to me.
Jamon Holmgren:
Probably. I'm Jamon Holmgren, your host and friendly CTO, at least for the moment, of Infinite Red until HR lets me know that Robin is now CTO permanently. I am unfortunately not in Florida anymore, back in my home here in the Pacific Northwest, and today I'm joined by my audacious co-hosts, Robin and Mazen.
Robin Heinze:
Audacious.
Jamon Holmgren:
Audacious. Yes.
Mazen Chami:
Please explain.
Robin Heinze:
Okay. What definition of audacious are you using?
Jamon Holmgren:
I guess maybe I knew, but I didn't really realize that there were two kind of very different ones.
Robin Heinze:
I'm looking at the Oxford Dictionary, "Showing a willingness to take-
Jamon Holmgren:
Of course you would use the Oxford Dictionary.
Robin Heinze:
Oh, it's just the one that Google shows me.
Mazen Chami:
I guess I'll close Urban Dictionary then.
Robin Heinze:
I didn't seek it out. "Showing a willingness to take surprisingly bold risks," which is not what I first thought of. The second definition-
Mazen Chami:
It's not the usual go to for audacious.
Robin Heinze:
"Showing an impudent lack of respect," is what I would've thought of. But I guess I am trying to steal your job so that is pretty audacious.
Jamon Holmgren:
Yeah. I think that there's some accuracy there. Mazen mentioned Urban Dictionary. Should I read the definition from that?
Robin Heinze:
Oh, no. Oh, no.
Mazen Chami:
Yes please. You have to. Urban Dictionary just makes all words better.
Jamon Holmgren:
I'm scrolling past a few that would get us banned from the podcast app. Audacious, misspelled, of course.
Robin Heinze:
Oh gosh.
Jamon Holmgren:
"A goddess among others. Able to see others, see the light in the darkest hour. Can be quiet and serious, but slowly becomes a bubbly, hilarious person. A loyal mate and trustworthy friend. A perfectionist who will do whatever it takes to make this world a better place, a true friend who will help in the worst moments and stand by you till all is done."
Robin Heinze:
That is quite the definition.
Mazen Chami:
Got to love Urban Dictionary.
Jamon Holmgren:
Now, why did they add an E in there though? That's not what I wondered.
Robin Heinze:
I don't know.
Jamon Holmgren:
There are already enough vowels in the word audacious. And they added an E.
Mazen Chami:
An E at the end?
Jamon Holmgren:
No. Just right in the middle, after the C for some reason.
Mazen Chami:
Audaceious. Interesting.
Jamon Holmgren:
Yeah. That's an interesting one.
Robin Heinze:
Got to love Urban Dictionary.
Jamon Holmgren:
But sorry, Oxford, I think that's the best definition that I've seen for my audaceious co-hosts, Robin and Mazen. Robin is a senior software engineer at Infinite Red. She's located Southwest of me, in Portland, Oregon with her husband and two children. And has specialized in React Native for the past five years. How are you doing, Robin?
Robin Heinze:
I'm good. I've got coffee, I've got snacks. I'm all good.
Jamon Holmgren:
Awesome. And then Mazen Chami lives in Durham, North Carolina, with his wife and newborn child. Newborn son, I can say that now. He is a former pro soccer player and coach and is a senior React Native engineer also here at Infinite Red and how are you doing, Mazen?
Mazen Chami:
Good. Good. Getting more sleep. And yeah, it's afternoon for me here unlike for you guys, just getting up on your end.
Jamon Holmgren:
You said that your son is sleeping right in the room next door, so we have to be careful about getting you too worked up about this topic.
Mazen Chami:
I'll try and hold it in once we get into the topic.
Robin Heinze:
Uh-huh. I somehow don't think that'll be a huge problem.
Jamon Holmgren:
Our topic today is going to be Dissecting React Native 0.68. So everybody get your lab coat on, we're going to be performing some dissection.
Robin Heinze:
On frogs?
Jamon Holmgren:
Did you have to do that in high school? I did that.
Robin Heinze:
No, I never did. I always expected that I would because that's what you see in media.
Jamon Holmgren:
Yeah. I actually did. I remember how... Nevermind, I'm not going to go into details.
Robin Heinze:
Please don't.
Jamon Holmgren:
Before we do, 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. You know what is interesting? We have never really described or explained why it's always Infinite Red that sponsors this. Does Infinite Red just have an unlimited budget for sponsoring podcast episodes? Or does nobody have any interest in sponsoring this podcast, or else, that's why we're just using by default Infinite Red?
Jamon Holmgren:
Maybe these are the thoughts that are going through our listeners' heads. No. We actually get requests every week for people who want to sponsor this podcast. Every single week, we get a request. Someone like, "Hey, can we sponsor the podcast?" And the reality is we don't really want others to sponsor it, we want to keep it Infinite Red. And the reason for that is we really like having just total freedom of what we want to do here.
Jamon Holmgren:
And because we all work at Infinite Red, it's not like Infinite Red is going to have a problem with it. So we just keep it rolling. We're not doing this podcast to make sponsorship money, it's to be a part of the community, it's a whole different thing. Is that compelling enough? I think it's true, but...
Robin Heinze:
Well, if it's really about giving back to the community, we should let people sponsor it for free.
Jamon Holmgren:
That's an interesting idea. Who do you think we would get?
Robin Heinze:
If it's free advertising, we would get a lot of people.
Jamon Holmgren:
We do actually. We mention Expo all the time and we never send them the bill.
Robin Heinze:
Yeah, we do. We should probably start sending them the bill.
Jamon Holmgren:
That's probably true.
Mazen Chami:
Or a cosponsor.
Jamon Holmgren:
Yeah. Yeah. Okay. So there's some good ideas here. Maybe we could think about... Anyway, right now, it's just Infinite Red. And secondarily, we are hiring. We are a small team, we're 30 people at the max and that's a big count.
Robin Heinze:
Not even.
Jamon Holmgren:
Yeah. The core team is probably more like 23 or something. And we don't hire very often, but we do have this standing offer, because we want to find great people who want to do just React Native. If you're interested, go to careers.infinite.red. Okay. I've spent plenty of time on this, we are too far into this episode. But let's get into Dissecting React Native 0.68. So get your scalpels out, we are going to get started. Oh oh oh, wait, I do have one more thing to plug.
Robin Heinze:
Is it a sponsor?
Jamon Holmgren:
No, it's not a sponsor. I have a new Twitter community. Some of you may not have even known that this is a feature of Twitter. But Twitter has a thing called Communities now. And I created one, if you go to rntwitter.infinite.red, it'll redirect you to it. It's called React Native News and Tips, and there are over 500 React Native engineers in that community. And you'll just see tweets if you go to that community, and in your regular feed as well, I think, you'll see stuff.
Jamon Holmgren:
And it's only React Native related stuff. That's all that we do. So just news and tips or people asking Q&A, like "How do I do this?" Or whatever. It's really cool, people are very respectful. So go to our rntwitter.infinite.red and request, and then I'll go through and approve people who have requested to join the new community.
Mazen Chami:
It's really cool. I joined it recently and there's a lot of good information out there and people that are helping. Robin, are you finding it helpful?
Robin Heinze:
No, I'm not. Because Twitter won't let me join it. I don't know why.
Mazen Chami:
What did you do to Twitter?
Jamon Holmgren:
I know, right?
Robin Heinze:
I don't think I tweeted anything offensive, but yeah, for some reason, communities period do not exist in my Twitter account. I just get a 404, can't even view it, can't be invited.
Jamon Holmgren:
It's like the rollout is just stuck at 99% and won't get to yours for some reason.
Robin Heinze:
Yep. Hey, so anybody who works at Twitter, if you're listening, help me out.
Jamon Holmgren:
What's your handle?
Robin Heinze:
I think at this point we should all know my handle.
Jamon Holmgren:
True.
Robin Heinze:
If you listen to the end.
Jamon Holmgren:
Robin_Heinze.
Robin Heinze:
Robin_Heinze with an E at the end. I would love to join this Twitter community. I'm having some serious FOMO not knowing what's going on.
Jamon Holmgren:
It's pretty fun. And yeah, it's kind of unfortunate. There are a few others who have had some trouble. All right. Let's get going. So React Native 0.68 was released... Wow, when did it drop?
Robin Heinze:
Three weeks ago.
Jamon Holmgren:
Something like that. Yeah. And obviously I was not around, and by the time this episode actually releases, of course, it may be longer than that. But yeah, they put out a blog post and we're going to talk about the highlights as well as maybe a little bit more deeper changes with this, if we have time, which we probably won't because I've been talking far too long. So without further ado, what have we noticed or what are some of the highlights of React Native 0.68, which has just landed?
Robin Heinze:
Well, I think the biggest thing is the new architecture flag.
Jamon Holmgren:
Yeah. That's a big one. And I think on iOS it's RCT new arch enabled=1, that's the flag. And then over on Android, it's gradle project new arch enabled=true. And the casing on all of that stuff is not obvious, so you're going to have to go look at the documentation. But that's the flag. Now, we've talked about the new architecture before, really quickly, it is-
Robin Heinze:
Fabric through the modules.
Jamon Holmgren:
...fabric through the modules and cogen. So you can go listen to our episode about the new architecture with Kevin Gozali to learn more about it. But yeah, now in my notes I'm seeing React Native synergy. What's that?
Robin Heinze:
That's the name that Gant and I and John Major came up with for the React Native new architecture, because we're really tired of calling it just the new architecture and we think it needs a snappier name. So I started calling it React Native synergy,
Jamon Holmgren:
React Native Synergy.
Mazen Chami:
Code names are cool. We should start doing that.
Robin Heinze:
It kind of fits because it's all about being more synchronous and-
Jamon Holmgren:
Yeah, it actually does kind of work. Okay. So Mazan is this something that you would just enable immediately on your project or is this something you'd be a little more careful with?
Mazen Chami:
I'd be a little more careful right now considering it's so new. You don't necessarily know how it's going to affect a lot of the current packages that are built in your project. Specifically, if you have a lot of community libraries or third party libraries out there that you're using.
Robin Heinze:
Definitely.
Mazen Chami:
You never really know how that's going to interact.
Jamon Holmgren:
Yeah.
Mazen Chami:
So you want to take it slow and I would probably recommend having a branch out there where you're testing it out as you're going, just to make sure.
Robin Heinze:
That's a good idea. Just have a running branch.
Mazen Chami:
Exactly.
Robin Heinze:
I'd definitely try enabling it on just little side projects or personal projects
Jamon Holmgren:
Yeah.
Mazen Chami:
Because you never know, one day everything might work and you might want to start investing a little more time of getting that built and pushed out because there are a lot of benefit... we don't have to go through the benefits of... because we've talked about it before, but you do level up your app with having this new architecture from a performance standpoint and just look and feel.
Robin Heinze:
You're going to want to switch over to it eventually so you maybe want to think about starting now, just in a safe branch.
Jamon Holmgren:
Yeah. That I think that's good advice. And obviously there's going to be a difference between iOS and Android as well. They're going to have different bugs.
Robin Heinze:
Definitely.
Jamon Holmgren:
They're going to have different behaviors. Eventually smoothed out and everything should work the same, but we don't know that for sure. Now it is worth noting that Facebook themselves or Meta themselves are using on Facebook the new architecture already. It is actually running on one of the biggest apps out there in the wild. So it's probably not as bad as you might think a beta would be, but it's still something to keep in mind.
Robin Heinze:
And I think Facebook has also been making a really concerted effort to get people to opt into this kind of thing sooner and test it and find the issues so they can fix them. So the sooner people start using it, the sooner it will get better.
Mazen Chami:
Yeah. And to that point, I think they mentioned in this article how many contributors we're part of this and how many testers were actually working on this. So there's a big backing of people, developers from the community helping through this. So like you said, Jamon, even though it's still considered a beta, it's a pretty good beta that's out there. Some people wouldn't use beta software so soon in production, but it's worth starting to work with it. I think one point to note is we have it here in our notes and Robin and I, I think talked about it in previous episode. This does not include React 18 just yet.
Robin Heinze:
Correct.
Mazen Chami:
I believe it's coming in a future version, maybe 69 and or yeah. So even though all the bells and whistles are out there with React 18, sometimes if you do force to upgrade, it won't necessarily work. So if you want React 18, I would wait because there's still some plugins that need to happen there.
Robin Heinze:
Well, and so one of our engineers pointed this out yesterday or the other day that React Native actually uses an embedded copy of React, a cloned copy. So even if you were to go and change the React version in your package JSON it would not work because it needs to match up with the embedded React inside React Native.
Jamon Holmgren:
Yeah. And from what I understand, it would appear to work in development mode, it would actually work in development mode, but once you actually bundle it would just fall back to the embedded version, apparently, so.
Robin Heinze:
Yeah, so you'll have to wait probably until I think 69 for react 18.
Jamon Holmgren:
And that's where you're going to see the most benefits from the new architecture.
Mazen Chami:
Yeah.
Jamon Holmgren:
Because that actually then uses batching concurrent and all that. So yeah, that makes sense. Okay, cool. Are there any breaking changes?
Robin Heinze:
Nothing too, too bad. They bumped the version of node on the reacting of CI servers. So the servers that are running the tests on React Native are running node 16 now. And the version that's required for users is 14 and above. They updated Android Gradle to 7.0.1, which means users have to be using JDK 11, the Zulu 11.
Jamon Holmgren:
Yeah. So that one's actually a bigger deal because you're actually going to have to change your environment. You're going to have to go in there... if you installed, and I'm trying to remember the name, open JDK 8, brew, install, adopt open JDK 8, then you're going to need to install the 11 version. And I do have an article it's actually focused on M1 Max, but you could actually use it to upgrade to the latest Zulu 11 is what they recommend, the JDK flavor they recommend for Intel and M1 Max. So I do have an article about this on Redshift, our blog. And I'll post that in the show notes, but you can't just hang out there on JDK 8 and expect things to work just fine. That is a breaking change with this one. So if you upgrade, make sure that your development environment switches the JDK version over from 8 to 11. And we do have an article of how to do that.
Mazen Chami:
Another breaking change. Well, I wouldn't call it breaking change specifically, because it doesn't necessarily break, but the RCT bundle URL provider. So this is on iOS specifically doesn't need the fallback resource. So usually that's when you put in your local host, that parameter is not needed anymore. Or you'd put your local host or pass in Nell most of the time. Now you don't have to do that. And I believe also, Jamon, and you looked into the change log and you found that they even created a new function that you could call that doesn't even need that parameter at all. So two options you can keep it as is with your Nell, even though it won't take the Nell anymore and accept it. Or you call in the new function that just, you don't even have to call that parameter.
Jamon Holmgren:
It looks like it's backwards compatible. In fact, the old method is still being called by the new one. So I think the old one will continue to work at least for a while. But yeah, that's in your app delegate, I guess. And so if you're not in Xcode, messing around in your app delegate, then you probably are fine. But yeah, if you do create a new React Native app and you're trying to point to a local host of some sort to pull in a different Java script package, your React bundle, the RCT bundle URL provider, the signature has changed a little bit. Looks there's also some tooling bumps. So there's a new version of the CLI the new version of Metro, React dev tools core, flipper has been updated. React Native code Jan has been updated Kotlin, soloader, Gradle themselves and then the Android compiling target SDK is now at 31. So those are some changes as well if you're bumping up to 0.68 that you should be aware of. What else do we have? We dug into a few other things. What else do we have there Robin.
Robin Heinze:
So they added test ID forwarding on models. So if you're doing end testing with Detox or APIAM or whatever, test ID was not being forwarded to models before, and it is now.
Jamon Holmgren:
Okay. That's helpful.
Robin Heinze:
I'm not sure if that's a new feature with a fix for something that broke, but that's useful. Looks like there was an issue where if your errors were handled by log box, which I think is a crash reporter-
Jamon Holmgren:
Yeah, it's the more beautiful screen that shows the back trace and stuff like that.
Robin Heinze:
Oh really?
Jamon Holmgren:
Yeah, the yellow screen.
Mazen Chami:
The yellow-
Jamon Holmgren:
That pops up. Yeah, that's log box.
Robin Heinze:
Oh, that's log box?
Jamon Holmgren:
Yeah, yeah, yeah. That's the new thing.
Robin Heinze:
Because if you Google log box it's a different thing. So weird.
Jamon Holmgren:
Really? Yeah.
Robin Heinze:
That's not related at all.
Jamon Holmgren:
Are you on urban dictionary again?
Robin Heinze:
Announcing reacting. So log box was introduced in 63. Got it.
Mazen Chami:
It's also where you have some specific errors, you can import log box from React Native and then ignore them if they start with, I don't know, let's say they start with warning and you don't care about your warnings for some reason you could ignore them.
Jamon Holmgren:
So Rick Hanlin was the one who designed and created this beautiful log box. So I do have to give him a little shout out. It is really nice, but I did complain about it the other day.
Mazen Chami:
You did.
Jamon Holmgren:
I tweeted "while I appreciate the beauty of this error screen, it's useless" because I was getting the console warning of possible unhandled promise rejection. And it gave me no information about where it came from. And Ricky came into the replies and said, "agreed and thank you." So.
Robin Heinze:
Thanks for the feedback.
Jamon Holmgren:
I think they're working on it. I also think that some of the improvements do depend on the new architecture. It's going to make it easier to detect stuff like this.
Mazen Chami:
The next one on here was they fixed the empty blank screen after the bundle downloader failed in the dev environment mode. This was specific to Android.
Jamon Holmgren:
Yeah. I've had this happen to me. So I know. Yeah, that's cool that that one's fixed. Good. And then keyboard avoiding view wouldn't work with the on layout, I guess callback.
Robin Heinze:
Yeah. If you did a on layout callback, it didn't trigger correctly.
Jamon Holmgren:
Okay. So that's nice that that's fixed. There's some other stuff. I think the main thing they kept this one a little more narrowly focused just because of the giant elephant in the room here, which is React Native synergy. We're going to make it the thing.
Robin Heinze:
You adopt that name. Jamon, Jamon you're in the core team. Propose it.
Jamon Holmgren:
I don't think I have that much political sway in there to do that. The new architecture, anyway, that's the big one. So yeah, you just have to in order to do that, when you're running pot install, just make sure you set the flag. This one's all capitals with underscores RCT underscore new underscore arch, arch underscore enabled equals one, and then you can run pot install. And then that will make sure that is running fabric and turbo modules. And then on Android, just set the new arch.
Mazen Chami:
Listen closely, because this is weird. Or is that the one where you're going to D org gradle?
Jamon Holmgren:
Yeah. Yes. So, okay. You can either change the corresponding line in Android slash gradle.properties file for new arch enable and that's headless camel case. So lowercase new upper A in arch, A r c h, but the rest is lowercase. And then this is not the right medium to be doing this.
Mazen Chami:
No.
Jamon Holmgren:
Okay. And then enabled, which has a capital E Or set an environment variable. Should I not even try this one?
Robin Heinze:
Well, link to the docs in the show notes. This is ridiculous.
Jamon Holmgren:
I'm going to try it.
Mazen Chami:
Try this one. Please set your new project using Jamon's translation of this.
Jamon Holmgren:
Yes. You should be coding off of this.
Robin Heinze:
On hard mode.
Jamon Holmgren:
Set it in environment variable, which is all caps, org, O R G underscore all caps. Gradle all caps. And then an... Sorry, and then an underscore all caps project underscore, lowercase new. No underscore now. So we're done with the underscores. New is under...
Mazen Chami:
I’m dying
Jamon Holmgren:
Arch with a capital A, Enabled capital E so it's organization underscore gradle underscore project underscore new arch enabled equals true, and then invoke Gradle with “-P”, New arch enabled again, lowercase and uppercase A
Mazen Chami:
Capital P for that. This is the worst.
Robin Heinze:
Well folks, that's all the time we have for today.
Jamon Holmgren:
This is the worst podcast content that we have ever put out. And we've done some doozies. Then you can run your app with yarn, React Native run Android, or run iOS. And you'll be running using fabric and turbo modules enabled. And yeah so that's how you do that. Wow. If you'd like to nerd out more about React Native this time with visuals, check out my Twitch stream, which I will be getting back to it hopefully tomorrow. I said tomorrow like they would know, oh, hopefully on Mondays and Fridays @rn.live, which by the way, there's a cool new website. Go check that one out or YouTube.infinite.red. You can also join our slack community community.infinite.red You can go to our new Twitch. Sorry. You can go to our new Twitter community rntwitter.infinite.red. If your name is not Robin, I guess also go find us on Twitter. Just in general, Robin sitting by herself, not in the community. She's at Robin_Heinze
Robin Heinze:
Okay. I got to start tweeting at people, come on, let's get some moving on this. I'm a celebrity. I'm going to raise heck.
Mazen Chami:
We'll start a hashtag.
Jamon Holmgren:
Do you know who I am?
Robin Heinze:
Are you telling me the co-host of the React Native Radio podcast is not allowed to join the React Native Twitter community? Unacceptable.
Jamon Holmgren:
You can also find Mazen in the community at MazenChami. You can find me at JamonHolmgren and React native Radio's official handle is 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 one and only sponsor Infinite Red. Check us out. Infinite.red/React Native. Make sure to subscribe. A reminder, we're hiring. Go to careers.infinite.red and we'll see you all next time.
Robin Heinze:
Bye.