Deliveroo Food Ordering Clone with React Native (Expo Router, Zustand, Reanimated, Google API)

[@NiallKiddle-d9g]

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.

[@galaxies_dev]

Wow thank you so much! And yes I will keep doing these 💪

[@gmusic8812]

This is awesome man, I'm currently on a project right now with Medusa Backend and Expo. This is just what I need!

[@galaxies_dev]

Awesome, let me know when you encounter any problems!

[@gmartins-dev]

What is the emulator config you are using please?@@galaxies_dev

[@Clytax]

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

[@galaxies_dev]

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

[@justjase10]

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...

[@cb73]

Missed opportunity to say “without further deliveroo” 😂

[@galaxies_dev]

Daaaaaamn 😂

[@ShadowsOfTheBeast1]

😂😂😂😂

[@lingadurai5805]

Thank you so much sir... love from india 🇮🇳

[@SaketK11]

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

[@galaxies_dev]

Glad you enjoyed it!

[@ilg3cko]

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?

[@galaxies_dev]

Thank you - it's Shades of Purple

[@CirusDev]

Thanks a lot Simon. Very cool staff. Keep going

[@galaxies_dev]

Thanks, will do!

[@mishen-thakshana]

Thankyou so much Simon. I have learned lot of things because of you. Your teaching style is fun.

[@galaxies_dev]

Happy to hear that - would be awesome if you could share it with others 🙌

[@raymondmichael4987]

Cool project case & with TS, I never subscribed that fast; You got 1+ loyal subscriber from Tanzania 🇹🇿 😊

[@galaxies_dev]

Wow thank you so much Raymond!

[@arindamroy9783]

Hey great video thank you so much for all your efforts . Wish you all the best and hope you get more success

[@galaxies_dev]

Thank you mate!

[@ZlatkoIliev-s4j]

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.

[@galaxies_dev]

A Fintech app is actually exactly what I have planned for the next clone - thanks for your input!

[@wadf29]

FYI. For the filter modal, the option presentation: "modal" is not supported for android devices.

[@DZM47]

yes same is the case with me. Does anyone know about it?

[@דודואדרי-ש3כ]

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) 🙂

[@arun553]

Thank you so much, I can't wait to watch this!

[@galaxies_dev]

You're so welcome!

[@asvicnal8483]

This is great tutorial, can you do tutorial for Deep Linking integration next?

[@galaxies_dev]

Will add it to my list!

[@mahendranath2504]

Nice thanks for sharing the knowledge, like and subscribed

[@galaxies_dev]

Welcome to the channel!

[@Matheus_1582]

Ola Simon, boa Noite... Você poreria recriar o Projeto do astro usando somente o CapacitorJs... Aquele que você fez no vídeo anterior...

[@wisdomelue]

really great, well done!

[@galaxies_dev]

Thank you mate!

[@josequintin2467]

Great job, Grimm!

[@galaxies_dev]

Thank you Jose!

[@enzobosch9770]

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)

[@galaxies_dev]

I have 3, not sure which is used: Colorize, vscode-color-picker and react-native-stylesheet-color-palette

[@jovanjevtic1620]

Isn't it a security issue to put your google api keys into .env file because it can be easely accessed from app binary. I think the best way to do it is to fetch it from a custom endpoint on the first opening and put it inside a scure storage. update: oh sorry, you just made it clear...

[@rustacean10]

whats the differece between tabs@49 template and expo router's initial "navigation typescript" (file based routing) template?

[@galaxies_dev]

I think they just have 5 active templates at this point. Try starting an app without specifying it and you get to select!

[@ousssika5359]

thanks for everything ,

[@דודואדרי-ש3כ]

great tutorial, i enjoyed it

[@galaxies_dev]

Join Galaxies.dev today - the Home of the Best React Native content🚀

[@fransenson]

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

[@galaxies_dev]

Good idea, would have to try this out!

[@jamilawada389]

even why not border: none or something like that lol

[@bugraotken]

style={[styles.btnContainer, { gap: selected.length > 0 ? 12 : 0 }]} fixed the problem. And don't forget to delete gap key from styles.btnContainer

[@movietime5333]

Unable to resolve "../Utilities/Platform" from "node_modules eact-native\Libraries\ReactPrivate\ReactNativePrivateInterface.js" - Wie kriege ich das hin Simon ? :)

[@Zero-vn8yy]

Loved it

[@galaxies_dev]

Give it a share to spread the gospel ✌️

[@TheSkeero]

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 ? :)

[@galaxies_dev]

Yeah definitely want to talk about that setup soon as well!

[@TheSkeero]

@@galaxies_dev Good to hear that ... im looking forward to it 👍

[@SidraJabeen-b5l]

@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

[@galaxies_dev]

IDK either, but it definitely should create or use a dist folder while developing!

[@magatjonathan1383]

I encountered similar problem and by just restarting everything and make it to build up again and that must solve it.

[@CoderTraveler]

*Good work Simon...*

[@galaxies_dev]

Thank you!

[@kambaalayashwanth123]

HI wondering if Preact signals can replace Zustand ? can you experiment a new project with Signals as a state manager Thank you

[@aymenbachiri-yh2hd]

thank you so much

[@galaxies_dev]

If you enjoyed it, maybe you can share the channel with your RN colleagues ✌️

[@bernhoffb]

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

[@disgruntleddev]

Have you tried restyle?

[@galaxies_dev]

Not yet, it's on my list next to NativeWind and Tamagui!

[@RavenXplod]

Please do these kinds of 4-5hr builds with ionic-react

[@ousssika5359]

i don't have i way to generate a key , does your key still working ,

[@yaser8354]

Awesome bro 🔥💪

[@galaxies_dev]

Thank you mate - what clone next??

[@yaser8354]

@@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!! ⭐

[@DomGarzaSR]

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

[@galaxies_dev]

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!

[@mfaizhussain7]

have any one run this on android the custom header not working does it work for you?

[@arun553]

Thanks!

[@galaxies_dev]

Thank you for your support 💪

[@ferrad1]

A Great Man !

[@galaxies_dev]

Thank you mate!

[@mo.x9013]

is the course still working and relevant

[@abdul-latifmohammed3276]

awesome tutorials, but please the link to the images assets

[@galaxies_dev]

There's a link in the description!

[@jd-haque]

Has anyone able to get "click to scroll" working from the category plz?

[@jithinjacob8174]

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?

[@galaxies_dev]

You could use our Zustand state to keep track of the currently selected postion

[@jithinjacob8174]

@@galaxies_dev what you think of using useContext hook?

[@israrahmad7035]

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';

[@furkanuzun8845]

Thanks 🙏

[@galaxies_dev]

Thank you so much!

[@dev_jun]

is that google map apis free or we need to add credit card for free tier

[@predofrazao]

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!

[@galaxies_dev]

Good question, I guess just some zIndex won't do :/ Will have to look into this!

[@Giobaski]

@@galaxies_dev have you looked? :)

[@Cricfan209]

Do we need to enable payment for places api

[@galaxies_dev]

Yeah I think so

[@OsamaHasan000]

please tell me simon is android studio is necessary for this course?????????????? please

[@galaxies_dev]

As we are using Expo all along the video this time you don't really need it!

[@OsamaHasan000]

@@galaxies_dev thanks

[@raihan7422]

Am i need card or pay for using maps api?

[@m__link6499]

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...

[@galaxies_dev]

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!

[@m__link6499]

@@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 🤔

[@hoangdinhthe1120]

i have a question. can i use firebase to connect the project?

[@galaxies_dev]

Sure, why not?

[@hoangdinhthe1120]

@@galaxies_dev I'm stuck by google map platform's payment request and I don't have a credit card, what can I do?

[@davidlintin]

Well this is 5 hours tomorrow sorted haha

[@galaxies_dev]

Hope you will have an epic day 😍

[@gopalpoojary8964]

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?

[@ImSuvasco]

what the actual fuck are you on about?

[@bugraotken]

no

[@vitaliejalbu8206]

Why you don’t used ionic + react? 👀👀

[@galaxies_dev]

Because I got a lot of Ionic examples already :)

[@PercyMelody]

Why is it that every one avoids Google firebase login in expo, yets it's one of the most demand features 😢

[@PercyMelody]

Great build

[@galaxies_dev]

Thank you - will do another tutorial on auth soon!

[@acasareto]

the scrollview parallax component will eventually fail...

[@galaxies_dev]

Yeah I'll try and figure out something better!

[@Matheus_1582]

Atomation App using just the Capacitor

[@Valentin2000258]

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

[@galaxies_dev]

I think I usually use the local package with "npx expo start"!

[@Valentin2000258]

@@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

[@drazensimonovic3197]

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

[@galaxies_dev]

That means you try to convert undefined to a string - check the values you pass to the sheet if any of them is undefined!

[@AkmalAshwin]

wheres the payment gateway bruh

[@logiccomputer8000]

please create ionic(angular) content

[@israrahmad7035]

answer plz

[@Yasvantkumar-r1b]

you're teching skill is good but u explaining everything is too fast please explain slow so that the begginers can easily understand

[@galaxies_dev]

Thank you, will try to improve on that!

[@MrAvelino2010]

Transform into PWA

[@syaefulbahri5315]

First? 😂

[@HABIBAHBAWA]

why Stack.Screen doesn't work with me ?

[@InfinityInsights758]

[@artyomgrigorev2186]

this work for me npx create-expo-app@latest galfood2 --template tabs@50