Jamon, Mazen, and Jon Major go over the latest news in the React Native world, including news from Expo, Native Base, and React Three Fiber!
Jamon, Mazen, and Jon Major go over the latest news in the React Native world, including news from Expo, Native Base, and React Three Fiber!
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 shameless self-promotion. Episode 220. We React to News.
Mazen Chami:
So, Jamon, I hear you got your new M1 Max MacBook Pro.
Jamon Holmgren:
Yeah, I did. And I am not using it yet. At least not here. Well, I was playing with it till midnight last night, but the one thing I didn't do was test it for podcasting. I didn't want to take the chance.
Mazen Chami:
Christmas came early, I guess.
Jamon Holmgren:
No, seriously. Seriously. I was actually on stream, so I was streaming, as you all know, I'm sure everybody in the audience knows by now and everybody has tuned in by now, right? Twitch.tv/jamonholmgren. I've been Twitch streaming some coding for, I don't know, a month or two, something like that. Yeah, a couple months I think. And I do that on Monday, Wednesdays and Fridays at 10:00 AM Pacific. And I go until about 1:00 PM. And I was on stream and I noticed a notification on my Apple Watch that my... Yeah, I'm very apparently Apple centric here, that it had been delivered.
Jamon Holmgren:
So I ran downstairs, grabbed it, came back upstairs and actually unboxed it on stream. So that was pretty fun. And we could maybe even link to it in the show notes, my unboxing there, but it's pretty sweet. So I was actually pretty impressed by the Migration Assistant actually. I didn't expect it to be as smooth as it actually went, but I was able to migrate over and then get it up and running and actually compile and run on React Native app without... Well, at least on the iOS side, without any messing around, of course it was doing emulation. So I had to do some installing of different apps and stuff to make sure I got the right arm version for the new architecture and stuff, but it looks pretty sweet.
Mazen Chami:
That's awesome. Can't wait to hear how you sound on the new one.
Jamon Holmgren:
I'm sure I'll sound a lot smarter than I have, which is a relief to everybody.
Mazen Chami:
And the days of the fan running in the background are probably gone. Oh well.
Jamon Holmgren:
Yeah. I had them side by side and I was just hitting enter on both of them for the same operation just to kind of see whether it's faster or not. And the one I'm on right now, recording this is a 2019 i9, pretty specked out. So it's no slouch, it's a pretty decent computer, but yeah, it was definitely faster in a lot of things. It was actually slower in a couple things, but it was because it was doing emulation or whatever it's doing, where it was running Rosetta. Rosetta basically allows you to run Intel, apps compiled for Intel on the arm processor. And so anything that was running Rosetta was slightly slower. Usually not that much, but a little bit slower, but when I installed, I don't use Chrome, I use Brave, pretty much the same thing, but I installed the... so I was navigating around with Brave and it was pretty much normal, what I expected. And then I installed the arm version of Brave and it's just so snappy.
Mazen Chami:
Very brave of you.
Jamon Holmgren:
Geez.
Mazen Chami:
Sorry, dad jokes.
Jamon Holmgren:
Nice dad joke. So, I guess we could get started here. I'm Jamon Holmgren your host and friendly CTO of Infinite Red. I only have so much time because I need to jump over and start playing with my new MacBook Pro as Mazen so hopefully pointed out. I am joined today by my fabulous co-host John Major and Mazen. Harris is still in Helsinki, I think. He's over there. I don't know how much Finnish he knows, but knowing him, he's probably fluent. John Major Condon is a senior–
Jon Major Condon:
Not in Helsinki.
Jamon Holmgren:
Not in Helsinki. He is a senior software engineer here at Infinite Red, lives in Jamesville, Wisconsin. He's editor-in-chief of the React Native newsletter. What's up John Major?
Jon Major Condon:
Hey, Hey. I just got a new truck, not the truck, but I'm driving a F350 temporarily so–.
Jamon Holmgren:
Wait, so–
Jon Major Condon:
There was a 350–
Jamon Holmgren:
I thought you already got a new truck this year.
Jon Major Condon:
No, no, not already, but it's coming. It's being built. It's almost here, potentially next week.
Jamon Holmgren:
So just for my sake and our viewers, this is the one that you bought the wrong one and then got the new one.
Jon Major Condon:
Oh yeah. The story continues.
Jamon Holmgren:
Wow. Okay. I didn't realize that you hadn't got it delivered yet. That's yeah. That's something else. So you have a temporary one. What? It's just a loaner from...
Jon Major Condon:
Yeah, just a loaner. They're just letting me hang out with it and yeah, it's a F350, so it's bigger. It's a diesel as well, dually. So it's pretty interesting, much different than what I'm getting.
Jamon Holmgren:
You wouldn't fit in very well in downtown Portland.
Jon Major Condon:
Oh I'm sure.
Jamon Holmgren:
in Janesville.
Jon Major Condon:
Yeah. Oh yeah. Most definitely.
Jamon Holmgren:
Mazen Chami is a senior software engineer here at Infinite Red, former pro soccer player and coach lives in Durham, North Carolina. Mazen, are you driving around in a giant pickup truck?
Mazen Chami:
No. A very quiet car. That is, my Tesla.
Jamon Holmgren:
Do you have a Tesla? That's right. Yeah.
Mazen Chami:
I did move from a Dodge Charger Hemi to a Tesla–
Jamon Holmgren:
Oh, that's right.
Mazen Chami:
Yeah.
Jamon Holmgren:
So you like big engines too?
Mazen Chami:
Yeah.
Jamon Holmgren:
Yeah. Cool. Well, this episode is sponsored by Dodge and Ford, apparently. Also, Infinite Red is a premier React Native design and development agency located fully remote in the US and Canada. As far as I know, we are one of the only agencies out there that only does React Native. We just focus entirely on React Native. We have done it since 2015. When it came out, we have people that are pretty much, I would say experts at all things React Native. So if you're looking for React Native expertise consulting, if you need to get it off on the right foot, just hit us up. You can learn more on our website, infinite.red/reactnative. Don't forget to mention that you heard about us through the React Native radio podcast. And also imagine working with this awesome team. You don't need to have a Tesla or a giant F350, but you do need to have some experience writing, React Native code. Go to careers.infinite.red.
Jamon Holmgren:
We hire pretty much only in the US and Canada at this point, but we are fully remote within those two countries. All right, let's get into our topic for today. This is our recurring episode for We React to News. So there's often small bits and news that come out that don't necessarily warrant a whole episode, but we collect those. And a lot of this is John Major, because he's doing this for the newsletter, but he comes up with some ideas and throws them into our Slack channel. And then we come up with four or five of these that we want to talk about. So today we have four of them that we're going to talk about. A lot of expo news. Our friends over at Geeky Ants have some news about Native Base. We are going to talk about faster bundling and React Native and also React Three Fiber, which is kind of a fun one. Let's start off with the Expo news. What's going over at Expo, John Major?
Jon Major Condon:
Expo SDK43.
Jamon Holmgren:
Hot off the presses.
Jon Major Condon:
Oh yeah. I believe this one came out a few weeks ago actually. And in Expo SDK43 land, there are Expo modules, which replaces Unimodules. And I believe we're updating Ignite to use Expo. Am I correct?
Jamon Holmgren:
We are. Yeah. We actually have a poll request in flight right now. It should land by the time this thing is out. So Unimodules is interesting. It essentially allows you to, or allows Expo to expose their Expo modules to non-Expo projects. I always say Expo gives away too much stuff. And this is kind of an example of it, but they're actually, they said it was essentially kind of a little bit confusing. So they're moving away from the Unimodules package and they're moving toward Expo as a runtime package instead, or maybe not a runtime, a build time package that kind of links everything up and makes it work. So these allow you to use expo's very high quality, third party packages. So we are going to be moving over Ignite to use the new Expo package.
Jamon Holmgren:
So a while back there was ExpoKit. And I don't remember, we're probably going to have to have Brent on again to talk about this, to kind of straighten all this stuff out. But essentially the package is called Expo now, not ExpoKit, not ExpoCLI there, those are other things and it's not Unimodules anywhere. It's just Expo and it's pretty light, but allows you to then use expo packages within your non-Expo project or Expo project, obviously. So what else is new in the Expo corner of the world? Especially I guess new stuff in SDK43?
Jon Major Condon:
Looks like EAS build is released. We actually talked about this back in React Native radio 191 with Brent.
Jamon Holmgren:
Oh yeah. With Brent. Yeah.
Jon Major Condon:
I wasn't available for that one, sadly.
Jamon Holmgren:
Yeah, it was a good one. I really enjoyed chatting with Brent and we can link to that in the show notes so everybody can get caught up on that. But that was good to talk about EAS build. I actually got a chance to use EAS build on stream. I don't know if people know this, but I've been streaming. I'm going to keep saying this.
Jon Major Condon:
Do tell. Yeah.
Jamon Holmgren:
I actually changed my Twitter handle.
Mazen Chami:
If you don't follow Jamon on Twitch, please do. Great content. And you're going to hear about it through the rest of this podcast.
Jamon Holmgren:
Thank you Mazen. I appreciate it. It's really fun. I love it. It's fantastic. But I got a chance to use the EAS build. Brent was actually in the stream chat and he was talking with me about it and I used it to release a beta version of Chain React app, which I will get back to actually. I switched over to some other stuff. That's actually really exciting too.
Jamon Holmgren:
We'll get a chance to talk about that on the podcast at some point too, but not there yet. If you want to know what that's all about, it's pretty exciting. Just tune into Twitch. There's also React Native 0.64.2, which is a few versions behind on Expo. They are going to be getting caught up here in the next SDK, but they're just very, very cautious about upgrading to the next React Native. They do a lot of testing. React 17, as well. And so that's a bump there for Expo SDK43. So the next thing on our list is coming out of our friends' Geeky Ants in India, Native Base 3.0. Mazen, what's that all about?
Mazen Chami:
Yeah. So they've done a lot of stuff with this latest version of Native Base and the blog post, which I think will link in the show notes kind of goes over everything, but they have a lot of different improvements to their library. One big one was the mobility. So you kind of have the ability to set up your own colors and your own type scale, for example, with your font, with your specific fonts and that kind of carries over throughout your application. I think one large overarching idea here is this is a very small package that also helps make your app look clean and also kind of match your own design template. Theming usually does that and that's really good there. One thing that I also noticed was they're using now React Native Ario to help you with their accessibility hooks, out of the box.
Mazen Chami:
And that's really good. We've talked about them in the past where we should probably start putting accessibility high on our list of developers. Since, we have a large base of users out there that use applications these days. So that's one thing. There's also, one thing most apps usually don't tend to do is a kitchen sync template. Geeky Ants kind of have, I think you kind of run the application and it's almost like a storybook version of Geeky Ants in their own style. And you get to see everything in action from their avatars to their buttons, to their switches and so on. And I think that's really cool because it shows you them in action as it would in your application and kind of diving into another point, looking at the GIF or GIF, you'll see, they have the ability to toggle between dark mode and light mode. And that's a really cool feature. So you can kind of get to see both of them as a user would.
Jamon Holmgren:
Yeah, that's really cool. Really quickly on the accessibility side of it, which you touched on. I feel like that's something that keeps coming more and more to the forefront. We're doing some projects right now where accessibility is a first class citizen and we're going to try to do more, but there's actually a severe lack of information out there about React Native accessibility. There's a fair amount about web React stuff, but there aren't that many talks or I was actually looking for a really good course. I really would love to see a course about accessibility and React Native. Haven't really seen anything. If anybody in the audience knows of anything, please tweet it at me. I would really appreciate it. It would be very helpful. We just want to continue to get better and better at it.
Mazen Chami:
Yeah. And I think one thing, React Native Ario is also built by Geeky Ants. So that's kind, really cool that they kind of have the plug and play between the two of them.
Jamon Holmgren:
Yeah, that's awesome.
Mazen Chami:
One other, a couple other things I kind of wanted to bring up was they give you the ability to have a responsive app. Now, some of you might be thinking isn't that usually specifically tied to web, but from what I'm gathering, if you were to put your break points in the right spot, you can essentially build your React Native app and it would transform or be responsive to whatever device screen that you have, including tablets. And according to this picture here, it can also translate to what I'm assuming is React Native web also. All-in-one code base similar, you don't have to do something simple, like checking the platform to then show different components. Rather, these break points kind of handle it very smoothly and seamlessly. So that's something that's pretty cool where React Native now can be fully responsive with web.
Jon Major Condon:
Yeah. I Think it's pretty seamless because the break points do sit in the theme, correct?
Mazen Chami:
Yes.
Jon Major Condon:
And then the components end up digesting what's in the theme for those break points. And so you can do basically all your sizing within your components that you need to do.
Mazen Chami:
Exactly. Yeah. Yeah. They have, every single component in this library has a lot of props and they're very self explanatory what they are, and they are very helpful in getting you to put in the break points, put in the specific colors. If you want to round a corner, for example, those are all there.
Jamon Holmgren:
Oh, nice.
Mazen Chami:
And specifically pull from your themes. Yes.
Jamon Holmgren:
Yeah. That's awesome. I could see how that'd be really helpful. I'd like to, at some point, try Native Base 3.0 and see how it goes.
Jon Major Condon:
Can that theme be installed, I guess, separate from Native Base, the library itself?
Mazen Chami:
That's a good question. I'm not sure. So you're specifically mentioning the theming aspect of it?
Jon Major Condon:
Yeah.
Mazen Chami:
I would assume so because when you're setting it up, you would essentially set up, you would extend a theme which comes from their library and you would set up your theme, whether it's colors and fonts and all that. And you could essentially set up your own provider to handle the theme.
Jon Major Condon:
Oh sure.
Mazen Chami:
Down the chain. So I would say yes, but if they're already giving you all that setup, I feel like it's just easier to, because you're already installing the entire library as is.
Jamon Holmgren:
Yeah. That's awesome. Really looks like they're going beyond just sort of your typical to-do app here and giving you a lot of flexibility to go cross platform, cross screen size, of course different themes and components and kitchen sink. It's good stuff. Geeky Ants, we've known them for many years and they've been a part of Chain React over the years and we like collaborating with them on various things. So it's been cool to see Native Base evolve during this time.
Mazen Chami:
And if you are using Native Base 2.0, at one point they have at the bottom is, they will only be supporting critical bugs until March 22. So, probably good to look into migrating to 3.0. And with some of these features that they're outlining here, I think it sounds like it's very much worth the transition.
Jamon Holmgren:
So this is actually technically out of Expo as well. Evan Bacon, I think, has been working on this, but drastically faster bundling in React Native. John Major, what's that all about?
Jon Major Condon:
Yeah. So in Expo, there's the Expo CLI and there's this new experimental exotic transformer. I love that. Exotic just...
Mazen Chami:
Joe Exotic.
Jon Major Condon:
Oh, let's hope not.
Jamon Holmgren:
Yeah. Is it timed with Tiger King Two coming out? It kind of seems suspicious timing there.
Jon Major Condon:
I mean, that would be good promoing. But I mean, the new exotic transformer improves the bill times by approximately two times and decreases the final bundle size by up to 18%, which is great.
Jamon Holmgren:
That's nice to get for free right out of the box. Yeah, that's cool. And it seems like essentially, he has a blog post about this, we'll link to that, but the biggest thing is transforming because obviously you're using language features that aren't supported in the run time. You're doing various imports and exports and et cetera. You have to transform the code. And so essentially Metro is transforming every file and it's that one under the hood. So Evan took that on and shipped a new transformer or was working on a new transformer, at least. That is really, it looks pretty cool. I've been wanting this for a long time. I even did a little experimental kind of looking into maybe supporting EAS build, which is incredibly fast for React Native, but that's a more difficult problem than it seems on the outside. It's a lot to it. So I'm glad that Expo's been taking this on.
Jon Major Condon:
Yeah. There's also some more inside the Expo CLI. There is the fig auto complete support. Which is, I guess basically what VS Code style complete does by the GIF or GIF, depending on your dialect. I can't really tell what is the difference here, but for the most part you get auto complete, a better auto complete, so good stuff. Lastly, the fun thing here is that QR code, when you run Metro is much smaller, because that QR code used to be very big. So just a little fun thing.
Mazen Chami:
Yet again, Expo kind of going above and beyond and making it harder to not choose Expo for your next project.
Jamon Holmgren:
Yeah. Sometimes I feel like we're just Expo fans over here on this podcast, but Hey, there's other cool stuff happening, but Expo is providing a lot of the momentum in the community. So we got to recognize that. Cool. Well, speaking of other people in the community, we do have this cool, well actually Mazen, can you explain what React 3.0 Fiber is?
Mazen Chami:
So, React 3.0 Fiber is a React render for three.js. If you're not familiar with what three.js is, three.js is a JavaScript 3D library. So this would essentially be a web React specific library that gives you 3D modeling. So you can kind of... Let's take James' M1 Mac Max Pro for example. Imagine kind of that MacBook kind of floating in the air and kind of rotating, opening up all done via a 3D model. That could be something that you could do via React 3.0 Fiber.
Mazen Chami:
Now with version eight, they've added React Native support. So you can essentially now use this quote unquote react library in your react next React Native project, and kind of put in that 3D animation in your project. Now, how often do we see that in applications these days? Not much. Maybe because it didn't necessarily exist before for React Native. Now it does. So I think this is a pretty cool next step. So now your React Native apps can support some 3D rendering right within using this library. And just as a quick caveat, this does require React 18, which is still in beta as of today when we're recording this podcast. So that could change.
Jamon Holmgren:
So, I have lots of questions. This is available in React Native, right?
Mazen Chami:
Mm.
Jamon Holmgren:
And how is it rendering in React Native? Is it using an OpenGL canvas or something like that instead of WebGL on the web side of things? Is it some sort of OpenGL thing?
Mazen Chami:
Yes. So, it can run the same code on the Native open GLs without web view and web GLs. And stuff like that. So it's using Native open GLs.
Jamon Holmgren:
That's really cool. So you get Native performance on iOS and Android, cross platform and then on web, you've got WebGL Native performance there.
Mazen Chami:
Absolutely, yes. You don't have to worry about making sure you have web views and optimizing for that. You're now getting direct plugin to Native.
Jamon Holmgren:
You know what? Interesting. Expo GL–.
Jon Major Condon:
I think Jamon should play with this on his Twitch stream.
Jamon Holmgren:
Oh, did I mention? Don't know if I mentioned–.
Jon Major Condon:
Jamon's Twitch stream.
Jamon Holmgren:
I actually have a really cool... You can go to @JamonHolmgren obviously on Twitch, but we actually got a really cool domain: rn.live, because it's React native Live, is what I call my series. So rn.live.
Jon Major Condon:
Very cool.
Jamon Holmgren:
Simple domain. Simple.
Jon Major Condon:
Love it.
Jamon Holmgren:
Yeah. Super easy to remember.
Mazen Chami:
You know, what's weird about that?
Jamon Holmgren:
Plus we'll remind you.
Mazen Chami:
AT&T, who I use for my internet provider says that website is spam.
Jon Major Condon:
Interesting.
Jamon Holmgren:
Well, it depends on the day. I may be spamming people. Like right now.
Jon Major Condon:
Yeah. Spamming in this podcast.
Jamon Holmgren:
So if you can't get there by rn.live, you can just go to twitch.tv/jamonholmgren. So apparently Expo's behind this too. Expo GL, they use GL View kind of to bring this in. I assume this is some sort of a Native integration. I haven't looked into it deeply, but...
Mazen Chami:
Yeah, they're still working on it. V8 is not out yet. They did announce that it's available on Native. So if you want to try it out, you'd have to pull a specific branch to get the React Native support. But other than that, I think once they're done, I think we'll have some more documentation on how to actually install it.
Jamon Holmgren:
Well, React 3.0 Fiber, people. If you want to talk about that on the podcast, reach out to me, jamon@infinite.red, I'm happy to chat with you and see if we can schedule something. It'd be really fun. Cool. That was our three, four quick hits, I guess. And not only that, but we have a weird bug today. We're bringing back this section whenever we have one. I noticed on Twitter that Mike Cavalier, which by the way, that's a fantastic last name, Cavalier. I play Age of Empire sometimes. And Cavaliers are knights that have been upgraded. That's really cool.
Jon Major Condon:
Oh, I was thinking basketball.
Jamon Holmgren:
Yeah, The Cavaliers, I guess.
Jon Major Condon:
That's still the same thing.
Jamon Holmgren:
On device, let's see here. So Mike tweeted, and this caught my eye, he said solve the frustrating React Native issue this morning. If you're debugging on a real Android device and your on press handlers don't work, they might be registering as on long press due to, and this is crazy.
Jamon Holmgren:
So I don't know, it's wild. Due to the device's internal time, not matching your computer's internal time.
Jon Major Condon:
Definitely a different category for a weird bug.
Jamon Holmgren:
Oh my goodness. So apparently what it's doing is checking the time when the press starts and then the time that it ends and somehow the date is being sampled from your device versus or sorry, the client device versus your computer. I don't know, but it's registering as a long press, which is, wow. He says, you can test this by, by running ADB Shell quote date unquote and and date. And if they don't match exactly, this is your problem. And he says to fix it, disable and re-enable automatic time calculation on both the device and the laptop, rebuilt both. And then there is another solution that he links to on React Navigation's GitHub Repo. It is something else. It's quite a... I'm sure that was very frustrating to figure out. I'm not even sure how he figured it out. That is a weird bug.
Mazen Chami:
Yeah. And I do see that there is an open issue on the GitHub for React Native. So I think it has been brought to Facebook's attention and I'm assuming there'll probably be a fix for this soon.
Jon Major Condon:
Wow. That's crazy.
Jamon Holmgren:
Time of device and host machine out of sync. Yeah, this is something else. But anyway, if you're on Android and you're noticing your on presses aren't working, maybe throw an on long press and see and throw up an alert and see if it's doing that instead. All right. I think that wraps up this episode. Where can people find you, John Major?
Jon Major Condon:
@johnmajorc.
Jamon Holmgren:
And Mazen?
Mazen Chami:
@Masenchami.
Jamon Holmgren:
And you can find me on Twitch. @rn.live.
Jon Major Condon:
There he goes again.
Mazen Chami:
Just Twitch. What about the Podcast?
Jamon Holmgren:
I'm missing the podcast. Yeah. Sometimes on the podcast @reactnativerdio. And of course you can find me @jamonholmgren on both Twitch and Twitter. In fact, if I type in T-W does it go to Twitch or does it go to Twitter? It still goes to Twitter. So I'm still a little bit heavier on the Twitter side, but Twitch is creeping up there.
Mazen Chami:
One fact for me, it no longer brings up Twitter. Twitch.
Jamon Holmgren:
It does bring up Twitch. It does. See, I'm so proud of you, Mazen. I'm so proud of you.
Mazen Chami:
Thanks.
Jamon Holmgren:
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 our guest coordinator, Derek Greenberg, who also helps me with the Twitch stream. Thanks to our sponsor, infinite Red, check us out, infinite.red/reactnative. Special thanks to all of you for bearing with all of my spam today. Make sure to subscribe on all the major podcasting platforms and on Twitch. Look for React Native Radio. Reminder that infinite Red is hiring React Native engineers. If you're a senior level React Native engineer located in the US or Canada, go to careers.infinite.red. We'll see you all next nine. Bye.
Mazen Chami:
On twitch