THE React Native Tech Stack for 2024 😎
HTML-код
- Опубликовано: 22 май 2024
- Wanna get serious about React Native? Then you need these technologies in 2024! We talk about UI libraries, state management, routing, and all the choices you must make when building a React Native app in 2024.
🚀 Use code GALAXIES24 for a 25% discount on Galaxies PRO 🚀
🔥 Learn React Native FAST: galaxies.dev
🔗 Should you use Expo: • Should you use Expo fo...
🔗 UI Libraries: • Top 9 React Native UI ...
🔗 Data storage: • What’s the Best React ...
🔗 React Native UI Components: • 10 Must-Have React Nat...
🔗 Fernando Rojo Solito Podcast: • React Native + Next.js...
🔗 Why Tanstack: tkdodo.eu/blog/why-you-want-r...
🤔 Why I moved to React Native: • Why I moved to React N...
#############################
❤️ You can also find me on:
Twitter: / schlimmson
Instagram: / simongrimm_
#############################
#reactnative #reactjs #appdevelopment
📌Chapters:
00:00 Intro
01:11 Typescript in 2024?
01:40 RN CLI or Expo?
02:30 How Should You Route Your Apps?
03:40 Best UI Libraries
04:48 State Management
05:35 Best Data Fetching
06:20 Best Data Storage
07:45 The BEST Animator
08:46 How To Debug
10:00 Error Reporting
10:18 Cross Platform
11:34 Best Components
12:10 How I Feel / Suggestions
13:16 Outro 
Наука
Join Galaxies.dev today - the Home of the Best React Native content🚀
If you can, could you add the logos of all the components you're talking about? Having a visual cue (like a check mark or a star for the best one) along with the audio would make it a little easier to comprehend it. As a bonus, seeing the 'stack' build on the side of the screen would be interesting as an overlay. Great info!
Thanks for this video Simon, this is very valuable knowing this kind of information about React Native.
Thanks! this video was really helpful 😍
Thank you for all the suggestions :)
Pretty helpful to get started..
You're so welcome!
Great video Simon, i was using rn paper but tamagui looks amazing
What I’ve been using lately:
- Expo Router
- Nativewind (Tailwind for RN)
- Tailwind-variants in cohesion with the above for component variant management
- API Fetching: TanStack or Apollo Client (depending on if I’m working with GraphQL)
I'll get more into Nativewind soon as well 💪
I think TanStack Query belongs in the state management category, because it's used for async state management. Even if you visit their website, you will find this exact description there: "Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte".
TanStack query is not a data fetcher. Data fetchers are, like you said, axios, fetch, etc. TanStack query doesn't fetch data, you still need to use fetch/axios or similar tool for that. It just manages and caches it.
You are right, I over simplified it for that category!
Let’s just say remote state management
For TanStack Query
@@surajthallapelli2359 I should either use zustand or Tanstack?
I actually feel like the navigation is more of a personal preference. I used Expo navigation, and I know it's great, even easier than React Navigation. However, at some point, my code ended up with so many nested folders that creating new code became difficult. It might not be a problem for everyone, but as someone who really struggles with folder organization in React, I had a real hard time trying to use things like that.
Thanks for sharing! Really helpful!
You're so welcome!
great!! please do a detailed tutorial on tamagui
Great choices, Simon! We almost use the same libraries for our "obytes starter" (a starter to create production ready React Native app). We are going to switch to Expo Router too after trying it in some of our internal projects.
Here are a few other choices I usually use.
* react-hook-form for forms
* expo EAS to build the app and generate certs/profils ( a life saver)
* react-native-keyboard-controller to handle keyboard issues
* expo-image as default image component
* react-query-kit: a simple wrapper for react-query that make creating hooks effortless
Nice, love those additions! Thanks for sharing 💪
God bless you man, honestly. I'm a new React Native developer and you've made my life a hell lot easier
You're very welcome!
Great bro
Great video I'm migrating from react web to react native in a new job and this video gave me an update on what to focus on
Glad it was helpful!
Great informative video, how about using redux toolkit with RTK Query feature to have the state management and data fetching into a single package?
Perfektes Video! Sehr passend gerade, da ich soviele Sachen teste und ich gerade mein Projekt mit Zustand, Expo Router und Nativewind aufbaue.
Paar Fragen hätte ich noch:
- Hast du noch eine Idee, wie man alles richtig dokumentiert oder wo man das Projekt übersichtlich managed?
- Welches back-end würdest du empfehlen (Nutze Supabase und möchte evtl noch Laravel mit einbauen)
- Wollte ursprünglich TamagUI nutzen, ist aber zu umständlich für mich gewesen. Wird in Zukunft ein ausführliches Tutorial kommen?
Dankeschön und sehr schöne Arbeit!
but you people still use Java for web development )
I use Tanstack query for State Management itself haha. My go to usage at the moment is Expo > TypeScript > React Native Paper > Tanstack Query > normal stylesheets
Looks like a great stack!
guess you can add native wind to that
@@angerbadge773 wat is dat
it will be great to see a tutorial on react native web.. I think that's the future :)
I would love a tutorial on TURBO REPO + TAMAGUI + NEXTJS + REACT NATIVE + SOLITO combo
Sounds like an idea for a future stream :)
Great video, Simon. Thanks for sharing. What about authentication? What's the best stack to use in 2024 for user authentication? Clerk, perhaps?
Yes Clerk would be your best friend if you don't have auth on your own service!
Any thoughts on using Jotai as state management? I really love the idea of how simple it is. Reminds me of using Vue or Svelte. But I did hear that it can cause some problems when using it.
Heard only good things about Jotai so far, but need to explore it more!
Emittor for state management
Zustand is great!!
can you create a project on monorepo using node , react native
great video, thank you simon!
Glad you like it!
@galaxies_dev have to migrate from ionic to react native due to some performance issues and the app crashing on some devices but now facing issue base on rendering mathjax equation on react native using web view which works well. Though the issue is running the app offline because the current plugin am using for rendering the equation uses file from cdn
Any clue on how to use html file which links static js and css locally on web view in react native
Flipper is the best for debugging !
@simon, great video. Curious why you didn't mention react-native-elements for UI? Seems like a decent choice. Any opinion on this?
I feel like there are too many options for UI out there, and Tamagui (and Nativewind) is probably bet for universal apps right now. But sure, Elements or RN Paper are great libraries as well.
mmkv + zustand = best data storage
wow, that was helpful
Glad it helped!
have you experienced any bugs with expo-router? I had some strange problems with navigating between tabs and stacks when I separate the stacks and tabs into different folders.
There might be some edge cases, but in many cases I found my structure was the problem and not Expo Router itself!
Hi, i really want a part time job. Can you guys have some tips and where good to start now ?
awesome content.plz make a detailed video on Cross Platform (mono repo) as you had menstioned. in youtube there is no video available for the same. plz plz make a detailed video
Oh I would be interested in this too!!
Can you explain why using open source UI components is better than building our own components? I know that using pre-built components are way faster, but other than that building our own increases flexibility, and improves us
As an exercise, on the web, create your own data table component from scratch with half the features of TanStack Table, then just use TanStack Table. Which took 1-2 weeks to make a buggy version?
@@CoryTheSimmons table components are always mess. I was particularly talking about RN UI components
arent you still limited by expo if you have to integrate with a thrid party package that doesn't support expo?
No, you can simply do a prebuild and install whatever you want!
❤
I want to build a chat component but i dont want to use a fully managed service. I started with react native gifted chat but its no longer maintained. Does anybody know an alternative to react native gifted chat ? thanks
React native gifted chat is the best thing you can currently use, and it provides all what you need (functionalities and UI customization)
Why did you skip Database?
That code doesn’t work with annual subscription
I am currently learning react native and am getting confused as there is so much noise on flutter being more performant than react native, and getting more dominance in the future.
1. Does react native really fall below Flutter?
Pls what are ur opinions?
In performance, yes.
But react native has pretty high market coverage in terms of job opportunities!
@@Kats0unam1 Not true cos of the react native new archicture which is bridgeless
Thats true@@sarfrazshah5158
what are your thoughts on Dripsy?
Another great library in the ecosystem!
I don't think Tamagui should be recommended - yet. I had to give up on it after wasting half a day on it. Annoying setup and brittle. Once setup (thanks to expo stack) it would randomly error on me saying it couldn't be found when adding a component down the tree.
Because of those issues I now have a course on Galaxies about working with Tamagui - but I agree!
mmkv support expo? need prebuild?
Yes you need prebuild, but it takes like 3 minutes and then you can continue you work :)
I’m not learning typescript
Expo?! Arrgg... never ! CLI of course!
100%
Exactly 💯... expo is good for development... Large app size on production
dont forget react native mmkv and twrnc
Guys I feel like I should just use Swift and Kotlin 😅😅
please project the store in react native
I don't understand?
oh God that fear you gave us for a second 1:55
Simon! Only you can save us. Make a tutorial teaching how to build the ionic 7 without the capacitor. It's full of errors. For God's sake!
Is anyone from you check UI libs for performance? Or you are using it because other lazy devs use it? StyleSheet first place, Restyle next. That all you need.
Dart -> Javascript
using tamagui is painful
Why?
@@galaxies_dev mainly the old version of reanimated dependency(bottom sheet) part of it
Expo gives a freedom? Seriously??
You just say that Expo has problem with debug. Then where is freedom?
Yeap with Expo dev clients you can do everything nowadays.
You, with expo development builds, u can run react native core packages without stress