🔴 Build Food Delivery App Using React Native And Sanity | React Native Projects | Beginners
Vložit
- čas přidán 12. 06. 2024
- Hello everyone 👋, today we are going to make a fully functional food delivery app with react native and sanity.io. We will be using react native expo, sanity.io, TailwindCss, React Navigation, data fetching and many more features...
You will learn a lot in this single video and you can add this project to your portfolio as well.
make sure you like this video and subscribe the channel for more react native videos.
🚀 Source Code: links.codewithnomi.com/food-d...
Images used in this project: drive.google.com/drive/folder...
Create sanity project : www.sanity.io/docs/create-a-s...
Sanity query language (GROQ) : www.sanity.io/docs/groq
Nativewind : www.nativewind.dev/
React Native Navigation : reactnavigation.org/
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewith...
🚨 more videos on react native:
Food Recipe App with Reanimated : • 🔴 Build Food Recipe Ap...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Movie App : • 🔴 Build Movie App Usin...
Weather App : • 🔴 Build Weather App Us...
Travel App UI : • 🔴 Travel App UI | Reac...
Coffee App UI: • 🔴 Coffee App UI - Reac...
CZcams Clone App: • 🔴 CZcams Clone - Reac...
Login | SignUp UI : • 🔴 Login | SignUp UI - ...
Fast Food App : • 🔴 Fast Food App UI - R...
App Store UI : • 🔴 App Store UI - React...
Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
Firebase Authentication React Native: • React Native Firebase ...
Food Delivery App : • Food Delivery App with...
Learn React Native: • Build Expensify App Wi...
Learn Reactjs: • Modern React For Begin...
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
food delivery app in react native
food app in react native
react native food delivery app
sanity project
▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Intro
04:02 - Creating Project
06:42 - Adding TailwindCSS
08:41 - Adding Navigation
11:18 - Home Screen UI
30:45 - Restaurant Screen UI
42:50 - Delivery Screen UI
01:04:50 - Adding ReduxToolkit
01:22:40 - Implementing Sanity.io
![Camera Framing 101: Cinematic Shot Composition Techniques You NEED to Know [Shot List, Ep 4]](http://i.ytimg.com/vi/fdW0jqtKYLU/mqdefault.jpg)
Hello friend, thank you for your video this project is lovely. I wanted to let you know that Tailwind is not working for me :( If I do it the way you do, I get the error message "use process(css).then(cb)". Even if I try it with yarn, it doesn't work either. There are no changes, Tailwind isn't working. I've tried everything, I don't know what else to do. Thank you for your help :)
Downgrade your tailwind version using this commad:
npm i --dev tailwindcss@3.3.2
@@codewithnomi I don't know what's going on, it doesn't work, neither with npm nor with yarn nor with @3.3.2 I don't understand if everything is fine, what's wrong :(
@@Nataliarianoo I had the same issue on a project and downgrading the tailwindcss to 3.3.2 worked for me, not sure why its not working for you. try using a different tailwindcss version.
@@codewithnomi Thanks for the help :) I searched, searched and searched and found the solution, omg I'm very happy, look what I did and in case it helps someone else it was:
This error is because of tailwind you need to change tailwind version from 3.3.3 to 3.3.2.All you need to do is remove node_modules folder and package-lock.json file and tailwind from package.json file and then npm install --dev tailwindcss@3.3.2
so:
1. Keep the version to 3.3.2
2. Clean the ios build and delete the Pods folder
3. Delete ios Derived data
4. Delete the node_modules and reinstall
5. Run the pod install
6. Run the app
Hi my dear, I've been stuck for a few days on the deburging that occurs when using tailwind. I followed the procedure, I tried to apply the two methods that you propose in another video but nothing at all works. What are you offering. I really need to do this app from start to finish. Thank you for your videos on important projects.
Thank you so much! Great video!
nice job man, thank you
Glad you liked it!
congrats on 1k subscribers. Allah apko mazeed kamyab kra Ameen
Ameen! Thank you ❤️
Amazing
mashaAllah doing great
thank you brother ❤️
where have you given those dilvery guy gif images cause i cant find it in the files you've provided?
In DeliveryScreen, when I click cancel button it redirect to HomeScreen but after few seconds it again redirect to DeliveryScreen. What I should do....
I'm not getting any data from sanity from the getCategories function...i've matched everything ..all code is similar to yours....i'm getting data by running query in sanity but nothing on my app..please help
Nice, I will complete this project and update you. Looking good already, it seems it's a compilation of your other videos right ?
yes, some of you guys suggested to make one long video, that's why I combined all the parts into one video 😊
@@codewithnomi Great… 🤗🤗🤗 you’re 2 subscribers away from 1k
@@codewithnomi Congrats on 1k
thank you ❤️
haven't you finished the project yet?
Hey friend for whatever reason, my code doesn't highlight when selected around the 21:17 mark
sir mere featured query me restaurant ke data show nhi ho raha what problem please fast reply
My EAS build is crashed while navigating to maps page ? can anyone help me thanks in advance
what extension you use to make it easier in typing syntax of NativeWind? like it suggest the color for you to choose instead of typing yoursefl?
Tailwind CSS IntelliSense
chao chi thu, have you figured it out yet on NativeWind?
I'm stuck on categories session with pizzaIcon.png, please help me
Can you recommend me how to set up android studio in window? Plz
Shared design figma ?
Damn these 2 hours tutorial but in reality it takes forever to code 😢
Can you build app in react native cli not in expo
Thank you for this great tutorial, but I just got stuck at 1:40:34 trying to load the data from sanity, ones I import the getCategories, the app just crashed, I disabled it and it is all good. Please is it that the client requires additional plugin to run the query?
what does it say in the console?
@@codewithnomi I found a solution to it, I had to import react-native-url-polyfill and ran the function in my App.js file and I was able to get my response from sanity.
@@desmondawere3409 I am having issue in the same place. Have you had ERROR TypeError: Cannot call a class as a function, js engine: hermes?
how did you deal with the problem that most of us encounter with tailwind? THANKS
I explain above how I fixed mine with polyfill
Hola soy estudiante de software desde Ecuador saludos. If possible, can you help me by telling me what version of Node.js did you use or can I use to make the project work please?
You can use the latest stable version of nodejs
Where can I find dummy data?
17:50 What extension do you use tooo show the property of ScrollView like: horiontal, showHorizontalScrollView,... My VS Code doesn't show suggestions like your VS Code.
ES7+ React/Redux/React-Native snippets
I installed that extension but it still doesn't work
@@reptv3089 it should, restart vs code
I tried restarting VS code and restarting the computer but it still doesn't work. Also, I noticed that even though my code works but the shadow effects in TailwindCSS don't work. I am using tailwindcss "3.3.2"
yes, currently shadow is not supported by tailwind in react native
Hello thank for this tutorial
i have an error
selector unknown returned a different result when called with the same parameters . this can lead to unnecessary renders error , that is the error
can you help
Same here please help
selector unknown returned a different result when called with the same parameters . this can lead to unnecessary renders error
// const result=useSelector(selectBasketItems)
// if(!result.length) return null
i am trying count on basketicon screen getting error (cannot read property 'items' of undefind please help
I think the cart items are not being set in the redux, debug the redux and cart component
this app have a problem "Redux error: Selector unknown returned a different result when called with the same parameters. This can lead to unnecessary renders error"
Could somebody fix this bug successfully?
me too
Hello Sir! Can this full application run on a mobile device if i connecct my phone to the pc? I need to make an aplication just like this but to be able to run in android as well as ios, that is why i am asking. Please let me know.
yes it can, make it responsive so that you don't face design issues on other devices 😉
sir plz next time plz use Native CLI approach plz sir
ok i'll try
Please make on boarding screen tutorial
czcams.com/video/RhF4iUCiwSs/video.html
1:40:33 I am not getting data from sanity... triple checked the code but no gain....simple got data: [] is showing on terminal as log
check the getCategories method and check if your sanity query is correct
Alternative of safe area view if i am building on Android 11:20
sir plz help in my case delivery gif image is not showing its shows me just skeleton of image i am using CLI
try installing react-native-svg
then cd into the ios folder and run "pod install"
this may fix the issue
@@codewithnomi sir i masage you on messenger plz see
I can’t get the tailwindcss to work is it something I need to do that I am missing from the video?
Watch this : czcams.com/video/_Z33DTn0ZFo/video.html
@@codewithnomi thank you but i have tried but the expo gives me error: "use process(css).then(cb)"
do you know what it might be and how to solve it?
me too
21:39
where is the complete code??
1:28:51
I want to contact you to create an integrated application for me in the field of restaurants and delivery, and how much will it cost?
codewithnomi.dev@gmail.com
where the images ,your github doenot work and give the
assets
assets : drive.google.com/drive/mobile/folders/1Ekf4tnqcPpFM1mUdXj8dR2ROJFF73ihF?usp=share_link
@@codewithnomi your githublink doesnt work sir
really sorry about that, i've updated the repo link, it should work now 🙂
@@codewithnomi thank you
hello how do you make it possible to type only "rnf" and get a function written ?
install this extension in vs code:
ES7+ React/Redux/React-Native snippets
delivery screen ui
redux error , selector unknown returned a different result when called with the same parameters . this can lead to unnecessary renders error , that is the error
can anybody help me
@@VladmirPutinOrg I have same problem. No idea how to fix it
@@Agromovedgar me too
Sir ya wala project is video ma complete ha??
It's the same project as this one 👇 czcams.com/play/PLKWMD009Q4qReQz5FOcvBik9WBJanJVZd.html
But in one complete video 😊
@@codewithnomi thanks sir
I really appreciate this video sir but you move too fast I mean very fast the tutorial is for beginners but I doubt beginners would understand this so I'm pleading can you explain stuff more as you do the tutorial. Thank you
I'll try to explain more, thanks for the feedback 😊
when i am use getCategories to fetch category then i have facing this error URLSearchParams.set is not implemented
Install this package:
npm install react-native-url-polyfill --save-dev
Then add this line in index.js :
import 'react-native-url-polyfill/auto';
Hello sir Can you kindly share any contact details need to connect with you for few things that would be very helpful..