In this episode, Robin and Mazen go on an epic adventure walking through the updates that we get with Expo SDK 48.
In this episode, Robin and Mazen go on an epic adventure walking through the updates that we get with Expo SDK 48.
This episode is 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.
Connect With Us!
Todd Werth:
Welcome to React Native Radio podcast. Brought to you by your boy, Jed, taking over Todd's job, one tiny piece at a time. Episode 268, Expo SDK 48.
Robin Heinze:
Hey, Mazen, do you play an instrument?
Mazen Chami:
Currently, no, but I used to play one in high school.
Robin Heinze:
What did you play?
Mazen Chami:
What type of instrument person do I seem like?
Robin Heinze:
You seem like a trombone person, if I'm being honest.
Mazen Chami:
Spot on.
Robin Heinze:
I don't know if that's because you've told me before, and subconsciously I remembered it, but you just seem like a trombone person.
Mazen Chami:
I may have mentioned it, I'm not sure. Let's see here. Early on, when I was, I don't even know, I think maybe elementary school, I think all parents kind of go through this too, where my parents wanted me to play the piano, but it got to a point where it was like, I honestly think it was day of recital, and I was like, "You know what? I really don't like this, so I'm not going to go in front of everybody. So, even though my name's on the thing, and you guys came for this thing, I'm not going to it."
Robin Heinze:
That's hardcore.
Mazen Chami:
So, I just didn't show up to it. I just hid-
Robin Heinze:
Mic drop.
Mazen Chami:
... in the classroom. Yeah.
Robin Heinze:
Oh, my gosh. That's funny.
Mazen Chami:
Yeah, but in high school, we had to do music for... I think it was one class and-
Robin Heinze:
Oh, you had to?
Mazen Chami:
Yeah, music was a requirement in high school.
Robin Heinze:
That's wild. My school districts never had the budget for that, so not only was it opt-in, but usually there was lots of fees associated with it because they didn't have enough money to fund everything, but yeah, I was an orchestra dork and a choir kid in high school.
Mazen Chami:
What's your instrument?
Robin Heinze:
I played the cello for a long time, played the piano for a couple of years as a kid, but cello was my primary instrument, and recently I am the proud, new owner of a ukulele, which I'm very excited about. I wanted to play again, but getting a cello out and playing it is a whole thing. You need a lot of space. It's hard to just pick it up and play for 10 minutes. So, I wanted something that I could just noodle around on in my spare moments, so I got a ukulele for my birthday and I'm super excited.
Mazen Chami:
That's awesome. That's quite the size change too, because from a cello, you need almost two people to carry it around, till one you can almost put in your back pocket. That's pretty cool.
Robin Heinze:
Yeah, I got very good at carrying my cello around by myself. My case had a backpack. I looked pretty dorky walking around my high school with a cello on my back, but-
Mazen Chami:
I can picture you, yeah. Wasn't this Hawaiian guy, Israel... and I can't pronounce his last name.
Robin Heinze:
Yeah, the Somewhere Over the Rainbow-
Mazen Chami:
Yes.
Robin Heinze:
... What A Wonderful World. Yeah.
Mazen Chami:
Yeah. That was the only reason I liked the ukulele, because of that song, I think.
Robin Heinze:
Ah. It's a very good song. It's one of my favorite. There's a lot of stuff that you can play on ukulele that you would also play on guitar. It's just a smaller, cuter sound, but I've been having fun with it.
Mazen Chami:
That's awesome.
Robin Heinze:
Yeah.
Mazen Chami:
Maybe one day you should open up the music to React Native Radio with your ukulele.
Robin Heinze:
Maybe I could have Derek compose something. Derek Greenberg is our guest coordinator, if you recognize his name from the credits, but he's also a avid musician and composer, so it'd be fun to have him write something, and then I can learn to play it.
Mazen Chami:
That would be cool.
Robin Heinze:
We'll see if we can make it happen. All right, let's get onto our episode today. Before we get started, I need to mention that this episode is sponsored by Infinite Red, your favorite premier React Native design and development agency located fully remote in the US and Canada. So, if you're looking for React Native expertise for your next React Native project, hit us up at Infinite Red slash React Native.
So, let's get to our topic for today embarking on Expo SDK 48. If you don't know or if you've been living under a rock, Expo is one of the most common ways to build React Native apps these days, so we put Expo SDK releases right up there with React Native releases especially because they usually go hand in hand. So, we're going to walk through the new features in this new Expo SDK and tell you how to upgrade. And if you're not using Expo, why not? Why are you not using Expo? You probably should be.
Mazen Chami:
It makes life easy.
Robin Heinze:
Mazen, why don't you kick us off?
Mazen Chami:
Yeah, so the first one is Hermes is now the default JavaScript engine. This has been around for a little bit in vanilla React Native. Everything we've talked about starts off with the React Native upgrade, and then eventually the next one just catches up essentially. So, 47, it was announced that it would be coming in 48, so now it's officially here and it's in place of the JavaScriptCore, the JSC.
Robin Heinze:
Does that just come with this SDK version because of the React Native version that is coming? This SDK is upgrading to React Native 71.3. Is this change something that is just along for the ride with the new React Native version or is it something that Expo is doing specifically? I feel like it's just coming with the React Native version, but-
Mazen Chami:
Correct, yes. I think it comes along, and then Expo does what they need to do under the hood to link over to Hermes to get that default setup, so yeah, because it was enabled in 71.3 in React Native, so now Expo's just exposing that flag.
Robin Heinze:
I'm guessing that we're almost to the point where we'll stop hearing about Hermes because it's on, it's default, everyone will be using it. It won't even be a thing that we talk about anymore.
Mazen Chami:
Yeah.
Robin Heinze:
Because it's so much better than JSC, what they had in the past. So, yeah, Hermes is the default now, and that goes right along with React Native 71 and also React 18.2. Those are the two major version bumps in this SDK release. We did an entire episode on React Native 71, but just to give a quick recap of the highlights there, there's a bunch of new Flexbox properties in this version of React Native like gap, row-gap and column-gap, which is huge. If you've ever tried to make any kind of grid layout in Flexbox before, you know what a big deal those are so...
Mazen Chami:
It's so much better than the flex and space-between and this and that. I love it.
Robin Heinze:
A bunch of web-inspired accessibility props were added to combine the web and React Native APIs to make them a lot more similar. JSON.parse() got performance improvements, TypeScript is the default now, so you no longer have to add the types package and a bunch of other stuff that you can refer to in our episode on React Native 71, but now that's supported and included in expo.
Mazen Chami:
Yeah. The next one up is the Android compileSdkVersion, the targetSdkVersion, so that's the API 233. So, basically all that means is as new kind of similar like iOS versions come out, we need to upgrade our Android targets. So, now the target's being moved up, so I think this is actually a good one because we're in April as we're recording this, but as of August 1st, all your new app submissions need to target this level. So, it's a requirement by Google and Android where you need to hit this level, and then as of November, well, whenever November 1st rolls around, all new apps that are joining the app store need to have this target level, so-
Robin Heinze:
Right-
Mazen Chami:
This is a good update.
Robin Heinze:
... August is new apps and November is new updates to existing apps.
Mazen Chami:
Yeah.
Robin Heinze:
So, you will not be able to push updates to your app unless you're on 33 starting in November.
Mazen Chami:
If you're listening to this episode and you're not ready to go to 48, you might as well, in the background, upgrade to level 33 so you can keep submitting your app.
Robin Heinze:
Correct.
Mazen Chami:
The next one is pretty interesting because I feel like this should have been a feature there in the beginning, but you can now enable RTL from your app.json file or app.config.js file for Expo Go. So, usually you would have your own context or something like that to house, if your app is RTL. Well, now you just put it in your JSON file and then it'll automatically support RTL for you. So, I think this is just an interesting... where you have to add that flag to be able to do RTL apps with this new version. In the past, you had to manually hook it up and set it up, so now Expo does the lifting for you.
Robin Heinze:
And that's specifically in Expo Go.
Mazen Chami:
Expo Go. Yes.
Robin Heinze:
If you were using Bare or previous... Ejected is not the terminology they use anymore, but if you were using Bare, you were able to support right to left, but now it's supported in Expo Go.
Mazen Chami:
Yeah, and Ex EAS build, pre-build, Expo pre-build-
Robin Heinze:
Pre-build.
Mazen Chami:
Those are also part of it, yeah. This is also-
Robin Heinze:
Got ya.
Mazen Chami:
... exposed to that too.
Robin Heinze:
Well, that's awesome. The next one in the list is support for the new architecture slash Fabric Renderer is now in all Expo packages except for Expo-Dev-Client. I don't know why Expo-Dev-Client is the exception, but all your Expo packages now will support the new architecture. That doesn't mean they recommend the new architecture yet, that's a really important caveat. And the other caveat is that Expo Go does not support the new architecture, but if you're doing Bare workflow and you're feeling adventurous, you can enable the new architecture and all Expo packages are compatible. They make it pretty clear that they're not recommending it yet because there's still quite a number of issues with other third-party modules and things like that. So yeah, only if you're feeling adventurous and ready to tackle whatever comes up.
Mazen Chami:
Yeah, we're still a ways out for this being like... Hermes will soon be a thing of the past. We're still very far, in the very far distant future where this will also be the past.
Robin Heinze:
But stuff like this is a good indicator that the ball is moving.
Mazen Chami:
Yeah, the gap is being closed, yeah.
Robin Heinze:
Yeah. Adoption is happening gradually and there is a future for the new architecture.
Mazen Chami:
Some third-party packages have already released their versions that are new architecture like Reanimated V3 is now the default in NPM, so there we go.
Robin Heinze:
Yeah, it's happening. It's happening little by little.
Mazen Chami:
So, the next one is a package has been deprecated from Expo. It's expo-random. It's random because it's now redundant with the new package, expo-crypto. So, expo-crypto has Get-Random values, Random UUID and Digest functions are what they're called, so, basically for crypto related stuff. And then the Random UUIDs, that whole UUID V4 package that we used to install specifically for that, so you would now... It looks weird to me if you were to expo-crypto to get that Random UUID, but it's all now in that one package.
Robin Heinze:
Side note about UUIDs, I've spent a lot of time recently adding devices to our Apple provisioning profiles for EAS built, and the amount of times I think it's UUID instead of UDID, for iOS devices, your device identifier is called UDID, which stands for Universal Device Identifier something.
Mazen Chami:
I always thought they were the same thing.
Robin Heinze:
I don't know what the other D is.
Mazen Chami:
Identifier?
Robin Heinze:
I guess it's ID like Identifier.
Mazen Chami:
Yeah.
Robin Heinze:
But I always say UUID, which is different, but they're annoyingly similar.
Mazen Chami:
Universal Your Identifier?
Robin Heinze:
I don't even know. What does UUID stand for?
Mazen Chami:
Universally Unique Identifier.
Robin Heinze:
Universally Unique Identifier. Okay.
Mazen Chami:
That makes sense. I always thought they were the same thing, but that makes sense. UUID-
Robin Heinze:
They are not, yeah. UDIDs are their own format.
Mazen Chami:
Yeah. Okay.
Robin Heinze:
And another fun fact, the format of UDIDs changed around the iPhone 10R-
Mazen Chami:
8 or 10, yeah.
Robin Heinze:
So, the iPhone 10 had the old format, which looked more like a standard UUID...
Mazen Chami:
Yeah.
Robin Heinze:
... if I remember right. And then they changed the format for later iPhones.
Mazen Chami:
I'm cleaning up my office because I'm moving to a new location in the house and I dug up a... Drum roll, please.
Robin Heinze:
Okay, drum roll.
Mazen Chami:
iPhone 3G.
Robin Heinze:
What?
Mazen Chami:
Yeah.
Robin Heinze:
No way.
Mazen Chami:
It was tiny.
Robin Heinze:
No way. That's from 2009, 2010?
Mazen Chami:
I don't even know. Steve Jobs was still around. That-
Robin Heinze:
Do you have it with you?
Mazen Chami:
I do. It's in the closet right now.
Robin Heinze:
Oh, okay.
Mazen Chami:
I'll bring it up after recording.
Robin Heinze:
You should post a picture of that in our Slack because-
Mazen Chami:
I will.
Robin Heinze:
... everyone would get a kick out of that.
Mazen Chami:
But when I was registering my 7 Plus, so I could test the app for Chain React, the UDID was different than everybody else's. Like, "This is not right", so I kept digging and kept digging and then eventually, I was like-
Robin Heinze:
I did the same thing-
Mazen Chami:
... "This is right. Has to be."
Robin Heinze:
... with a client, one of our client team people was registering his device and it was an iPhone 10, and he sent me the UDID, and I was like, "This doesn't seem like the right..."
Mazen Chami:
Yeah.
Robin Heinze:
And I was like, "Are you sure you got the right...", and he's like, "Yes, I did it right", and he screenshotted it for me. I'm like, "I'm so sorry".
Mazen Chami:
He was like, "Are you sure?"
Robin Heinze:
Anyway, yes, expo-random is now part of expo-crypto. They are one and the same, expo-random is deprecated.
Mazen Chami:
Yeah, and as part of that, the Expo Modules API has been improved, and my guess what that really means is they added support for Swift Concurrency, it says, with Async and Await functions. So, Get-Random values and Digest functions needed Async and Await to be awaited, so I think that's improved upon at this point.
Robin Heinze:
In the release blog post, they also announced some updates or some new versions of Expo, I'm going to call them Expo adjacent libraries. Not the SDK itself, but companion libraries, specifically. Expo Image Version 1.0 was released. So, inaugural stable release of Expo Image, which if you haven't heard of Expo Image, it's a cross-platform React component that loads and renders images, and is designed for speed and also supports a lot of modern image formats like GIFs and other... I don't know what all formats exactly it includes but...
Mazen Chami:
It's like HEIC, so it's the-
Robin Heinze:
Like the iPhone-
Mazen Chami:
... live images-
Robin Heinze:
... live photos, yeah.
Mazen Chami:
Yeah. Webp.
Robin Heinze:
Which is awesome. I know a lot of people in the community have been using React Native FastImage recently in place of the out of the box image component, but not too long ago, the maintainer announced that they're not maintaining it anymore. It was just one person, it wasn't an organization maintaining it, so the community really came together and Expo said, "Hey, we're going to take this on", and so Expo Image was born and it's very, very exciting and I'm excited to use it.
So, that, Expo Image is released and is now also available in Expo Go. I think that's new with with SDK 48. Is that being included with Expo Go? And then the other one is Expo Router, which we had Evan Bacon on the show a while back. We'll link the episode in the show notes, but Expo Router Version 1.0 was also released. It's a file system based routing API that is built on top of React Navigation, which is also... React Navigation is also one of Expo's libraries, very pervasive. Almost everyone I know uses React Navigation, but this is built on top of that. But it lets you define your app routes by just nesting in your folder structure, and it's intended to be very compatible with web so that your linking strategy lines up between your web app and your mobile app. We're actually trying it out on my current project at the moment and it's pretty slick.
Mazen Chami:
Yeah. Yeah. And I messed around with it not too long ago with our Expo advocate, Frank Callis.
Robin Heinze:
Hi, Frank.
Mazen Chami:
It does also come by default in the Tabs template. It caught me off guard because I installed it and I was trying to use React Navigation functions, and then just realized that something was off, and then saw that the router stuff was there. So, it comes by default.
Robin Heinze:
So, that's if you use the template, if you pass dash dash template tabs to NPX create Expo app, then you will get Expo Router by default.
Mazen Chami:
For SDK 48 and above, yeah.
Robin Heinze:
A note on Expo Router, it is still in its early days. They are actively soliciting feedback and they give a disclaimer that it might not work perfectly for every use case, but they want people to try it and use it and give feedback on what their experiences were. They really want to make this work well enough to be the new standard. They really believe in file system based routing. So yeah, if you haven't already listened to it, check out our episode about Expo Router with Evan Bacon.
Mazen Chami:
So, next one is EAS builds. So, we've mentioned that before. I believe we had an episode.
Robin Heinze:
We also did an entire episode about EAS. We like Expo around here.
Mazen Chami:
So, the couple additions here. Now by default for iOS, you get the M1 worker. If you have tried to build an EAS app on your Intel like I used to do in the past, it takes a long time, a very long time. If you have an infant, it's perfect time to go change a diaper, put him to sleep type deal, but with the M1 now and getting access to this flag, it is superfast and totally worth it. So, double advert there for EAS build and M1.
Robin Heinze:
And the M1, yeah. We were using the M1 workers when they were still experimental, and the difference in build speed is wild.
Mazen Chami:
Yeah, big time.
Robin Heinze:
It is definitely noticeable. And now everyone gets M1s because they're the default.
Mazen Chami:
It's like I have that Oprah episode in my head, "You get an M1 worker, you get an M1 worker".
Robin Heinze:
Everybody gets an M1 worker.
Mazen Chami:
Okay, back to the next one.
Robin Heinze:
This one, I am so excited about this. There's a new command in the EAS CLI called Build Re-sign, and if you've used EAS for internal distribution builds, and have had to add people's devices manually, and maybe you'll get one person who gives you their device, and then two days later, you'll get another person, and then four hours later, you'll get another person, but you've had to do new builds every time you add a new device because it needs to add the device to the profile, the provisioning profile, and then rebuild, now you can resign an existing build instead of having to wait for an all new build, which also has the advantage of... If you have a current build, it doesn't become obsolete just because like, Oh, now this one person can't install that build, because their device, you can just resign it. So useful.
Mazen Chami:
Very useful. This would've saved me so much time trying to figure out why people couldn't install the Chain React app locally all of last week. So-
Robin Heinze:
You're like, "Are you clicking the right link? Are you just trying to install the right build? Did I even kick off a new build?"
Mazen Chami:
I felt bad just being like, "Hey, I linked to the document on the instructions to follow. Did you follow them?". I know they did, but, "Do you mind double checking?", and it's like, "Okay, hold on. Let me do a new build". Yeah. Next one is EAS Build Run.
Robin Heinze:
It's basically a convenience.
Mazen Chami:
Yeah. Download simulator builds and run them in one command. That's pretty much what it is, yeah.
Robin Heinze:
You used to have to fetch the simulator build and then another command to run it, and now it's in one command, so very convenient. It saves you...
Mazen Chami:
All for convenience.
Robin Heinze:
It saves you like 10 seconds.
Mazen Chami:
Yeah. A big one with this release is they've dropped support for SDK 45, and there's a note in here, so we're in 48 and they dropped 45, so 46 and 47. So, last two are basically supported, but with the next one, they're dropping 46 and 47 and going to just one level down of support.
Robin Heinze:
Oh, really?
Mazen Chami:
Yeah. So-
Robin Heinze:
They're not supporting as many past versions?
Mazen Chami:
No. So, 45 is officially dropped as of 48, and with 49, 46 and 47 will be dropped. And it kind of makes sense because this release does feel like a tighter loop away from a lot of old architecture related stuff, right? We mentioned the new architecture stuff, we mentioned Hermes, the update in the Android SDK versions. With all that being said, I feel like this stop, this point of 48, does seem a good moving forward. We mentioned React Native 71 was a good... Was it 71? No, 70 was a good... Okay, new architecture, React 18 moving forward type deal. This almost seems the same here.
Robin Heinze:
Yeah, so those are pretty much all the highlights. So, if you want to use Expo SDK 48, the upgrading is super easy. NPX Expo, so you change the version and then install dependencies, Expo install dash as fix to upgrade your expo dependencies, and then Expo Doctor to check for incompatibilities, and then make sure to read through the release notes for deprecations, re-namings, removals, other breaking changes. And then either run Expo Go or run Pre-build. Also make sure to upgrade your Expo Go app, if you're using Expo Go, and rebuild your app. And that's pretty much it.
Mazen Chami:
Seems very straightforward.
Robin Heinze:
It's very straightforward. If, for some reason, you're not using Pre-build, you would still have to go through and do the React Native Upgrade Helper, but if you're not using Pre-build, why are you not using Pre-build?
Mazen Chami:
Exactly.
Robin Heinze:
It's very, very nice. So yeah, Expo SDK 48. It's all we got.
Mazen Chami:
Well, there's one more thing I wanted to bring up. I wish Jamon was here to talk about this, but that's fine. One hidden nugget in it, I don't know if it was there before, but I just noticed it. Frank pointed it out again. If you were to do a new build, a new app with Expo 48 in TypeScript with the TypeScript template, TypeScript strict mode is now true by default. I'm a huge fan of it. I like strict typing. I don't know why.
Robin Heinze:
I really want to hear Jamon's reaction to that.
Mazen Chami:
Yeah, exactly. I should have saved it for him on here, but that's fine. I guess I get to now say all that I think about and just sell it to everybody before Jamon comes back. But yeah, I really do think it helps a lot. I think we do not have it on in Chain React right now, but I just find myself automatically adding types and being strict on it myself, and it does help my personal workflow, I think.
Robin Heinze:
Any, Any, Any.
Mazen Chami:
Yeah, whenever I see an Any, I just shake a little bit, but it's fine, yeah. I also think it helps a lot when you're working with clients that are new to TypeScript. It kind of helps keep them lined up, and I also think, in a hard way, it teaches TypeScript. I know sometimes it feels like you're shoving types down their throat, but at the end of the day-
Robin Heinze:
When you have to type everything, you learn how to type things really fast.
Mazen Chami:
Exactly. I love it, yeah. TypeScript, the latest version of TypeScript, I forget what number it's on now, it does a pretty good job of typing for inferring, so you don't have to really worry about the type inference part. I think it's five, but with strict mode on some of the stuff that you type, if you type, it just makes it easier. And I keep saying it, all those random unit tests of checking a function if you pass in a number when it's expecting a string-
Robin Heinze:
You'd never have to do it anymore.
Mazen Chami:
You don't have to do any of that anymore. It does those little tests for you. Let me see if I can get this right. Jamon's phrase is something along the lines of if the JavaScript is working for you, there's no need to type strong. So, if you find bugs, you need strict typing. With a client, I did notice a lot of bugs that were coming in that TypeScript would've solved, so I recommended that, and it did help. It reduced the bugs a lot. So, use it with discretion, I think it's helpful, and if you're new to TypeScript, I think it'll help a lot.
Robin Heinze:
Well, clearly you're not alone in your opinion because Expo has just turned it on by default, so-
Mazen Chami:
Yeah, exactly.
Robin Heinze:
All right. That's our show for today. If you'd like to nerd out more about React Native, make sure to check out our Slack community, Community dot Infinite dot Red. You can also check out Jamon's Twitch stream, although he hasn't streamed in a while, but I'm sure he will again, RN dot live or YouTube dot Infinite dot Red, or our Twitter community RN Twitter dot Infinite dot Red. You can find Mazen at Mazen Chami on Twitter. You can find me at Robin underscore Heinze, and React Native Radio at React Native R-D-I-O. As always, thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky, our designer Justin Huskey, and our guest coordinator Derek Greenberg, and of course, our resident Expo expert and advocate, Frank Calise.
Mazen Chami:
Yep, Yep.
Robin Heinze:
Thanks to our sponsor, Infinite Red. Check out Infinite Red at Infinite dot Red slash React Native. And thanks to all of you for listening today. Make sure to subscribe wherever you get your podcasts. I do have a mom joke.
Mazen Chami:
Yes. Let's hear it.
Robin Heinze:
If you have time.
Mazen Chami:
Oh, I have time. I only hear my son screaming in the background, but I have time.
Robin Heinze:
Credit goes to the king of dad jokes at Infinite Red, Carlin Isaacson. I used to be a personal trainer, but I had to put in my too weak notice.
Mazen Chami:
That's a good one.
Robin Heinze:
Thanks, Carlin, for the joke. We'll see you all next time.