Expo SDK 51: New Packages, Router, Architecture & Template

I did not expect this release just one week before the fjs but here we are Expo released SDK 51 which includes react native 0.74 and also a bunch of other things that we going to talk about let's quickly dive into this so you don't have to read through the release notes although for everyone interested I highly recommend you check them out quick one up front about the new architecture the new architecture in react native is rolling out in 2024 and I'm going to do a separate video on all these things including what bridgeless means and what the new architecture in general is about just notice for now that with SDK 51 Expo is moving closer to that Target uh of the new architecture in react native and you can also test this right now there will be some issues but overall you can test things out okay besides that I want to jump over a few things and usually I piece together what I think makes the most sense I will not go through all of this um in the order of that post but follow my own scheme so the first thing I want to let you know is that there is a new default template so if you just create a new Expo application what is the command that I use uh create Expo app uh new release DT default and probably we releas uh get rid of that if it's like the default I shouldn't Supply it anyway but anyway this is the new template it comes with this pretty cool parallx View and those two components it is using of course Expo file based routing um and has some pretty cool things actually as I said parallx that's pretty cool and there's also like this uh collapsible component included and if you check out the repository uh or the code in your application you're going to notice that uh next to those cool components there's also a hooks folder and also a scripts folder with a reset projects script so if you don't like what you see or you just want to start fresh you can run the scripts command I don't know if I regret this uh but I will do it okay and voila you come back basically instantly to the default app with an index file and a layout file the most simple uh app you can have with Expo and still we still got the Epic example stuff going on here so if you want want to get that back uh how did it look before I have no idea can I just drag it in back in here oh I'm getting into react native hell for this uh let's reload um the index should probably be gone and then we are almost back well uh probably there are a few things that are not exactly like they were before uh although actually should be I just messed up the header here so uh run the reset script if you want to get rid of this this or use it like it is and there's also a new Doc section in the documentation that you can check out if you like these fancy things of uh how to get started so you know CLI I'm using an iOS simulator and I would like to use a development build so I don't want to use this and then there are the exact commands you need to follow check this out if you're interested in getting star but probably if you're watching this video you are already way past that point now let's talk about new uh packages in the last release in the Expo SDK 50 uh they released a new Expo camera uh and Expo SQL light/ next package these are now moving into the default which means Expo camera next is Now the default Expo camera and Expo SQL light next is Now the default Expo SQL light which also implies that everything these packages were previously is now Legacy which means you can access them from camera/ Legacy these packages are pretty cool we might dive more into them at a later point in fact I'm working on a cat GPT clone that might drop pretty soon and we're using the new Expo sqlite Plage and I can promise you it is pretty great next to that there's a new package that I definitely did not expect and that's the Expo symbols package currently iOS only package using the SF symbols Library if you haven't seen this these are like iOS specific fonts there is actually on a Mac an application called SF symbols that you can install and then you can search through all these beautiful different icons and their glorious names like iPhone radio waves left and right Circle um I actually got in touch with them first time using zego which we will also use in the upcoming CH gbt clone a liary by Fernando Rojo for drop down menus and context menus he as always was ahead of his time by using uh the SF symbols for the native menus um there is also another new package that we should talk about and this is why I now have to jump a bit down here uh and that's the Beta release of a new Expo video library uhhuh okay so Expo is working on an improved version of the previous Expo AV plugin and Expo video seems to be the new one it is currently in beta you can give it a try if you're interested in more about this plugin let me know in the comments and we're going to do a deep dive I think this is going to be a promising plugin and certainly one that will help many many people and finally speaking of packages um the Expo assd config plug-in now also allows us to specify different assets and these will be available as native resources um so this is important if you try to access certain files images or whatever from native modules This is highly important because otherwise your app might crash that's everything for the packages let's move on to the next one you know we're always doing these fastpaced in to give you a quick overview about what's going on Expo router my big laugh so Expo router version 3.5 dropped I talked with Evan on the rocket ship podcast you should definitely listen to that episode going to put a link down uh in the description uh there will be another release Expo router version 4 as far as I understood and once we hit version 4 we will also see a probably a renaming of Expo router into something more generic just be aware of that so for version 3.5 there are some improvements um actually pretty interesting ones so uh support for hash oh oops support for the hash segments in url with cons hash us local uh new router functions for dismissing routes then what I think was really good move removed Expo request and Expo response objects in favor of built-in winter CG compliant uh request response objects this is talking uh about the API routes we've quickly touched them before actually not too much maybe we should do this again so if you have sort of an API folder and then they have a Simon plus uh Simon Plus api. Ts file you now can use the default oh yeah thanks bear uh the default request and request uh request and response objects you don't have to use the Expo request and response anymore which some people found kind of strange I agree this looks a lot better besides that there's an interesting change as well um support for platform specific extensions for routes and layout files okay you know that you can have like a my component. ios. TSX this sounds like we can now have _ layout. .ts which will look in a specific way on iOS if I now copy this over to my new uh layout. iOS file this should actually uh this should be a TSX file this should actually apply to my application um maybe we can test this out oh it works and I do I am inside my layout ios. TSX I'm using a custom header title Fu and shows up here so this means you can have platform specific layout files and routes in your Expo router file this is a pretty good release uh they should make bigger noise of this because this is actually pretty cool so uh go check out that stuff regarding Expo router uh Evan also did put out a tweet of course I lost reference to it um but they're now improving the Deep linking capabilities so you can now have something like uh Native intent. TS file here which will handle deep linking besides the default behavior of expor router let me know again in the comments if you're interested in learning more about that okay that's everything for expor router let's talk about some Expo tools uh first probably EAS they previously announced this roll out feature in which you can can we just have this a bit bigger open image in new tab um where you can basically specify to how many people or what percentage of people you want to roll out a specific New Branch this has now a web preview previously this was only available through the CSI and I think as I've talked with Aon bareSkin before this is a pretty important uh update for many companies that just want to test out a new feature for a certain amount of people before rolling this out to everyone besides that let's quickly talk about Expo go I mentioned this in the previous video when Expo SDK 50 came around you don't want to rely on Expo go anymore Expo go is great you can quickly test something but with Expo 51 there's now only one uh SDK supported so if you download the latest Expo go Application it will only support Expo SDK 51 you are far better off with development builds quick word about that in a second if you still want to rely on Expo go um they have a new tool here or at Expo go. or expo. uh you can get a specific version of the Expo Go app if your app is using that version and you can download it this does not work for a physical iOS device because the the Apple Play Store and stuff you know but for all the other platforms for emulators simulators you can get a specific Expo Go version for a specific SDK in case you still want that I definitely recommend go with pre-build go with continuous native generation it is super easy I'm working on a video that covers all the different steps of how you can build your Expo project should be released soon and I hope this will answer a lot of questions one more thing they also released a beta version of Expo go for Windows um I really like the uh Expo orbit application it's a short uh simple application you can install and I sometimes just launch my simulator with it but in a company you can like directly install a specific EAS build through Expo orbit which shows up in that list and deploy it to your simulator or share something it is really really great and everyone on Windows I highly recommend you check out Expo orbit for Mac is has been available for a bit longer already just a few more things that I want to mention I would put them under quality of life Improvement so for iOS there's the requirement for a specific string in your privacy manifest and now with a config plugin basically uh um you can include this in your app Json so this is how it could look like for the Privacy manifest you can include specific information with Expo should be pretty easy uh did they mention this somewhere here yeah I think here is the Apple privacy manifest you can read more about this not too interesting but if you encounter this as a problem this is going to be great for you then we do have an eslint config plugin so I can now run npx Expo Lind let's see uh can I do this let's put this a bit bigger npx okay probably not uppercase npx Expo lint and this will generate a new eslint config would you like to install and configure this in the project yes looks like es lint has now been configured I don't know why I didn't have this before but no it should actually work okay so this is a new uh new command you can run um then uh just a handful of things more so one thing is that you can now use all package managers you can use bunx pnpm yarn and of course npx to create an expo application I actually just tried bun and had some problems with something related to reanimated I don't know if it's it's probably just me because usually bun is pretty great um just notice that you could usually use all of these right now and what I definitely like and I think this was actually available through xcode before is that you can now run when you call npx Expo run iOS d-- device you can if you see this little Globe here deploy to your iOS device over the network which totally makes sense we have good Network we don't need that damn USB cable um so you can now just directly deploy to your device over the network and the last thing probably not the the least thing or definitely not the least thing this is I rote the metro resolver in espo xdk classic Evan bacon of course uh I just rroll the whole thing so up to six times faster super fast when restarting the CLI try it today we just have to use Expo use fast resolver equals one npx Expo totally uh intuitive command let's see um we probably need a little Benchmark so let's run npx Expo once okay now it's ready well it's pretty fast let's do it with this with fast resolve it's it's noticeable okay this is the default project and it's a very small project but I feel like the the the difference here is already noticeable and I'm pretty sure if you're in a bigger project this has a tremendous impact on how you build your application so give it a try I don't know what is breaking or what might break here or or if is working in all the scenarios but thanks to Evan again for pushing the boundaries as always and with that I think we we've covered the most important pieces there are a few more little nuggets in between the lines that you can read so I will put the uh release notes in the description let me know what you think is the best about Expo SDK 51 I certainly like a lot of the small things like the new packages camera sqlite the the new thing for uh Expo AV the symbols um but also that we're moving closer to the new architecture and if you want to learn more about that just let me know in the comments I'm pretty sure the concept is still not completely clear to everyone and I'm happy to dive deeper into what all of these fancy words mean hope you enjoy the new release if you want to learn more about react native as always check out galaxies. deev my platform to help you with all the things react native and stay subscribed for big massive videos over uh the next week we're going to have a cat GPT clone we have a video about XO build things so a lot of interesting stuff coming soon and I will catch you in the next one until then Happy code being Simon

Channel: Simon Grimm

Views: 19,110

Keywords:

Id: wqS8LqRhNVY

Length: 16min 7sec (967 seconds)

Published: Tue May 14 2024