THE React Native Tech Stack for 2024 😎

what's the best way to set up a react native application for production in 2024 let's talk about your options and the best packages that you should use hey everyone what's up this is assim from galaxies. deev and in this video I will go through the whole T deck for a react native application in 2024 you might be new to react native you might be overwhelmed by all the choices and to be honest I definitely watch when I got started with my first react native application therefore I will give some recommendations for categories like routing data fetching State Management or even UI libraries so you get a few choices and you know what you can or should use in your application keep in mind that there's always an alternative choice you know the react ecosystem is huge and there's always a different package so take everything with a grain of salt but most of the choices are really the basics for a react native application in 2024 also if you're serious about learning react native this year check out galaxy. which is my online school and use the code Galaxy 24 to get a 25% discount on your first 3 months of Galaxy Pro so check out galaxy. and use code Galaxy's 24 for 25% off so it's 2024 and you decided to build a react native application congratulations first of all that's a great choice first question or actually question zero is should you use typescript and the answer is yes please just use typescript it might be complicated in some cases but usually in most apps it's really the best thing you can do to have type safety in your application and it just helps your whole development team to build better applications really please typescript yeah yes then the first real question is should you use the react native CLI or should you use Expo this question actually came up like the first thing when you go to react native documentation as there are two ways in my experience the short answer is Expo the long answer is Expo because it gives you freedom in the past react native CLI had some advantages over Expo but I made a long video about that where I compared everything from Expo and react native CLI just to give you the quick uh gist of that video you can use Expo to get started which is a lot easier and once you need more flexibility more freedom there's something called Expo pre-build which basically allows you to build an IOS and Android project right in your code and then you can do Native changes you can have config plugins native modules and all these things so you are not limited with Expo or by Expo anymore next question what should I use for routing should I use Expo file based routing so the Expo router or should I use the traditional react navigation and please there's not really a third option like not using any kind of navigation is not really a good idea because will react navigation you get like a stack tabs or a draw menu and that works natively in your IOS and Android application my recommendation is to actually use the Expo rout I've got several videos already about building tabs draw and all kinds of navigations even the live stream where we build build everything together so just check out the videos on this channel basically file based routing is the standard you see in nextjs in swell kit and all sorts of web Frameworks and it also works great for Native applications another Hood Expo rout is actually still using react navigation so you don't really lose it you still benefit from the knowledge that you might have but in my experience expoo Works easy because you just set up the files and you got the routing but in the end your app will be more structured and my recommendation is to go with the Expo router also because they have really really cool things coming to Expo router like API routes in future versions maybe it's even released already I don't know but you're going to benefit from all the cool stuff that's coming over the future as well next question what UI Library should I use if you just do a react native application you can use stylesheet first of all which is a bit like CSS but in JavaScript in general that works pretty good but if you want a real design system you could go for something like tamagi which is like the latest and greatest and next to that there's also native wind coming up which is an implementation of Tailwind for react native so I think those are like the two biggest things we're going to see in 2024 there are other things like glue St UI which is up and coming or uni Styles which is an improvement of stylesheets but overall this is a really opinionated topic I made a video about a lot of different UI libraries there also paper and um like material design this really depends on the actual needs of your applications if you want more flexibility you're going to pick the one thing if you want something that works really cross platforms you maybe want to do iOS Android and web then something like tamagi works really well just give it a try and see how well these things work for you um there's not really one best solution for a UI library and even if you decide to go with stylesheet that's totally fine as well don't worry too much what should I use for State Management well in the past there was Redux which was like the most popular thing a few years ago but over time people kind of came to the conclusion that it's just too much too bloated it slows down your application because it just has a single store um there are other Solutions my preferred one is actually tand or as the US population might say zustand um but it's a German word which means state so that is one solution that's really great and works really well there other things like mob X I think infinite red is using this and Jamon proposed this on Twitter I think there are a few cool Solutions out there there's also yoai again there's not a clear winner for me in this category so look at the different getting started guides just get a feeling for how these things work and uh think about what your application in the end might need how should you fetch data in your application should I just use fetch because I just make simple calls or should I use xur because it's an improvement over fetch well the answer is please just use 10stack Query you might say oh 10st query isn't that like an additional State Management and I don't want to do there's a great article that you should definitely read and that explains why you want to use this so even if you just have to do a simple fetch call there are like 10 different things that could go wrong starting from race conditions to uh incorrect error handling and 10 State query just makes this a lot easier so do yourself a favor use 10 State query also known as Rea query before but now it's usually called TST query use it in your re native application you're going to thank me in about 2 weeks latest next to data fetching we also have data storage so this one's again a bit more complicated there are solutions like acing storage there's SQL lied maybe you're using a server maybe you're using something like mm KV and this depends on the requirements of your application there's no one size fits all solution even we have a lot of uh like structured relational data going for something like a sqlite implementation definitely makes sense maybe you also want to tap into the local first approach which is becoming very popular and I think we're going to see more about this this year so you could do something like watermelon DB or there like power sync or something like that but if you just want to store a bit of data I highly recommend you use mm KV over ASN storage pretty much all the time I talked with micro before on the podcast um it is just a great solution to synchronously access data because it uses C or C++ under the hood and it is not an async implementation mm KV also has hooks so you can instantly get value and you don't need to wait for something it just makes life a lot easier and the usage is really easy so if you just want to store a bit of user settings and data and stuff use mm KV if you want to make this secure you can use Expo secure store and maybe you can even use this with mm KV may maybe that could work as well but again no clear winner just think about the requirements and I also have a video about the different data storage Solutions in case you need more info about that how should I animate my react native applications please just use reanimated it is the best thing on earth well maybe that's a bit too much but it is really great it makes animating your stuff a whole lot easier yes there's animated package with react native and you can use the native driver but reanimated makes it a whole lot easier last year reanimated introduced also shared element transitions I think at this point maybe they're even improved um so there's a whole lot of great stuff Beyond uh reanimated and also if you want let's say just easy animations you could also use moti which is from Fernando Rojo I also had him on the podcast before where he explained everything from moti to dripsy and to solito but Moi is what you might want to use as well as it makes it really easy to add simple animations to different components of your application so if reanimated feels too much of a learning for you in the beginning give a try to Moi and see if that works because it still uses reanimated under the hood as a driver if you select these were like the most basic categories that we needed answers for now I have a few additional things that I just want to highlight because you watching this video as you're starting with react native and you just want some guidance and I certainly was looking out for these things that I now want to mentioned in the beginning so how should you debug your application if you're using Expo it's a bit complicated there are like different debuggers like reactron um or others that you could use but overall I think we're going to see in 2024 that Expo will not re revolutionize the space of debugging but make it a whole lot easier they already introduced debugging uh tools last year to see the hdp calls of your application you can see of course see the console locks and all of that stuff so my recommendation is to see what Expo is doing this year in terms of debugging there are still other great Solutions like measuring performance with flashlight um that is a different tool from some from flashlight from Alex moo of course so there are different tools but for debugging I just use the Expo tools for debugging which are for the basic stuff uh enough if you later need more tools you're going to find different uh experiences like using flipper or using even xcode or Android to tap into really the hardcore things about your applications in terms of error reporting I don't really have a favorite but I just want to mention this for completeness so there is Buck snack which is a great tool for error reporting or Sentry which is of course known as the sponsor or owner of the syntax podcast at this point so in both cases I think there are great Solutions check out which of those you prefer finally I just want to mention this if you're looking for a real crossplatform solution with react native which not only runs on IOS and Android but also on the web there are two solutions like two ways there's the Expo router way which now at this point allows us to use CSS to have specific layouts for the web and yes that can work but in many cases you want to have something more elaborate and more advanced and usually what most experts recommended at this point is to use Expo in combination with nextjs and unifying this using solito so check out the podcast episode I did with Fernando Rojo on all of this he's the creator of solito basically you think about this as a mono repository where you have a nextjs application and an expo application and a shared folder and in that shared folder for all the linking and routing you're going to use solito which is just a wrapper around the next link and the Expo link component so it just unifies it so you can make it work across web and Native it's a great solution for sharing stuff and also this works really really well with tamagi so if you want to have like a full solution it would probably be nextjs with Expo in a turboo mono repository using tamagi and by the way tamagi also has a p product called take out which has exactly this setup with a lot of screens out of the box finally I just want to mention that for all the things you're going to build in your react native application there are tons of great components I did a video on I think 10 components or nine components in the react native world that you should check out because from a chat from a list to loading and skeleton views everything has been implemented in the react native community and ecosystem already so please don't reinvent the wheel all the time time and try to search for a specific solution before you get into like 3 days building your own chat component while there's actually an even better uh open source comp component out there already all right I hope this gives you a broad overview about all the packages in the react native world that you can or should use in 2024 to build your application I actually expect the most movement in the debugging and the UI Library category everything else like State Management data storage I don't expect really huge changes um but for debugging I think we're going to see a lot from Expo and for uh what was the second category and for UI libraries we're probably going to see more from tamagi but also more from native wind which at this point has already released its next version or is at the border of releasing it do you say it like that I don't know and of course there are many more great Community packages as I already said I had a video with 10 components but there are many more components and just because I let them out or or left them out it doesn't mean they suck it just means that I probably don't know about them yet and that's okay so if you have a great package that should be included in this list please drop a comment below so people who come to this video can see oh I should probably also use this package or that package so please do me a favor and leave a comment if you watch this video but you're still unsure whether you should use react native or flutter check out a video I did about why I moved to react native where I explain my reasons which have some personal background but also cover the great things about react native so hopefully you're going to build some really really epic apps in 2024 if you did so please leave a link below as I will include them in one of my upcoming app reviews we got a whole year in front of us so let's build something epic subscribe to the channel for more great videos coming on react native this year and I will catch you in the next one so until then Happy coding Simon

Channel: Simon Grimm

Views: 35,441

Keywords: react native, react native component, react native component library, react native chat, react native checkbox, react native for beginners, react native tutorial, react native app, best technology 2024, react native 2024, typescript, tech stack 2024, app development, tech stack, full stack developer, tech stack for startups, tech stack 2023, appdev, react native course, react native vs flutter, react native expo, expo react native, react native ui, expo router

Id: Xwk4rcB6qVQ

Length: 13min 51sec (831 seconds)

Published: Tue Jan 09 2024