In this episode, Jamon, Mazen, and Jon Major talk about what’s new with React Native 0.66, and…Sweatcoin?
In this episode, Jamon, Mazen, and Jon Major talk about what’s new with React Native 0.66, and…Sweatcoin?
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:
Hello again, and welcome to React Native Radio Podcast. Brought to you by Ross. Who reminds you that him and Rachel where on a break. Episode 219, React Native 0.66.
Jamon Holmgren:
Hey Mazen, there's some good news. I heard that Sweatcoin is actually back now. Tell us more about this. I don't know if everybody heard the coin base episode and knows what Sweatcoin is.
Mazen Chami:
Yeah. So back in 2018, I believe when I first got into the whole cryptocurrency game.
Jon Major Condon:
So you're rich.
Mazen Chami:
No. No, here's the caveat. I found this app called Sweatcoin and the idea was it would translate your steps into crypto or so they said. And you could buy product using your crypto on their app and all that. But the app seemed to have shut down at one point, I believe it was early 2018. And I do remember actually at that point I had quite a bit of Sweatcoin. My brother actually ended up downloading it and he didn't like it for some reason. And he transferred all his Sweatcoin to mine. He gave me about 25 and I stepped away from it. So at that time I had maybe 30, 40 Sweatcoin. And recently when I heard they were back downloaded the app and I opened it up and they actually went back and calculated my Sweatcoin.
Jamon Holmgren:
Oh really?
Mazen Chami:
Yeah. So now I have 103. They seem to have pivoted. So it's no longer that whole crypto game. Who knows that might change. Their website has a lot of... Seems to be of updated and rebranded and stuff. And they have advisors now for them. So they're really going crazy. I have 103 Sweatcoin.
Jamon Holmgren:
Nice.
Mazen Chami:
And for context to get an Apple Watch band, it's 135. You could do stuff like Tidal. I don't use Tidal, but you could get your Tidal subscription paid by Sweatcoin by living a healthier life. That's their tagline.
Jamon Holmgren:
I love the mission. That's really cool. And it sounds like it's actually worth something now, but you're saying it's essentially not really crypto anymore.
Mazen Chami:
No. When they first started, I think it was 2018. They gave off that feel of you're translating your steps into crypto.
Jamon Holmgren:
Right. Right.
Mazen Chami:
But now it just seems like translating your steps and I can't really find what one step or whatever translates into Sweatcoin. Can't really find that conversion anywhere. So who knows? We'll see. I might buy something when I get maybe couple more Sweatcoin and see if it actually works. Who knows? I might get charged for shipping or something. Yeah.
Jamon Holmgren:
Yeah. Yeah. I can just imagine someone making some little device to shake their Apple Watch or something.
Jon Major Condon:
Oh, for sure. For sure.
Jamon Holmgren:
Just to mine. It's like how much less efficient can we make crypto mining?
Mazen Chami:
You get five Sweatcoin if you invite a friend. So if you're out there and you would like-
Jamon Holmgren:
Okay. That's what this is all about.
Mazen Chami:
Yeah. I could-
Jamon Holmgren:
Dropping the invite link. You know what? We're going to do that. We're going to put the invite link in the show notes. No, it is not sponsored by Sweatcoin, but I just think it's so funny. It's such a great name Sweatcoin. So we'll drop a link into the show notes.
Mazen Chami:
Now I might be a who knows a millionaire in Sweatcoin, thanks to the all of the listeners.
Jamon Holmgren:
5,000 listeners. Every one of them just signing up and getting healthier. Right? It's all for their good.
Mazen Chami:
Exactly.
Jamon Holmgren:
Well, speaking for our audience is good. What we're doing today is we're going to be going over a new React Native release. It's actually not super new. In fact, it's been a few weeks here, but we've been a little busy, so we haven't gotten to it yet. But before we get into that, I do want to introduce everybody. So I'm Jamon Holmgren, your friendly host and CTO of Infinite Red. I'm joined by my exceptional co-hosts Jon Major and Mazen. I can't believe I haven't used the word exceptional yet.
Jon Major Condon:
I feel like you have.
Jamon Holmgren:
I know, I feel like I have too, but I searched the notes and I couldn't find any of them. None of them popped up with that. Jon Major Condon is a co-host. He lives in Janesville, Wisconsin, and is a Senior Software Engineer here at Infinite Red working on React Native. He's also the Editor of the React Native Newsletter. What's up Jon Major?
Jon Major Condon:
Hey, how's it going?
Jamon Holmgren:
Pretty good. Pretty good. I did notice out my front window as Mazen was talking about Sweatcoin that the recycle truck came by and knocked over my garbage can, which I think was already empty. But then he just left it laying on the side and drove off.
Mazen Chami:
They must have a battle between recycle and trash bin.
Jamon Holmgren:
What if this is sort of a mafia thing? It was like just sending a message.
Jon Major Condon:
Out my front window. I have an American flag that's being strangled right now by itself. I need to go fix that after I've done here.
Jamon Holmgren:
Is it windy over there or something? Or what's going on?
Jon Major Condon:
It looks like it was windy and some of the chord got wrapped around it. So it's just being strangled.
Jamon Holmgren:
Yeah. Hopefully that's not a metaphor for something. Mazen Chami is also a co-host here. He lives in Durham, North Carolina, former pro soccer player and coach, and is a Senior React Native Engineer also here at Infinite Red. What's going on, Mazen?
Mazen Chami:
Hey, Hey.
Jamon Holmgren:
This episode is sponsored by Infinite Red. Infinite Red is a premier React Native design and development agency located fully remote in the U.S. and a couple of us in Canada. If you're looking for React Native expertise for your next React Native project hit us up. You can learn more on our website, infinite.red/reactnative. And don't forget to mention that you heard about us through the React Native Radio Podcast. And also imagine working with this illustrious exceptional team.
Jon Major Condon:
That sweats a lot.
Jamon Holmgren:
That sweats a lot, whether we're working out or not. If you are a senior level React Native engineer located in the U.S. or Canada, go to careers.infinite.red and fill out the form and we will get back with you on that. Okay. Let's get into our topic for today. We're going to talk about React Native 0.66. Version 0.66. How many versions do you think they'll go before they hit 1.0 by the way?
Jon Major Condon:
I've thought about that too. I'm not too sure. I can see it hitting 99. And then that would be one.
Jamon Holmgren:
That would be a nice round number, but what if it's 0.352 and we're still talking about that?
Jon Major Condon:
Yeah.
Mazen Chami:
I could see them doing that just to mess with us too.
Jamon Holmgren:
And then they're just like, "You know what? Let's skip 1.0, it's now React Native 353.0. I'm okay with it. Honestly version numbers are free, right? So this release had 621 commits 92 contributors. React Native continues to be one of the top GitHub repos in terms of contributors. In fact, I'm going to go take a look at the insights right now, just to how many authors and contributors. Let's see.
Mazen Chami:
Just 92 contributors to one version is a big number. And I think that's great for the whole ecosystem. And just goes to show that React Native is growing and wanting to improve. And there's a lot of people out there that are willing to put in the time to help it grow.
Jamon Holmgren:
Absolutely. So I think that GitHub is doing something weird here where they only show 26 authors. But I think that is because when you author a poll request to React Native, it gets re-authored internally. And so you don't really get GitHub credit for it. You still get credit for it, but not on GitHub.
Jon Major Condon:
Under React Native GitHub page. I see just over 2,200 contributors myself.
Jamon Holmgren:
Yeah. That's a lot. That is a lot. That's fantastic. And obviously, this one 621 commits 92 contributors. That's a pretty healthy sign of a healthy repo. So let's get into the changelog. Mazen, go ahead and read off. What's the first thing on the changelog?
Mazen Chami:
So Android has now caught up to iOS in the sense that it handles taps on child views outside of the parent boundaries. So if you have overflow: visible, you can now tap outside to trigger an action. Whether it's closing a modal, say, or creating another action. This was possible in iOS prior now available on Android. And also if I'm not mistaken, closes the loop and makes it closer to the web standards that are out there too.
Jamon Holmgren:
Yeah. That makes sense. If you have a position relative parent, and then a position absolute child, then it's off to the side. In Android, you wouldn't be able to click that, tap that, but now you can because it's now properly checking to see if you should be able to click on it. And I think that's important to make sure that Android, iOS and web align in as many ways as possible. That just makes our job easier as developers, when we're doing cross platform work.
Jon Major Condon:
I'm still waiting on the ability to close a dialogue or a modal by clicking outside easily. Because you can do that on the web fairly easy, but mobile so far, it's been, you have to have a view that surrounds the entire screen, and then you have to click that view to close that modal or dialogue. Still waiting for that.
Jamon Holmgren:
Yeah. I think that these types of things, it's sort of what are the biggest pain points?
Jon Major Condon:
Yeah.
Jamon Holmgren:
And what do you run into? And so as these things are discovered. Why is this not working the same in Android? They're addressing these one by one. So that one's a relatively straightforward one. I think we can just move on to the next one. Jon Major, you want to read the next change?
Jon Major Condon:
New Bluetooth permissions on Android.
Jamon Holmgren:
Another Android change. So what are these new Bluetooth permissions they're talking about?
Jon Major Condon:
So it seems to be in preparation for Android 12. So they're planning on, I guess, targeting the SDK version 31 in the next release, but inside the actual permission itself, I'm not too sure at the moment. Mazen, do you know what's going on inside this Bluetooth permissions?
Mazen Chami:
Yeah. So the permission is Bluetooth advertise and that makes your current device discoverable by other devices. But you can now turn it on. Similar to how you can allow push notifications say, when you're accepting them. It's the same thing where you can using a specific function, you want to advertise your Bluetooth. You obviously need to declare the permission before and then it'll pop up the little alert, that says, allow your app to find connect and so on. You can allow or not allow.
Jamon Holmgren:
Yeah. I like this trend toward making more granular permissions available so that instead of like, "Hey, do we have permission to do everything or nothing?" Rather than that, it's like, "No, this is a specific permission that we're going to be asking for." This is just aligning with as Jon Major said the newer permissions coming out in Android 12 and obviously scan and connect were also added in this and that's another change for Android 12 as well. So Bluetooth improvements, more granular permissions for Bluetooth. Awesome. And then moving on, we have better support for Apple Silicon Xcode 13 and iOS 15. So during a recent React Native live Twitch stream, which little shoutout twitch.tv/jamonholmgren you can follow me over there. What I was working on was... Well, actually, you're going to have to watch the stream. It's really, really cool, but I'm not going to talk about it on the podcast.
Mazen Chami:
No spoilers.
Jamon Holmgren:
It's something really cool. I'm going to be doing an announcement about it, but you have to watch it on the stream. You're not going to hear it here. Well, at least until I release it later. But I did run into a problem when I was spinning up Ignite, because I'm on Xcode 13 and I had to go in and add a library to make it work. And I thought at the time that, "Oh, this is because we're doing something wrong here." But actually is simply because Ignite's a version or two behind on React Native. So if we get Ignite pushed up to React Native 0.66, it will solve the problem I ran into it.
Jamon Holmgren:
It's also nice that it has better support for Apple Silicon, which would be of course, the M1 and M1 Max CPU architecture. I have a MacBook Pro coming, which is really exciting and it's supposed to arrive in the next two weeks. And when it does, hopefully then React Native will be easier to get rolling on because of these changes. So it's exciting to see them continuing to keep pace with the changes that are happening over on the Mac OS and iOS side of things.
Jon Major Condon:
And rather quick.
Jamon Holmgren:
Yeah. Yeah, very quickly.
Mazen Chami:
And just a note, there was a workaround that was done for CocoaPods, part of the whole Xcode 13 and M1 architecture to let you build and link your apps, which workarounds aren't great. But for now while the core team solidifies what the actual issue is, and as the M1 start rolling out more and they're more frequently being used. Then this workaround would probably go away to a more stable fix.
Jamon Holmgren:
Yeah. Anytime we run into a workaround that we can fix in Ignite. We try to roll it out to Ignite so that when you spin up a new Ignite app, it comes with the workaround already baked in, and then you don't have to think about it. It just works. The next thing I'm seeing here is Hermes 0.9. Now I looked into the changes. There are quite a few commits for Hermes 0.9. I don't know, it didn't seem like they surfaced a lot of details around what had changed in Hermes 0.9. It feels to me like Hermes is still in this phase of like, "Let's make a lot of bug fixes. It's still evolving." And like, "Hey, let's do a bunch of bug fixes. Let's make this faster. Let's make this have a smaller memory footprint." It seems like that's mainly what 0.9 is about to me, at least when I looked at it.
Jon Major Condon:
Yeah. And then after Native 0.66 was announced, they did release another blog post that was toward Hermes being the default. So it does go over a little bit more of, I believe the changes that were in 0.9 and will be maybe foreseeable in the future. So just to brush over the headers here in this blog post. Let's see. There's building a new Garbage Collector for Fabric. So there's stuff happening there. They are definitely working on performance pain points, working on getting the TTI to be quicker, which-
Jamon Holmgren:
Time to Interaction.
Jon Major Condon:
Yep. Yep. Which is already very quick, but yes, working on... I guess, overall reducing the bytecode and then pioneering at vertical integrations. So that one, I'm not too searching on what's happening there.
Jamon Holmgren:
Yeah. I think the main thing there is that the vertical integration is basically that the engine and the host, which is like React Native and Hermes are very closely integrated. Rather than having JavaScriptCore, evolving to support all kinds of different things and potentially ignoring the use case of React Native, Hermes is really focused. And so by putting those things together and evolving them together, they can really move quickly.
Jon Major Condon:
Right.
Mazen Chami:
As React Native starts expanding to all new platforms out there. And Hermes being the default, I'm seeing a stat here that says, "Now that Hermes is on iOS, there's about an 18% reduced memory." Which is great. And about 40% improvement to startup, which is also a big win right there. And then Hermes for Windows and Mac OS, there is also a 30 to 40%, less memory than other engines. So there is quite a bit of improvement in memory and speed with Hermes coming along as the default. So that'll be great for performance and working with apps.
Jamon Holmgren:
The nice thing about all of that is that A, it's at least in theory, essentially, you're getting all that for free. You just enable Hermes and hopefully everything works. And then when it does, you're just getting this performance boost for free. And we talked about this in the performance episodes that we did with Mark Rickert. There's not really a silver bullet, just flip a switch, but this is kind of that. This is closer to that.
Mazen Chami:
Getting there.
Jon Major Condon:
There's your silver bullet.
Jamon Holmgren:
Just turn on Hermes. So it's nice to have Hermes 0.9 coming out, and this will be included in 0.66. Beyond Hermes, they did talk in the blog post about doing more nightly and commitly releases. I'm not going to go in this too much, but essentially it'll make it easier to stay on the bleeding, bleeding edge of React Native and be able to test things right there. Some people like that, they like to be right on the edge and see what's new and what's coming along and to help people test things. It's always great for the core team to have someone to have apps that are actually on the bleeding edge. It can be a little disruptive if you have something that is very mission critical. So not recommended to do nightly and commitly releases on a mission critical app. To be honest, Facebook does because they run off a master. They kind of do.
Jon Major Condon:
And I feel like this should also help with just reducing bugs on main.
Jamon Holmgren:
Yeah, totally. Mazen, what are some of the breaking changes? Did they remove anything in this release?
Mazen Chami:
Yes they did. And that's something to keep in mind if you are upgrading Picker and Picker iOS were removed, so your app would probably end up breaking there. And then also status bar iOS was removed. I'm not sure how many people are using that these days, but that's something also keep in mind. And then also with 66, a breaking change that you'll run into for Android is if you have a text input and you're using the prop autoComplete Type. It's now just autoComplete, you're dropping the Type and that's for stuff like username, password, email, name, telephone. I believe they also added a couple more props to it, quite a bit of props actually to it. So you now have the full ability to autoComplete based on the user's preferences there. Well, three mainly Picker, status bar, and text input changes that are breaking changes. So that's something I would say big to keep in mind.
Jamon Holmgren:
Yeah. And there are a lot of Picker community packages out there to replace the built in one with. This is another lean core move to remove things from internal React Native and move them to community packages.
Mazen Chami:
And that's also some good point, Jamon, if you are using a community package for your Picker or status bar or even text input. Be sure to check them out before you upgrade to 66 or help the community out and have a poor request for them to upgrade and improve their packages too. Which I'm sure a lot of people would find value in that.
Jamon Holmgren:
Absolutely. Absolutely. There's also some accessibility changes. I don't know, Jon Major, you want to talk real quick about the accessibility updates? By the way, I love seeing these accessibility updates because we're running into more projects, including the one, both of you are working on it has a lot more accessibility requirements.
Jon Major Condon:
Yeah. So in accessibility, what was added is accessibility state prop to the slider component and then also accessibility actions to button.
Jamon Holmgren:
Okay.
Jon Major Condon:
So I'm not too sure what the actions would be for button, because I know there's already some accessibility props for button, but then also support for toggle button where you can set accessibility role. Disabled touch opacity when accessibility state is disabled, I believe is what is being communicated there. So it looks like... Yeah. So if you're using a screen reader, you can definitely set accessibility state to disabled to make sure that the screen reader does also tell the user that is disabled. And then for lists, we have FlatLists and SectionLists that got accessibility role added to it. And that's only for Android.
Jamon Holmgren:
You can add the accessibility role of list. It sounds like that was already on iOS. They just bringing Android into compliance there. Cool. It looks like they also updated Flipper to 0.99. Flipper actually is quite a bit further along than that. In fact, let's see if I go look at the versions, it's actually at 0.118, speaking of eternal betas here, which was just published a few days ago, as of our recording here, at least. 0.99 is many releases ago. It's like four months old. So I'm not sure why they're so far behind in React Native itself. Flipper is a bit behind on this and I guess it is because Flipper is moving pretty quickly and it's hard to stay current with it. Luckily you can update Flipper independently of React Native.
Jamon Holmgren:
A little aside here. I'm actually really interested to do a Flipper episode at some point, because there's some really cool stuff in Flipper. We just had our onsite, our team got together for the first time in two years last week and we got a chance to do some workshops. One of the workshops was about Flipper and showing some of the cool stuff. Mark Rickert showed some really cool stuff like flame graphs and stuff where you could drill down and see performance. So really just kind of aside here, Flipper is pretty cool. Even though it can be a pain in the butt sometimes to get set up and it adds compilation time and stuff like that. But I think on a whole it's well worth having enabled, if you can do it. Moving on, the CLI was bumped to 6.0.
Jamon Holmgren:
Nothing too spectacular there just some bug fixes, few things like that. I think that was the main thing there. And then the full changelog has a lot of stuff. We'll link to it in the show notes. I don't want to go into too much detail here, but there are a lot of additions and changes, little things like log boxes initialized earlier. And in the process Bubble is upgraded. Folly is updated. Some iOS and Android specific things are changed.
Mazen Chami:
Also, some iOS specific updates now that we're on iOS 13.
Jamon Holmgren:
Right. Yeah. So keeping pace with all the updates, sure seems worth it to change. There's nothing like major... I would assume that we could make the upgrade to React Native. In fact, have you guys done the upgrade yet on your particular project?
Mazen Chami:
No, not yet.
Jamon Holmgren:
Okay. So we'll see how that goes, but so far just looking at what is being reported here. It honestly looks pretty straightforward. Just a whole bunch of small things, crashes, crash fixes, performance updates, some little things like dimensions not updating, in certain cases was updated. Honestly pretty cool. And then also beyond there, there is 0.66.1 and 0.66.2. There may be a couple other patch level releases by the time this episode gets released. Yeah, another evolutionary release for React Native and making React Native better, marching toward that ever in the future of 1.0 release.
Jon Major Condon:
One day.
Jamon Holmgren:
Yes. All right. Cool. Well, we'll go ahead and call that good for now, is a little shorter episode this time, but we have some cool stuff coming up next time as well. Stay tuned, we may have some announcements, some very special guests coming up. I'm excited about one of the set of guests that we have coming up really soon. I would say in the next three weeks, three episodes or so we're going to have a special announcement or, well, I don't know if it's an announcement, but it's definitely a special guest going over some cool stuff. So stay tuned. And where can people find you online Jon Major?
Jon Major Condon:
Yeah. @jonmajorc everywhere.
Jamon Holmgren:
Perfect. By the way, Jonmajorc is that also on Sweatcoin?
Jon Major Condon:
Okay. Not everywhere. Soon. After I use Mazen's link.
Jamon Holmgren:
You got to get that set up before this airs.
Jon Major Condon:
All right.
Jamon Holmgren:
Mazen, where can people find you?
Mazen Chami:
@mazenchami, including Sweatcoin.
Jamon Holmgren:
Including sweat coin. Okay, cool. I'm @jamonholmgren. I'm going to have to sign up for that. And you can find React Native Radio @ReactNativeRdio on Twitter. As always thanks to our Producer and Editor Todd Werth. Our Assistant Editor and episode release coordinator Jed Bartausky. Our social media coordinator, Missy Warren. Our designer, Justin Huskey. And here's a new addition to my spiel here. Our guest coordinator, Derek Greenberg. So Derek, thanks for helping me out with coordinating guests. This is going to be fun going forward. He's been working, I guess in the industry they say efforting. He's been efforting getting some guests on board here. So thanks a lot, Derek. Also, thanks to our sponsor Infinite Red, check us out, infinite.red/reactnative. Special thanks of course, to all of you listening today, all I think like 5,000. It's a ridiculous number. Of course, it's hard to actually track podcast listeners.
Jamon Holmgren:
If you listen to the podcast, please do tweet at us once in a while, just say, "Hey." Whatever you thought about the episode. We like hearing from you. Make sure you subscribe, if you haven't. React Native Radio, everywhere. Reminder, we are hiring careers.infinite.red, and we'll see you all next time.