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 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.
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!
00:01 Setting up a React Native application for production in 2024 01:54 Expo offers flexibility and ease of use for React Native development. 03:35 UI Library recommendations for React Native applications in 2024 05:16 Consider using 10Stack Query for data fetching and storage optimization in React Native applications. 06:59 Consider using mm KV for data storage efficiency 08:44 Expo will make debugging easier in 2024 10:27 Utilize Expo with Next.js for advanced web and native app integration 12:13 Expect major changes in debugging and UI library categories for React Native in 2024.
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
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.
I really didn’t like expo router. The documentation is very limited and I found it odd that it magically generates all the menus based on what files are present but makes it very difficult to generate menus where pages are across the site. For example, having a drawer menu which links to pages in different folders is unnecessarily difficult and undocumented.
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?
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
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
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!
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.
Can you make a video of phone authentication using expo router and firebase on ios? There is an issue with the recaptcha when it redirects to ‘firebaseauth/link’ which seems to have no solution.
@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
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.
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.
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.
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.
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
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?
Join Galaxies.dev today - the Home of the Best React Native content🚀
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?
Its basically just a wrapper for asynchronous operations and caching layer
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!
I would love a tutorial on TURBO REPO + TAMAGUI + NEXTJS + REACT NATIVE + SOLITO combo
Sounds like an idea for a future stream :)
00:01 Setting up a React Native application for production in 2024
01:54 Expo offers flexibility and ease of use for React Native development.
03:35 UI Library recommendations for React Native applications in 2024
05:16 Consider using 10Stack Query for data fetching and storage optimization in React Native applications.
06:59 Consider using mm KV for data storage efficiency
08:44 Expo will make debugging easier in 2024
10:27 Utilize Expo with Next.js for advanced web and native app integration
12:13 Expect major changes in debugging and UI library categories for React Native in 2024.
Thank you!
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
Same, except Paper.
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.
I really didn’t like expo router. The documentation is very limited and I found it odd that it magically generates all the menus based on what files are present but makes it very difficult to generate menus where pages are across the site. For example, having a drawer menu which links to pages in different folders is unnecessarily difficult and undocumented.
mmkv + zustand = best data storage
great!! please do a detailed tutorial on tamagui
Great informative video, how about using redux toolkit with RTK Query feature to have the state management and data fetching into a single package?
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
Since when did React Query start making network requests?
While watching your video, I don't know but my mind thinks of monkeys
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!!
Expo?! Arrgg... never ! CLI of course!
100%
Exactly 💯... expo is good for development... Large app size on production
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 💪
Great video Simon, i was using rn paper but tamagui looks amazing
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!
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!
can you create a project on monorepo using node , react native
Thanks for this video Simon, this is very valuable knowing this kind of information about React Native.
Flipper is the best for debugging !
is it just me or is simon really sexy...
Thank you for all the suggestions :)
Pretty helpful to get started..
You're so welcome!
Can you make a video of phone authentication using expo router and firebase on ios? There is an issue with the recaptcha when it redirects to ‘firebaseauth/link’ which seems to have no solution.
@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
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!
DEBUG is a problem for me doing react native. Its really annoying
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.
Guys I feel like I should just use Swift and Kotlin 😅😅
Zustand is great!!
This video is good but it needs the logos for the items you are talking about
it will be great to see a tutorial on react native web.. I think that's the future :)
@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.
Great bro
That code doesn’t work with annual subscription
dont forget react native mmkv and twrnc
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!
❤
oh God that fear you gave us for a second 1:55
wow, that was helpful
Glad it helped!
Thank you so much
You're most welcome
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!
Thanks for sharing! Really helpful!
You're so welcome!
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!
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!
Thanks! this video was really helpful 😍
Awesome video bro, coming back to the space after a few years and i'm glad to see so many cool new things
It's on fire!
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!
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!
Emittor for state management
Why did you skip Database?
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)
Hi, i really want a part time job. Can you guys have some tips and where good to start now ?
Dart -> Javascript
thank you🔥🔥🔥
I’m not learning typescript
Change my mind lol
what are your thoughts on Dripsy?
Another great library in the ecosystem!
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
please project the store in react native
I don't understand?
mmkv support expo? need prebuild?
Yes you need prebuild, but it takes like 3 minutes and then you can continue you work :)
using tamagui is painful
Why?
@@galaxies_dev mainly the old version of reanimated dependency(bottom sheet) part of it
great video, thank you simon!
Glad you like 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