Deliveroo Food Ordering Clone with React Native (Expo Router, Zustand, Reanimated, Google API)
Vložit
- čas přidán 8. 06. 2024
- 🔥 Become a React Native Developer: galaxies.dev
In this build, we are replicating the Deliveroo food ordering application with React Native including the latest packages of Expo Router, Zustand for state management, Reanimated for micro animations and even calling the Google API for maps integration!
⚡️ Get the source code: ck.galaxies.dev/food-ui
#############################
📢 Engage with the Community! 📢
Have questions or ideas? Feel free to drop your thoughts in the comments section. I'm excited to engage with fellow developers. Don't forget to hit the like button, subscribe, and ring the notification bell for more tutorials!
❤️ You can also find me on:
Twitter: / schlimmson
Instagram: / simongrimm_
#############################
📌Chapters:
00:00 Intro
00:18 Overview
03:10 Custom Header
36:11 Bottom Sheet
01:02:57 Modal Page with Reanimated
01:47:38 Google Maps & API
02:11:07 Horizontal Scrolling
02:33:23 Parallax Header Image
02:58:38 Section List
03:18:46 Sticky Segments
03:42:21 Modal with Animations
04:03:34 Zustand State Management
04:54:56 Recap - Věda a technologie
Deserves so many more views! Please stick with this because the level of work that has gone into your videos, production quality and way of explaining is top level. I've been able to build an app from scratch for my business and it's saved me thousands because of it.
Wow thank you so much! And yes I will keep doing these 💪
This is awesome man, I'm currently on a project right now with Medusa Backend and Expo. This is just what I need!
Awesome, let me know when you encounter any problems!
What is the emulator config you are using please?@@galaxies_dev
Thankyou so much Simon. I have learned lot of things because of you. Your teaching style is fun.
Happy to hear that - would be awesome if you could share it with others 🙌
Thanks a lot Simon. Very cool staff. Keep going
Thanks, will do!
Cool project case & with TS,
I never subscribed that fast;
You got 1+ loyal subscriber from Tanzania 🇹🇿 😊
Wow thank you so much Raymond!
Thank you so much, I can't wait to watch this!
You're so welcome!
Great job, Grimm!
Thank you Jose!
Hey great video thank you so much for all your efforts . Wish you all the best and hope you get more success
Thank you mate!
great tutorial, i enjoyed it
really great, well done!
Thank you mate!
Thanx for this video man although i am stuck at google api thing but rest part is just awesome... definitely will be integrate it with my custome back-end
Glad you enjoyed it!
What a great video! Its so hard to learn with only docs, these videos show you you do it HANDS On. Please continue doing these amazing vids
Thanks, and I will do more of these bigger builds! Regarding Auth and Expo Router, I actually have a course on Galaxies as well: galaxies.dev/course/react-native-tanstack
Loved it
Give it a share to spread the gospel ✌️
thanks for everything ,
Nice thanks for sharing the knowledge, like and subscribed
Welcome to the channel!
Ola Simon, boa Noite...
Você poreria recriar o Projeto do astro usando somente o CapacitorJs...
Aquele que você fez no vídeo anterior...
Can you do a text to speech ionic and react app that turns pdfs and epub file types to speech where users can listen to books and choose their preferred voice...
Awesome bro 🔥💪
Thank you mate - what clone next??
@@galaxies_devsome ideas I would like to see: Spotify clone, Instagram clone with reels and messaging, Udemy, Discord or any video streaming app. Thank you mate!! ⭐
A Great Man !
Thank you mate!
You are amazing, I just started learning React Native and watching you play with vscode is breathtaking, one question, I love the color of vscode, what theme is it?
Thank you - it's Shades of Purple
Thanks 🙏
Thank you so much!
Hey Simon, really awesome tutorials! I love your channel! May I suggest the next video app clone? How about some finance app, like for example Revolut, Monzo, Monese or some other banking app, would be awesome if we have the features for creating a disposable card, see the transactions list. And my second idea is a public transport app, where you can buy tickets for train, bus, bike or whatever public transport is available, and then expo generates a QR code for your ticket so you can scan i on the machine on the bus, train... etc.
A Fintech app is actually exactly what I have planned for the next clone - thanks for your input!
Missed opportunity to say “without further deliveroo” 😂
Daaaaaamn 😂
😂😂😂😂
This is great tutorial, can you do tutorial for Deep Linking integration next?
Will add it to my list!
Thanks!
Thank you for your support 💪
Ty for project!
New to react native, so asking to help ( googled before, dont saw any working answer):
i dont see header component in the start of video(nearly 13:00), shoding on my android virtual device, but i see header from same code in web version, in my browser.
I understant, that this is local problem, but maybe you have simple answer to it? Ty again
When setting the animationStyles for the clear all button, instead of opacity, could you have used display: none? or is the display property not animatable? Because as it is now the done button is offset to the right slightly when the clear all button is not displayed, as with 0 opacity the border still "blocks" its own space in the dom
Good idea, would have to try this out!
even why not border: none or something like that lol
style={[styles.btnContainer, { gap: selected.length > 0 ? 12 : 0 }]} fixed the problem. And don't forget to delete gap key from styles.btnContainer
HI wondering if Preact signals can replace Zustand ? can you experiment a new project with Signals as a state manager
Thank you
whats the differece between tabs@49 template and expo router's initial "navigation typescript" (file based routing) template?
I think they just have 5 active templates at this point. Try starting an app without specifying it and you get to select!
*Good work Simon...*
Thank you!
Unable to resolve "../Utilities/Platform" from "node_modules
eact-native\Libraries\ReactPrivate\ReactNativePrivateInterface.js" - Wie kriege ich das hin Simon ? :)
FYI. For the filter modal, the option presentation: "modal" is not supported for android devices.
yes same is the case with me. Does anyone know about it?
I saw a workaround for android (not as it looks on iphone - i think it's an os issue) add in the options "animation:'slide_from_bottom'" and it will pop up from the bottom like a modal (well almost) 🙂
i don't have i way to generate a key , does your key still working ,
Error: Unable to resolve module @/Components/CustomHeader from E:\deliverooClone\app\_layout.tsx: @/Components/CustomHeader could not be found within the project or in these directories:
node_modules
2 | import {Stack } from 'expo-router';
3 |
> 4 | import CustomHeader from '@/Components/CustomHeader';
@simon Grimm I don't know why my project is creating a dist folder for the file and giving me the error again and again like this --> Unable to resolve "../Components/CustomHeader" from "app\dist\_layout.js".It starts fine when I run the command npx expo but when I make changes and refresh it , it starts showing me the errors, I'm stuck here
IDK either, but it definitely should create or use a dist folder while developing!
I encountered similar problem and by just restarting everything and make it to build up again and that must solve it.
I'm using aws amplify, and I dont know if I should create my own location database using expo location and allow my users to add the place name or use google places.....I just don't want to eventually get to a place where their api dramatically changes in pricing like reddit
That's always the problem with external APIs. Maybe write a wrapper function in your backend which returns the AWS data - then you could swap it out in the future if it gets too costly!
is that google map apis free or we need to add credit card for free tier
Hey man... i have a question ... are you planning any tutorial about React Native Expo + Next.js (next-adapter) about routing and how to approach this type of app ? :)
Yeah definitely want to talk about that setup soon as well!
@@galaxies_dev Good to hear that ... im looking forward to it 👍
Am i need card or pay for using maps api?
Have you tried restyle?
Not yet, it's on my list next to NativeWind and Tamagui!
is the course still working and relevant
In the google places autocomplete/map modal you selected the location Berlin…it’s updated the state…searchInput. But the selected position is not updated in the Home screen. It’s still showing London. How to update the location in Home screen too?
You could use our Zustand state to keep track of the currently selected postion
@@galaxies_dev what you think of using useContext hook?
In Android, when we open a "fullScreenModal" from BottomSheetModal, the BottomSheetModal overrides the modal. Any ideas on how I can resolve this?
Also, awesome tutorial, really appreciate it!
Good question, I guess just some zIndex won't do :/ Will have to look into this!
@@galaxies_dev have you looked? :)
One of my goal goal was to learn how to pass information from a parent component to the child component, but unfortunatly you skip this part and put some static data (your vid: 2:37)... I'm stuck with this part. I use this script for instance in the Link tag : href={{ pathname: "DetailProduct",
params: { image: item.mainImage}, and in the detailProduct I receive this params with useSearchParams from expo-router, but unfortunatly, I can display the image...Do you have an idea please? thanks for all...
As these params are basically part of the URL I wouldn't send any big data (like base64) in it! What is the image value you receive on the details page? If you can't display it, probably it was not passed correctly to the page!
@@galaxies_dev how can I see the image value that I receive please? All I know is the size that I provide for the image work very well 🤔
Please do these kinds of 4-5hr builds with ionic-react
I have this error? Can someone tell me how to fix it?
TypeError: Cannot read property 'toString' of undefined
This error is located at:
in BottomSheetGestureHandlersProvider (created by BottomSheet)
in BottomSheet (created by BottomSheet)
in PortalHostComponent (created by PortalProviderComponent)
in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
in BottomSheetModalProviderWrapper (created by RootLayoutNav)
in RootLayoutNav
in Unknown (created by Route())
in Route (created by Route())
in Route() (created by ContextNavigator)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by wrapper)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by wrapper)
in wrapper (created by ContextNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by withDevTools(App))
in withDevTools(App) (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
That means you try to convert undefined to a string - check the values you pass to the sheet if any of them is undefined!
please tell me simon is android studio is necessary for this course?????????????? please
As we are using Expo all along the video this time you don't really need it!
@@galaxies_dev thanks
Do we need to enable payment for places api
Yeah I think so
excellent video simon, thank you very much.... One question, what extension do you use to give you the preview of the color in the variables, as in minute 23:15 (Colors.lightGrey)
I have 3, not sure which is used: Colorize, vscode-color-picker and react-native-stylesheet-color-palette
Hi! I have the following issue:
I have created a React Native project by using the command "npx create-expo-app@latest MobileExp --template tabs@49"
After that, I wrote the command "npm install -g expo-cli" to install the expo packages
I have checked and I have both npm and npx versions up to date
I have written the commands both inside the terminal of VS Code and the cmd of the file containing the project
Whenever I use "expo start" it does nothing
I previously created React Native projects, maybe it has something to do with that? Having npm installed globally or in a wrong manner?
Let me know if u have any ideas on how to fix this issue. I haven't managed to find a solution with chatGPT (shame on me)
It also tells me that there's no package.json in my project, even though there is, but it doesn't recognize it
I think I usually use the local package with "npx expo start"!
@@galaxies_dev I have tried that but it didn't fix it. It seems that the json locked file gets created outside of the project instead of inside. Even if I move it, it won't work, however, I'll dive into the documentation and give it a few more tries after reinstalling everything just in case
i have a question. can i use firebase to connect the project?
Sure, why not?
@@galaxies_dev I'm stuck by google map platform's payment request and I don't have a credit card, what can I do?
Dude, you're built differently in 2024!
Less beard, more code
Can you create a application that can decode and give us the code of any application we inputed in it like the link of the required app and then it reads the whole app and start writing it's code for us so that we can customize that app the way we want?
what the actual fuck are you on about?
no
awesome tutorials, but please the link to the images assets
There's a link in the description!
First? 😂
Well this is 5 hours tomorrow sorted haha
Hope you will have an epic day 😍
Why is it that every one avoids Google firebase login in expo, yets it's one of the most demand features 😢
Great build
Thank you - will do another tutorial on auth soon!
Atomation App using just the Capacitor
Join Galaxies.dev today - the Home of the Best React Native content🚀
Why you don’t used ionic + react? 👀👀
Because I got a lot of Ionic examples already :)
answer plz
the scrollview parallax component will eventually fail...
Yeah I'll try and figure out something better!
please create ionic(angular) content
Transform into PWA
you're teching skill is good but u explaining everything is too fast please explain slow so that the begginers can easily understand
Thank you, will try to improve on that!
why Stack.Screen doesn't work with me ?
this work for me
npx create-expo-app@latest galfood2 --template tabs@50