Todd:

Welcome back to React Native Radio Podcast, brought you by something, episode three 13, react native 0.75 and 0.76 With the three amigos,

Jamon:

We finally have just the gang back together, just us three. It's actually been, I went and looked. We have released eight episodes and recorded four more. So 12 episodes that were guests and just two of us or some combination of those things. And so this is the first episode where it's just us three Jamon, Robin and Mazen.

Robin:

I love our guests, but I also love the three of us.

Jamon:

I agree with that. It's nice to have a moment to just hang out together and talk shop and just nerd out. It's been a long time coming.

Robin:

In fact, we were hanging out in talking shop before we hit record, which is a thing that we tend to do, so hopefully we can get the magic

Jamon:

Back. What else do we tend to do when it's just us three Robin that you were complaining about?

Robin:

We tend to not start on time.

Mazen:

We were supposed mean it's only a half hour late,

Robin:

Only a half hour late. It's okay.

Mazen:

Could you clarify Robin, who is we? Hold on one second. I don't know if I like your tone. For our listeners, there's been a lot of shots fired before and after.

Robin:

I think someone just told on themselves, I didn't even have to fire the shots.

Jamon:

Alright, I get into programming mode. That's the problem. I'm working on this internal project and I'm using Cursor to make it faster to develop. Although this latest thing I think I probably should have, I don't know it. It's always like this thing where it gets you so fast, like 90% of the way, but then you still have to do the last 10%. So I need it to be able to restart a server and all that stuff, but then that's giving full terminal access. I heard about a agency who could outsource this too.

Robin:

True.

Jamon:

Yeah. I should just hire someone to do this small

Robin:

Internal project. That's a really good one. What's their name again?

Jamon:

Oh, you guys are trying to segue me into the

Robin:

Sponsorship.

Jamon:

Depends where your head's at right now. Alright, I will use that segue to get into the sponsorship before our topic. Infinite Red. Infinite Red is a Premier React native consultancy located fully remote in the us. We're a team of 30 senior plus level React native developers and support staff and have been doing this for almost a decade. Actually, as of recording today, it is Infinite Red's birthday, which is pretty cool. That's nine years and it is also our friendly CEO and our senior editor on the podcast, Todd W's birthday as we,

Robin:

He's probably going to cut this out because he

Jamon:

Better not Todd. No. Cutting this out. Happy birthday buddy. You get the day off today, so go enjoy. We miss you Todd. Okay, enough sucking up. Let's move on. So if you're looking for React native, let's see, did I read that? I don't know. Anyway, hit us up. Infinite Red slash

Robin:

Radio.

Jamon:

We changed this RDIO. Okay, infinite red slash radio. Just go to slash radio. Yes, apparently. And don't forget to mention that you heard about us through the React Native Radio podcast. Wow, that was a little bit of a struggle. But let's get to our topic.

Mazen:

Imagine if they released this episode right after the A DHD episode. I will say after listening to that episode, Jamon, I am with you and I actually am going to go and get evaluated because is that right? I did something the last couple of days while I was listening to your episode and I was like,

Jamon:

Huh, okay.

Mazen:

There's something to this. There's something to this.

Jamon:

Yes. I think it's very under. Not to get into that topic, we have a different one, but it's very underdiagnosed, especially among people with inattentive because inattentive isn't like the disruptive kid in class thing. So yeah, that's very interesting. I'd love to hear more as you get deeper into that and yes, that does impact how I run things around here. Alright, our topic, we're actually going to cover both React native 0.75, which we did not cover because we had so many guests in different things we had going on and 0.76, which as of this recording is not yet released, but it's coming very soon. So we're going to just run through both of those. We're not going to get to every last little detail because there's tons and tons of stuff going on in both of these React native releases. You can certainly go read the blog posts for each of them, but we'll give you the highlights. So let's get started with 0.75. Who wants to start? This one has all kinds of cool stuff in it.

Mazen:

I'll go. The first one is Yoga 3.1 has been released. So basically a new layout engine for React Native when it comes to styling and all that fun stuff for all the web people. I did not know about this until I actually got to see it in React native and my mind was kind of blown gap column gap and row gap. That's all that I use now. I know this is old news that's been in React native for a while. After using it, I fell in love with it and I always wanted it to be able to put strings so I could put a percent value that's in there now. So that's perfect. So you can use a hundred percent, 20% for your gap and you can also do percentages for your translate X and Y values also. So it's part of the yoga layout engine.

Jamon:

More alignment with web

Mazen:

Basically.

Robin:

Yeah, closer and closer to CSS every day. They also, so in addition to the yoga updates, there was some new architecture updates. At this point, it's mostly stabilization, making sure everything's kind of up to par because 76 is going to have some big new architecture announcements, which we'll probably touch on in just a little bit. But they're bringing the new architecture into stability, fixing some API things that were missing from the API like adjust font size to fit was missing on Android text Align was not working with inline views on Android, things like that. They're just finding some gaps in sort of bringing everything up to and making sure it's really stable. Also, because we're getting to the point where the new architecture is going to be adopted by a lot more people, they're updating the React native directory in partnership with expo. And this directory includes all of the third party libraries and whether or not they're new architecture compatible or not. So you can kind of look at a glance whether the libraries you're using are ready for the new architecture or not.

Jamon:

Yeah, that'll be super useful. You can go look up your libraries, make sure that they're ready to go. And do they have links to the issues if they're not in progress?

Mazen:

They have links to, I actually have this open because it's come very handy on my project. They have links to a lot of the pull requests, well not links. It'll kind of say pull request is open or what version. Oh, I see. Has it it and then was it tested against iOS and Android and when was it kind of thing. It has a very expo mindset. So for example, if there's a third party library that has an expo equivalent, so React native localized, it'll point you to expo localization, which already has it React native localized is already react native, new architecture compatible anyways, but no exact links. You kind of have to do your own digging, but it'll kind of say it's ready, the PR is open and stuff like that. Yeah.

Robin:

Last thing about the new architecture. They are inviting everyone, the community developers to fill out the new architecture survey, which we're going to put in the show notes. They really, really need feedback from the community on how the rollout is going, if you're using it, if you're not, how it's going. So we'll put that link in the show notes and please fill that out because the more information that they have, the more that they will be able to make the new architecture better.

Jamon:

That's a good plug. Robin, is that still open by the way?

Robin:

That's a good,

Jamon:

Is it like a long running?

Robin:

It's just a Google form.

Jamon:

Okay. Okay, cool. This next thing is sort of the end of an era. So back up to this point, you could do React dash native in Knit, and then it would use a bare bones React native template, which was in the React native repository that has now been moved to the React native community. And you can still access it with NPX at React native dash community slash CLI in it. That is what you would get. That would be like the old template. But now obviously there's other alternatives. There's expos cli, there's Create Expo app, there's of course Ignite, which we created, which is NPX, ignite dash CLI and others. So definitely be thinking about this is kind of part of that push toward using more of a React native framework like expo rather than kind of hand rolling your own every single time. They also added some auto linking, I guess performance improvement. So auto linking is faster, should help build. So for the

Mazen:

Next bit, we have breaking changes if there are any. Well spoiler, there's a lot. We think majority of the apps might not be impacted, but some might be because a lot of times with these updates, they hit your dependency tree, whether it's your dev dependency or your actual dependencies. So we're not going to go through them, check out the announcement, look it up, and I'm sure you'll be able to quickly find out if there's any breaking changes within your application. That's

Jamon:

More or less, I guess the highlights of React native 0.75. There were over, man, there were almost 1500 commits from 165 contributors, which is absolutely wild. For one release, it was an amazing release. Let's see, Nick Goleman and Joe Viki for Yoga 3.1 and layout improvements. AHI for the UI manager, new architecture stuff felt pen for accessing the JSI runtime and turbo modules. There was also Alan Lee, so Lynn for Min SDK changes and Kudo for the auto linking performance improvements. Alex Hunt for, they removed RAM bundle and profile Hermes stuff, which has been kind of deprecated for a long time. So thanks to those and the many, many other contributors that have brought improvements to React Native 0.75, really huge for so many people. Obviously all of our clients will benefit from this. And yeah, we've already moved over quite a few of our clients and looking forward to the next release as well. Of course, go to the React native of upgrade helper to upgrade to the latest 0.75. Speaking of latest, 0.76 is coming out very soon and it may be out by the time you actually listen to this. So let's go through the updates on that one.

Mazen:

Just for our listeners, so you're aware, a time of recording this RC three was literally released an hour ago. Oh, we're still very early.

Robin:

We did our prep on RC two and now there's RC three.

Mazen:

Yeah, this is outside of Scope editors, but I did the check. There's nothing significant talk about,

Robin:

Yeah, 76 is going to be a really, really important release. There were two React Universe talks last month about things that are coming in 76 Mazen, you were there. Can you tell us about the talks?

Mazen:

Yeah, so the first one is Nicola and Ricardo's talk titled What A Year for React Native. And pretty much basically just saying that when 76 comes out, the New York architecture will be enabled by default and

Robin:

What

Mazen:

Yes. Hold the phone. Exactly.

Robin:

Are you saying instead of that after

Mazen:

What you have to opt out now,

Robin:

How many years now?

Mazen:

Yes.

Robin:

Have we been talking about the new architecture and No,

Mazen:

It will

Robin:

Be the default instead

Mazen:

Of version one. I'm kidding,

Robin:

But it's not version one. I don't think they're ever going to do version one. I think they've said they're just not going to. It's too late. It's too late.

Mazen:

So that's a big one. And I think that being said now that Meta and the entire core team believes that new architecture is stable enough to have it on by default. I think that's a good reason for you, our listeners, to kind of start giving the go if you haven't.

Robin:

Yes, at the very and start reporting those

Mazen:

Issues. Let's start getting that rolling. I know personally I've started the initiative internally with all our client projects. I'm actually going to reach out to one of our client, one of our other teams that's working on a different client project that I'm on to get them to start the process. And we have a whole step-by-step guide through that. So that was one big one.

Robin:

Obviously this is like, it's on by default in new projects with the idea that the new architecture is stable enough to build an app from scratch, turning it on in a project that's already existing is a completely different thing.

Jamon:

I think that's the takeaway

Robin:

And you're not going to be able to turn it on right away. But like Mazen said, at the very least, everyone out there who is building a React native app should at least turn it on and see what happens. See what's broken, what doesn't work. Give feedback to the team, the core team. They've got a ton of GitHub issues and discussions and stuff. Or just tell us on Twitter, tweet about it, whatever. But you should be trying it at least.

Mazen:

Yeah, I think we even said it when we're talking about version 75. One of the things with the new architecture improvements was to get the API closer, right? So 75 was basically them setting it up on

Robin:

A get ready, they're on the line, they're in position, and then 76 is like, okay, this is go, this is

Mazen:

Real now. That was the first talk. The second talk, which I absolutely loved, and we will probably get Alex on here to talk about a little bit more in the future, is the React native debugger, the new React native debugger dev tools, which is available and turned on by default in 76. So basically it takes all our pains and our gripes from the community and as React native developers and puts together a dev tool that looks familiar. I believe it's the current dev tools,

Robin:

Right? It's going to remind you of reactive tools.

Mazen:

It's basically that,

Robin:

But it's React native dev tools

Mazen:

Rebuilt. Exactly. React.

Robin:

And this is the same as the experimental debugger that's been out for a few releases, right?

Mazen:

Yeah. Just renamed, correct.

Robin:

Right. They actually gave it a name and said this is stable now

Mazen:

React native debugger. Yeah. Yes. And I would listen to Alex's talk because he also in the talk mentions that internally at Meta they've been using these debugger for, I think it was one or two versions already. So it has been tested and is stable enough to be released to the community, still missing some features that he also goes over. But the plan is, I would assume 77 will include some of those features and just grows from there.

Robin:

We are planning to do a whole episode about debugging and React native, including this new debugger possibly with Alex.

Jamon:

Yeah, it's been changing so quickly, including things like the name where if we'd already done the episode, it'd be like it would've been out

Robin:

Right away.

Jamon:

Yeah, exactly. So we're kind of trying to let it settle down a little bit, but it is coming and I think the thing that I'm most excited about is actually break points and debugger statements.

Robin:

Well, and the thing about debugging and React native is what I've learned is that there have already been ways to do things like break points, but they're so scattered and they're in five different tools and you never know which one to use and they're not documented. And it's kind of just the wild wild west. And I love the idea that we're standardizing on an official, this is the debugger that React native itself officially supports and releases and it has all the things that you could need in one place and it's going to be documented and stable and I'm excited.

Jamon:

Yeah, I think they're recognizing that really React native isn't complete without a really first class debugger. And actually I just got a potential client last night messaged me was like, what about the debugging situation here? I tried the Chrome debugger, like the remote chrome debugger and it's really slow. And I'm like, yeah, it's just we're in kind of this awkward in-between stage, but

Robin:

They're very

Jamon:

Aware of the problem, problem coming.

Robin:

They're working on it.

Jamon:

Yes, it's coming. And in the meantime you have React Toron of course, always other options, but React Toron is always quite

Robin:

Nice. I think I'll always use React Toron. I think it's the best for certain things.

Jamon:

There's a lot of people who don't even know where it fits in to the story. We should probably do more of a,

Robin:

I will always use Tron for viewing my state and for viewing my network request network.

Jamon:

Yeah,

Robin:

Always.

Jamon:

It's great for that. It's big for network. I think we need to add a tab for network, even though they show up in the timeline. I think we just need a tab for just network stuff.

Robin:

That's what I want. Yeah, I agree with that.

Jamon:

Anyway, not to get sidetracked by Rack Toron. There some other notable changes. One is that the iOS minimum version is now 15 and box shadow and filter CSS properties. Wait, hold up. That's a big deal.

Robin:

How long have we been talking about shadows on React native and how they're

Jamon:

Shadows are so hard.

Mazen:

Terrible.

Robin:

If you came from the web world at all where adding a shadow is a one line change and then you come to React native and on iOS it's minimum like a six line change. And on Android you don't even have the ability except with Elevation, which is not very precise. But we have, they just added the box shadow. It's like the CSS property now.

Jamon:

So filter. There's a lot going on there because on the web that's been around for a long time. You can do things like blurs and whatnot. It's a pretty powerful tool. Now. It's been around, actually. I went and looked at the commit and there was an experimental underscore filter thing. I haven't actually tried

Robin:

It. I think they were both box shadow and filter were in

Jamon:

Experimentally

Robin:

For a couple of versions maybe.

Jamon:

And so now they're officially part of the API and yeah, excited to try some of these things out. And again, more alignment with web. You're seeing a trend here.

Robin:

That's been a trend for a while. I think they, some are along the line. They decided to become more like web and not the other way around.

Jamon:

Yeah, I mean web is just such a huge community

Robin:

Because they wanted standardization and so they decided to move towards web.

Jamon:

Exactly. Web

Robin:

APIs. Alright,

Jamon:

Well this was a little bit shorter episode, but that's fine. It has nothing to do with us getting started 30 minutes late. Of course.

Robin:

Absolutely

Jamon:

Not. Of course not. We would never do such a thing. If you want to know more about this, of course, go look at the show notes. We will put the link to the change logs of course, and blog posts if they exist. And Robin, Robin, do you have a mom joke to take us out of this episode?

Robin:

Even better than a mom joke. I have a math joke.

Jamon:

Oh boy. One plus one equals 11, not JavaScript.

Robin:

He's a frequent flare on the show, but this is from Carlin. I can tolerate algebra, maybe even a little geometry, but graphing. That's where I draw the line.

Jamon:

All right. We'll see y'all next time.

Robin:

Bye.

Jed:

As always, thanks to our editor, Todd Werth, our assistant editor, Jed Bartausky, our marketing and episode release coordinator, Justin Huskey and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Hines and Mazen Chami. Thanks to our sponsor, infinite Red. Check us out at infinite.red/radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.