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)
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 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.
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
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.
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
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?
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.
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
What if I want to use a react-native CLI npm package in Expo? I was trying to build a Radio App, and the built in radio streaming from Expo was trash. And the only package that worked was only compatible with react-native CLI. So i had to didtch my Expo project and start from scratch using react-native cli. Was I in the wrong here?
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.
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
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 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?
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
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.
Join Galaxies.dev today - the Home of the Best React Native content🚀
Please make a project using Expo, Expo Routing, TanStack Query, Zustand, Reanimated
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 💪
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 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
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.
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 would love a tutorial on TURBO REPO + TAMAGUI + NEXTJS + REACT NATIVE + SOLITO combo
Sounds like an idea for a future stream :)
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 💪
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?
@@CoryTheSimmons table components are always mess. I was particularly talking about RN UI components
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!
Thanks for this video!
My pleasure!
Thank you for all the suggestions :)
Pretty helpful to get started..
You're so welcome!
mmkv + zustand = best data storage
How does the stack change when your developing a react-native-windows app, ie your targeting desktop rather than mobile?
Thanks for this video Simon, this is very valuable knowing this kind of information about React Native.
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 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!
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!
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?
Thanks for sharing! Really helpful!
You're so welcome!
Great video Simon, i was using rn paper but tamagui looks amazing
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!!
Thanks! this video was really helpful 😍
What if I want to use a react-native CLI npm package in Expo? I was trying to build a Radio App, and the built in radio streaming from Expo was trash. And the only package that worked was only compatible with react-native CLI. So i had to didtch my Expo project and start from scratch using react-native cli. Was I in the wrong here?
Yeah just npm install it and make a prebuild with Expo, probably takes like 5 minutes!
@@galaxies_dev do you have a video on this? I'm really wanting to give Expo one more opportunity, since the concept is great 👍
Since when did React Query start making network requests?
@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.
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.
Flipper is the best for debugging !
This video is good but it needs the logos for the items you are talking about
Thank you so much
You're most welcome
can you create a project on monorepo using node , react native
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!
@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
Why did you skip Database?
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!
Zustand is great!!
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!
thank you🔥🔥🔥
it will be great to see a tutorial on react native web.. I think that's the future :)
Emittor for state management
That code doesn’t work with annual subscription
Background music way too high in the intro
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
Great bro
wow, that was helpful
Glad it helped!
Expo?! Arrgg... never ! CLI of course!
100%
Exactly 💯... expo is good for development... Large app size on production
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!
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)
what are your thoughts on Dripsy?
Another great library in the ecosystem!
mmkv support expo? need prebuild?
Yes you need prebuild, but it takes like 3 minutes and then you can continue you work :)
great video, thank you simon!
Glad you like it!
Hi, i really want a part time job. Can you guys have some tips and where good to start now ?
I’m not learning typescript
Change my mind lol
Guys I feel like I should just use Swift and Kotlin 😅😅
dont forget react native mmkv and twrnc
please project the store in react native
I don't understand?
❤
DEBUG is a problem for me doing react native. Its really annoying
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!
oh God that fear you gave us for a second 1:55
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
While watching your video, I don't know but my mind thinks of monkeys
is it just me or is simon really sexy...
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