Jamon, Jon Major, Mazen, and Harris talk about the latest React Native news, including some recent React Native announcements and Expo news.
Jamon, Jon Major, Mazen, and Harris talk about the latest React Native news, including some recent React Native announcements and Expo news.
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 NDAs. I'd finished this joke, but I can't. Episode 213, We React to News.
Jamon Holmgren:
Okay, guys, we're going to have to do this ourself for several months. Robin is officially gone on maternity leave. No baby yet, but, well, maybe by the time this is published, she'll have a baby, but not when we're recording, but she is off. So, we are on our own. Luckily, Harris has rejoined the crew. Harris, how are you doing?
Harris Robin Kalash:
I'm good. Yeah. For anyone who wasn't aware, I actually was recovering from an injury. Mostly recovered now, but yeah, now I'm feeling better. Getting back into it.
Jamon Holmgren:
Yeah. I'm glad you're feeling better and you also traveled half a world away, didn't you?
Harris Robin Kalash:
Yes, I did. Yeah. I am in Doha, Qatar.
Jamon Holmgren:
Doha, Qatar. It sounds like a random place for a Canadian to go.
Harris Robin Kalash:
Yeah.
Jamon Holmgren:
But I think your dad lives there or works there, or something, right?
Harris Robin Kalash:
Yeah, exactly. It's because my dad works there. Usually, I guess, you're an expat if you're here. You're not Qatari, so yeah. My dad works here and has been for a while, so I'm just visiting him, staying closer to the family.
Jamon Holmgren:
Before the show, actually, Harris and I were talking about Qatar a little bit, and I was learning some things about it. It's a very small country. You said only 400,000 Qataris? Qatarians?
Harris Robin Kalash:
Yeah. Qataris.
Jamon Holmgren:
And a lot of expats there and so signs are in English, of all things.
Harris Robin Kalash:
Yeah. Honestly, everything is in English and Arabic, yeah.
Jamon Holmgren:
Yeah. Well, not to play into my brother, Lucas's fears that we were going to talk about politics on a tech podcast, so we're not going to go into the world events that are happening around you there, Harris. But it is an interesting thing that you're over there, and seem to be having a good time over there.
Harris Robin Kalash:
Yeah. It's pretty nice here, actually. And yeah, things are always happening around here. Yeah, it's very action packed. I guess that's one way to put it.
Jamon Holmgren:
Yeah. A lot happening, obviously. There's some connection to what's happening in Afghanistan and stuff like that. But just so people know who Harris is, Harris is a coding instructor at Concordia Bootcamp in Montreal, Canada, and a React Native contractor. Of course, you're probably not teaching right now though, right, Harris?
Harris Robin Kalash:
Nope. I took quite a bit of time off.
Jamon Holmgren:
Yeah. Cool. Well, good to have you back. And it should be a fun one. Also, with us today is Jon Major Condon, who has returned after a brief absence. He's been busy with a lot of things, but Jon Major lives in Janesville, Wisconsin, and is a senior software engineer here at Infinite Red. He's also Editor-in-Chief of the React Native newsletter. What's up, Jon Major?
Jon Major Condon:
Oh, not too much. Just coming back from a cold. So, a little under the weather still. Congested, but feeling better.
Jamon Holmgren:
Well, why is it that every cold just immediately, your suspicions go up? And it's like, is it a cold? My daughter had to stay home from school today and I called the school and they're like, "Get her COVID tested." And she has a stomachache, but they're still like, "Get her COVID tested." So, I guess I get to do that after we record. Hopefully, you feel better soon though, Jon Major.
Jon Major Condon:
Thank you.
Jamon Holmgren:
Mazen Chami is also here as a co-host. He lives in Durham, North Carolina, where he told me it's gloomy and dark and gray right now. He's a former pro soccer player and coach, and is a senior React Native engineer, also here at Infinite Red. How's it going, Mazen? Are you enduring the gloom over there?
Mazen Chami:
Yeah. It's hurricane season, so we get a lot of rain. Woke up this morning and I thought it was still nighttime, because it was so dark from all the clouds and rain.
Jamon Holmgren:
Wow.
Mazen Chami:
Yeah. That's how it is over here.
Jon Major Condon:
So, was that what caused the power outage, right before we started?
Mazen Chami:
Probably. Hopefully, I can stay on for the rest of the recording.
Jamon Holmgren:
Yeah. Well, if Mazen drops off, it's either the power went out or he said something really, really wrong like, "You should use semi-colons in JavaScript," or something.
Mazen Chami:
Or spaces.
Jamon Holmgren:
Then we kicked him out. Spaces, tabs.
Mazen Chami:
Tabs.
Jamon Holmgren:
I don't know, that joke needs a little work. 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. Now that I've ticked off all the pro semi-colon people, they're not going to want to hire us now, but I'm sorry. We use semi-colons sometimes. If you're looking for React Native expertise in your next React Native project, 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.
Jamon Holmgren:
I just realized I never introduced myself. I'm Jamon Holmgren, CTO, co-founder of Infinite Red. And yeah, that's enough about me. All right. Let's get into our topic for today. We are doing, We React to React Native News. Renamed it. It wasn't just, We React to News. It's We React to React Native News on the React Native Radio podcast. And so, we have a few topics here. It's been, I think a little bit of a slow news period for React Native, in some ways. We did cover React Native EU in the last episode, so there was a lot of stuff that came out then. If you listened to that episode, you're going to hear a lot about that. But in terms of outside of the conference, there's a few blog posts and a few other things, one expo thing, so we'll go through that, and kind of react to that, and give our thoughts.
Jamon Holmgren:
You all ready to go?
Jon Major Condon:
I'm ready.
Mazen Chami:
Let's do this.
Jamon Holmgren:
Let's do this. All right. So, the very first thing on our list is a blog post by the React Native core team, Samuel Susla, who's a software engineer at Facebook, and it's Preparing Your App for iOS 15 and Android 12. Now, iOS 15 hasn't been actually released yet, but well, it probably will be by the time we release this episode. But right now, as of the recording, it's not yet released. But there is some information out there about it, so that we can prepare our apps in advance. So, what are some of the things, Jon Major, I'm going to call on you first. What are some of the things that you noticed in this blog post that stood out to you as things that you might want to watch out for?
Jon Major Condon:
Yeah. So, iOS 15, you have to watch out for a quick type bar, if you're using that today. You need to add another boolean check. So, if you're adding auto-correct, please add spellcheck to false as well, and vice versa. Something that I wish they had added to iOS 15 in this, though, is to disable that emoji bar. What's up with that? Can't get out of it ever. Or at least it's very difficult to get out of it.
Jamon Holmgren:
I know what you mean.
Jon Major Condon:
It's really difficult.
Jamon Holmgren:
It really annoys me.
Jon Major Condon:
Yeah.
Jamon Holmgren:
Yeah.
Jon Major Condon:
If they could add a disable for that, I would be a happy camper, but I don't see it in here. The next thing is the transparent navigation bar. So, with iOS 15, get to the top of your scroll list, or your flat list. It seems to have this navigation bar that becomes transparent when you scroll all the way to top. So, I'm not too sure, we should probably add a screenshot of that as well. I haven't personally experienced this, so I can't really speak too much about it, but you can definitely install the simulator with the beta. Let's see. Should I go to Android 12?
Harris Robin Kalash:
I've actually used the beta, so I could tell you. The address bar, was it always at the bottom? It's at the bottom now.
Jon Major Condon:
Oh, for Safari?
Harris Robin Kalash:
Yeah, for Safari. So they moved the address bar to the bottom. And whenever you scroll down, it disappears and when you scroll up, it reappears.
Jamon Holmgren:
Yeah. We've implemented that behavior in a few different apps. Mazen and I worked on an app that had something, not exactly like that, but it had a button that needed to appear and disappear like that.
Mazen Chami:
It was a floating action button at the bottom.
Jamon Holmgren:
Yeah.
Jon Major Condon:
Yeah, very similar.
Harris Robin Kalash:
You can also swipe. Kind of how you switch apps, you can switch tabs the same way you switch apps. You can like just swipe left and right. That's another, yeah.
Jon Major Condon:
I dig that.
Harris Robin Kalash:
Yeah. I definitely live life with risk. I always get the beta software.
Jamon Holmgren:
Yeah. I was going to say I can't believe you're running iOS 15 already. You know, there's some benefit in that. You're kind of ahead of the curve. You can kind of see what's coming, but you will need Xcode 13 in order for this to work. They should just align those versions, right? Like Xcode 15 with iOS 15, just move Mac OS up to 15 or what is it right now anyway? It's 11. So yeah. I mean, just move it up to 15, as well. Like get all these aligned.
Jon Major Condon:
They're all so close because even the iPhone comes out as, I mean, pretty soon, right?
Harris Robin Kalash:
Yeah. Iphone 13.
Jamon Holmgren:
Right, and then Android 12 is coming out soon. Right. So that's also coming out. One of the things that they're doing is that they're adding an overscroll effect. I think that one of the things with Android that always kind of weirded me out was when you'd scroll to the end of a list, it wouldn't like stretch and bounce, like the iOS version of a scroll bar or a scroll view, it would just stop and then have like this bluish glow or whatever. I think I saw a while back that's because Apple actually has like a patent on the stretchy kind of feel or whatever. So Android couldn't do it. Whatever that is, it's been resolved because now Android 12 will have that by default. You can opt out of it by doing overscroll mode, never on a scrollable container. So that'll be something coming. I think it'll just kind of show up and start working that way. It may screw up your app though, if you're not expecting that. There's also some permission updates with -
Mazen Chami:
Sorry, just to go back on that point, Jamon on your overscroll effect. I guess this is a way of Android deviating from their usual UI, essentially, because we talk about trying to keep apps with the whole native look and feel so that it doesn't look like you're using what essentially can be a Web app kind of thing. You're using a native app while building it in React Native. It sounds to me like this prop is kind of going away. Well, it's either that or we kind of see the community kind of wanting that overscroll effect instead of that, like you said, that blue highlight sort of thing. So I'm of the opinion that, keep them as native as possible. So put this prop in. So it's just like a little bit of extra work to your list.
Jamon Holmgren:
Right? Exactly. Although if Android 12 is going to move that direction anyway, maybe that is the new native on Android. It's kind of interesting because on my Pixel, I've got a Pixel 2 just for testing and stuff. There is a mode you can do, which I just call it iOS mode. It feels like iOS. You can like swipe from the left and you can like swipe up from the bottom to kind of switch apps and stuff like that. So the gestures all work in a way that is very familiar to me as an iOS user. So I don't know. The two platforms are really converging in a lot of ways. That tends to be a good thing overall, as long as the convergence is on the better of the two kind of paradigms. I don't mean that's always iOS, by the way. It could totally be the Android side on some things and it can be iOS on others.
Harris Robin Kalash:
I could hear like some angry Android users.
Jamon Holmgren:
I mean, I used Android for a long time and I don't mind it. It's good to have both platforms out there competing with each other because there's good ideas that come out of both camps.
Jamon Holmgren:
Permission updates. So Android 12 allows users of your app to only provide access to the approximate location, if you request it with the access fine location permission. So the user is allowed to say, you want fine location. I'm only going to give you approximate. I'm not going to give you exactly where I am at all times.
Jamon Holmgren:
I think that's good. Basically, there's a dialogue that pops up that says allow, and then the app name to access this device's precise location. And then there's two buttons left and right, which are precise or approximate. And then you can choose then from there while using the app or only this time or deny. iOS has something similar, but I don't think you can choose between approximate and fine. I think that this is kind of an interesting thing, giving users more privacy controls.
Jamon Holmgren:
So our second story that we're going to react to is, it's another blog post by the React Native team. It's called React Native's Many Platform Vision, and there's a lot in here. It's pretty interesting. What sort of stood out to you Jon Major when you were reading this blog article?
Jon Major Condon:
With this blog article, I think Facebook does a really good job at talking about how competition breeds innovation. So tying it back to with Android and iOS innovating off of one another, I see React Native doing the same thing here. They're definitely doing a good job, given all the different platforms that they can run on. They are seeing the positives, the negatives, and they are looking at continuously adding React Native to different platforms, such as virtual reality game systems. Xbox being one of them.
Mazen Chami:
Another thing to add to that is Microsoft Office is also going in on React Native. I believe Outlook and potentially other ones like Excel and Word are also in React Native. I could be wrong about that, but I think Outlook definitely is on React Native, which is pretty cool to kind of see large user bases that use these systems daily for their jobs, having that built in React Native and keep that native feel too.
Jamon Holmgren:
Appfigures.com just did an interesting kind of analysis of office apps. They found out that 38 of their iOS and Android apps use React Native. Recently, that was an update. 38 and this includes and just kind of reading off here, we've got Microsoft OneDrive, Outlook, Xbox, Microsoft Word, OneNote, Excel, SharePoint, Teams, Cortana, Edge. I mean, this is a who's who of Microsoft apps. There's a bunch more, I mean, that's just the ones that kind of like stood out that are using that, a lot of iOS and Android apps. They say that those apps have been downloaded by more than 4.3 million users in the last month alone. Yeah, so it's a pretty impressive list of apps that are now using React Native. It's not necessarily to say that they're using it entirely to build the whole thing, but they're using React Native in those apps.
Jon Major Condon:
Yeah. And this definitely opens up that hashtag more, the ReactNativeAllPlatforms hashtag, given Microsoft and Facebook and I'm sure other big companies and small companies are looking at taking React Native to the next level.
Jamon Holmgren:
So our third article is a blog post also on the React Native blog, talking about Facebook hiring engineering managers to the React Native team, and they specifically call out that they're doing that to expand beyond mobile. So I'd like to get one of your opinion, sort of reaction to this. They talk about partnering with Microsoft on Windows, MacOS, Oculus on React Native in VR, and they want to continue to focus on those platforms and other platforms. They're wanting to hire a manager for React Native for desktop, and one for React Native for VR. Mazen, what's sort of your reaction when you hear that Facebook's doing this?
Mazen Chami:
It's pretty cool that they're kind of going all in and bringing in hiring managers for these type of new fields that most people probably aren't thinking about for React Native and for the smaller players out there. It's great to see that Facebook is going all in on this. So if Facebook's investing all this money and resources in getting the right people for the job to grow React Native for desktop, React Native for VR, that should probably reassure everyone else out there that this is something that would be stable soon enough for use. Yeah, I think it's great for the whole ecosystem of React Native.
Harris Robin Kalash:
And it also means that Facebook is going to maintain it to a certain degree.
Mazen Chami:
Yeah, exactly.
Jamon Holmgren:
Well, it fits really well into Infinite Red's initiative, which we call React Native All Platforms. And we, as a React Native kind of vertical team, we want to do all React Native in any platform that it exists in and we've been doing that. Like we have some stuff in tvOS, we've got some stuff in desktop. Harris just got off a project that had some desktop elements in it. Like potentially at some point we could do some VR. Potentially at some point we can do many other types. Of course, we've been doing a lot of Web, as well. Mazen did a bunch of that. So I feel like this is something that we're going to see a lot of in the future, a lot of these other platforms, beyond just iOS and Android.
Jamon Holmgren:
Our fourth article and piece of news here is written by Mo Gorhom, who's the author of a React Native bottom sheet. Version four is now released. Rewritten implementation, provides more stability, performance, and more features. Harris, you were the one who kind of added this one in, what are your thoughts about these changes to React Native bottom sheet?
Harris Robin Kalash:
Yeah, so I've actually used the V4 and I've used the previous versions. So I got to say, I really appreciated the work that was done on the V4. One of the main things people were complaining about is the keyboard handling. Personally, I didn't have this use case in my experimentation with it, but that's kind of like a big thing. They've improved it a lot. But for me really, what brought it to the next level was how easy it was to add pull to refresh on the bottom sheet and add like a flat list on the bottom sheet. That was very much a pain before. So they actually provide components built in the bottom sheet library. So like they provide like a flat list replacement. They provide all the scrollables basically to easily integrate in the bottom sheet.
Harris Robin Kalash:
Another thing that's really cool is the detach modal is now possible with this library. You know, anyone who's like configured, I guess, a HomePod or AirPods, like you know, the popular modal that comes up the detach modal. So now we have like a really smooth one, thanks to this library. Works really well. All you have to do is give it a prop detached and you do have to give it another prop, which is basically how, I forget the name, but it's basically how far from the bottom it should be. So it's like a bottom, I guess, coordinates.
Mazen Chami:
Bottom inset.
Harris Robin Kalash:
Yeah bottom inset, there we go, thank you. There's also like a footer component that you can pass it, which is cool. You know, it behaves really nicely with the whole bottom sheet when you use that, instead of like trying to make your own inside the scrollable.
Harris Robin Kalash:
There's other improvements that the [inaudible 00:19:56] doesn't go over, just in terms of performance and the snap positions, how it works. Like one change that I know that I had to get used to is in a previous version of the bottom sheet, you would provide an array of your snap points and the first one would be like, when it's closed. In the new version, you don't do that anymore. You provide an array of the snap points when it's open and if you want it to start out as closed, you give it an index of negative one. So these are like just little caveats. Overall, the V4 is looking really nice. One last thing. It's really cool, actually. So there's a React navigation integration. So you could have a whole navigator in your bottom sheet. That's really cool.
Jamon Holmgren:
Oh, wow. That is cool. I love it when you get these sort of, kind of like specialized, but actually fairly common use cases like a bottom sheet, and someone just puts so much time in and you can just feel the love and care they put into every bit of it. It feels like one of the probably best maintained third party libraries out there. Maybe it should have been part of our favorite third party modules episode we did a while back.
Harris Robin Kalash:
Yeah. It's awesome.
Mazen Chami:
This is definitely up there for me right now, especially because you use a hundred percent utilization of reanimated too, which is pretty cool. So if you listened to the previous episode React Native EU, we talked about the great performance utilization and reanimated too. That's great that's fully utilized here.
Jamon Holmgren:
That's fantastic. I actually noticed in the read me that Gorhom has a buy me a coffee link at the bottom. So I think I'll be probably sending him some money and if other people, like what they see here, go support your open source library authors that put in so much time and effort. It helps keep them going when they have that happen. So definitely would be a great way to say thanks for providing such a great library.
Harris Robin Kalash:
I'm joining you on that one.
Jamon Holmgren:
Lastly, our fifth piece of news, we have some Expo news and Evan Bacon weeded out that he got async bundle loading, working in expo with the Metro bundler. That includes things like fast refresh, hot module reloading, stack traces, and offline loading. The biggest change here is that you can use async bundle loading. So you could actually have a component that is not loaded in the original bundle, but when you load it using react.lazy, it will actually load it in when you need it basically. So not when you start the app up. Normally you would start the app up and your whole bundle gets loaded all at once and it can take a little while to kind of load it all in. This loads it later and so that gives you much better start-up performance.
Jamon Holmgren:
He also mentions that this will enable React Suspense and React Navigation for lazy-loaded screens as well. So I think this is a pretty cool innovation. Expo continues to push things forward and Evan is a huge part of that. I always love seeing, you know, some advances in our tooling and ability to deliver high performing apps. What are your reactions to this?
Harris Robin Kalash:
I'm impressed by everything Evan Bacon does, honestly. It's true. I really think that we're nearing a point where Expo will soon start becoming a default, in my opinion. And even like for Ignite. I don't know if you guys saw, but React Native Firebase, which is like a super popular library, is now building Expo plugins. So now that'll be compatible with Expo. So we're reaching a point where it's really hard to find libraries that don't work with Expo and the UX of Expo are just so good. Speaking of that, we should upgrade Ignite to the latest version of Expo.
Jamon Holmgren:
That's a good point, yeah. Ignite works with Expo. You do have to pass in dash dash Expo as a flag, but then it works fine with Expo. We're definitely looking to keep it up to date. We have unit modules, even if you don't use Expo, we have unit modules installed by default. So that means that you can use Expo libraries, tons of Expo libraries, with a non-Expo Ignite app, which is really cool as well because Expo third-party libraries are some of the best out there.
Mazen Chami:
Anything that improves performance and helps you get your app loaded faster, I think is a win, regardless of what's happening there. React Suspense, I've used that in the past, and it's pretty cool because you get to animate things instead of just having things pop on the screen. You could do like a loading animation for your placeholder text or placeholder images while it's loading and then eventually come in. So I think that's pretty cool and being a lot faster is always nice to hear.
Jamon Holmgren:
I think this was possible without Expo already. It hasn't been something I've looked into too deeply. As you may know, I've been doing Twitch streaming on twitch.tv/streamingholmgren. I call the series, React Native Live, and maybe that's where I might play with some of these new features and learn some of it. So I'd definitely be interested in checking this out. It doesn't seem like it's released yet for Expo, must be coming, but I would like to check it out on Vanilla React Native.
Jamon Holmgren:
All right. I think that brings us to the end here. Where can people find you, Harris, other than Qatar?
Harris Robin Kalash:
I am nomadicspoon on most social media.
Jamon Holmgren:
Nomadicspoon, very nomadic for sure. Jon Major?
Jon Major Condon:
@jonmajorc on all social media.
Jamon Holmgren:
And that's J-O-N. And Mazen?
Mazen Chami:
@mazenchami
Jamon Holmgren:
and I'm @jamonholmgren. You can find me on Twitter and elsewhere. And you can find React Native Radio @ReactNativeRdio.
Jamon Holmgren:
Thank you so much for joining us today. As always thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky. I got to give a special shout out to both of them. This one will be a little more difficult to edit. It'll probably sound amazing when people listen to it, but it was a little rough. We had to redo a few sections and so extra thanks over to Todd and Jed. Thanks also to our social media coordinator, Missy Warren, and our designer, Justin Huskey. Thanks to our sponsor, Infinite Red. Check us out infinite.red/reactnative. Reminder: we are hiring. So go to careers.infinite.red, if you are in the U S and Canada, and want to work with this amazing team. Special thanks to all of you listening today, make sure to subscribe all the major podcasting platforms, we are React Native Radio. See you all next time.