🔴 Build Food Recipe App in React Native Reanimated | React Native Projects | Beginner

🔴 Build Food Recipe App in React Native Reanimated | React Native Projects | Beginner | Tutorial

Рет қаралды 71,293

Күн бұрын

Hello everyone 👋, today we are going to make a fully functional & responsive food recipe app with react native using reanimated 3.0, Tailwindcss, image caching, responsiveness and cool animations. In this project you can see all the recipe categories, recipe details and you can search any recipe you want. After this video you will be able to create professional apps like this one.
make sure you like this video and subscribe the channel for more react native videos.
🚀 Source Code: links.codewithnomi.com/food-r...
Add TailwindCSS in React Native : • Add Tailwind CSS In Yo...
Add Navigation in React Native : • Food Delivery App with...
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewith...
🚨 more videos on react native:
Movie App : • 🔴 Build Movie App Usin...
Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Travel App UI : • 🔴 Travel App UI | Reac...
Weather App : • 🔴 Build Weather App Us...
Coffee App UI : • 🔴 Coffee App UI - Reac...
Food Delivery App : • 🔴 Build Food Delivery ...
KZfaq Clone App: • 🔴 KZfaq 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 recipe app in react native
react native food app
food app in react native
reanimated
animations
ios app
▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Intro
04:01 - Welcome Screen
13:28 - Home Screen
51:33 - Detail Screen
01:16:53 - Add Animations
01:20:39 - Final Demo

Пікірлер: 177

@tabaicanking3701 10 ай бұрын

Thanks, I learnt something today. Image caching

@aadilmallick911 9 ай бұрын

I just want to say keep doing what you are doing man. These UI tutorials are so good and I've already learnt so much from doing them. I'm not sure what you can do to get your videos more popular since React Native is more of a niche topic among devs and it's certainly not geared towards beginners, but you're really helping people out with these up-to-date and well-guided tutorials. Thanks.

@codewithnomi 9 ай бұрын

thanks ❤️

@wisdomelue 10 ай бұрын

great job noni, we appreciate your work

@MQLwithBrian 9 ай бұрын

This is something I want to learn next. Thank God I found your channel, this seems cool 😎

@diegofiguesevi8355 8 ай бұрын

I LOVE YOU!!! THANKS FOR THE TUTORIAL ❤

@sholuadeoluwakoredeolamide8186 9 ай бұрын

Exactly what I needed to take react native seriously again.

@cuocsongoCanada87 9 ай бұрын

Thanks so much. I'm so excited with your video.

@princechijioke247 10 ай бұрын

Your works are amazing...I've really learned a lot from your page 🎉

@ShawkiFitouri 9 ай бұрын

amazing nomi , as always !!

@SonnyTechAcademy 10 ай бұрын

Nice video! I've learnt a lot. Keep going man🚀 Much love from Ghana

@codewithnomi 10 ай бұрын

thanks man ❤️

@haniseanda 9 ай бұрын

Great Image Caching method🔥💯

@collinsk8754 3 ай бұрын

Excellent tutorial! 👏👏

@user-su7ew8id4e 10 ай бұрын

Great 🎉🎉 with animation you killed it

@arslanofcl 8 ай бұрын

Noman you are doing an amazing job! Keep it up!

@codewithnomi 8 ай бұрын

Thank you 🙏

@jgvlc 8 ай бұрын

Awesome channel, thank you very much for share!

@alzearafat 8 ай бұрын

Thank you, this is so helpful. Instant subscribe!

@codewithnomi 8 ай бұрын

Thank you

@user-uo6vy3jv5h 7 ай бұрын

one of the best video learned a lot.

@michealskup5730 10 ай бұрын

As a React native lover, thank u so much, plz make more videos of react native

@user-te4gn9yq5c 10 ай бұрын

nice work！have learned a lot form your video please keep update man

@haidarDevDiary 10 ай бұрын

Animations are great 👍

@sheikhhamad5069 3 ай бұрын

Great job ,Brother keep it up

@mathan3192 3 ай бұрын

Thanks for the awesome video.

@aymenbachiri-yh2hd Ай бұрын

Thank you so much

10 ай бұрын

Great work, thx.

@ahsanali580 7 ай бұрын

amazing design man

@robindeepcode 5 ай бұрын

thank you sir for this amazing videos

@byeworld4856 2 ай бұрын

Great job 🎉

@rahmatsulistio 10 ай бұрын

It's cool... can't wait for online course app with expo router

@iamasifimam 10 ай бұрын

awesome video thankyou for this

@mhslekbar 10 ай бұрын

Perfect 👍🏻

@rabieridene9193 7 ай бұрын

Thank you for great job to help we beginners.

@codewithnomi 7 ай бұрын

glad to help 😊

@yusufbashir4436 10 ай бұрын

Amazing 🤩

@inamulhasans9461 10 ай бұрын

Great video 🎉

@syedafatima135 24 күн бұрын

Thnku Sir

@user-jj6pl5rq6p 2 ай бұрын

good keep it up

@heysuryaaaa 9 ай бұрын

damn this is amazing!!!!

@ablayelo 10 ай бұрын

Very good stuff

@mnofrizal 7 ай бұрын

SUPERB VIDEOS!! In would be perfect if you includes how to setup all of things from beginning like installing the Expo or tailwiind css

@codewithnomi 7 ай бұрын

Noted!

@shubhamsinha5016 5 ай бұрын

Why I get only four images (meals data) from api?

@jeandesauw7646 7 ай бұрын

Thank you for this insightful build series! I'm eagerly looking forward to the upcoming videos. Could you share the expected schedule for releasing them? really appreciate the concise format - it's perfect for fitting some learning into a busy day without being overwhelming. Keep up the fantastic work, and happy coding! 👍

@codewithnomi 7 ай бұрын

thank you ❤️ Working on a new series, have a look: Build a Fitness App in React Native: kzfaq.info/sun/PLKWMD009Q4qScuZtpIsr-LaLl5dbDQcKb

@jeandesauw7646 7 ай бұрын

@@codewithnomi Oh ! I commented the wrong video 😅, I was talking about the fitness app series !

@jeandesauw7646 7 ай бұрын

I'll simply add this comment on the good video, see you there 😁

@codewithnomi 7 ай бұрын

@@jeandesauw7646 😄 no worries, uploading part 2 today 😉

@josephwhite3971 8 ай бұрын

***For MasonryList not loading*** What worked for me was adding a setTimeout method for 500-750 milliseconds. This loads after the page loads: const [showMasonryList, setShowMasonryList] = useState(false) useEffect(() => { const timer = setTimeout(() => { setShowMasonryList(true) }, 750) return () => { clearTimeout(timer) } }, []) return ( Recipes {showMasonryList && (

@tomkingg 6 ай бұрын

Thanks

@aayushsingh74 10 ай бұрын

Hello Noni Some of us are very new to React NATIVE so can you please make your videos that includes how do you install and make all the folders. It will be easy to learn and not get confused and leave the video after a minute. I hope you will act on it.

@codewithnomi 10 ай бұрын

will try making the app from scratch next time 😉

@ZakirUllah-xx6rn 20 күн бұрын

Lots of love Noman bhai.. Kia ap latest expo method se mac main build kesen krty hain bata skty hain pls, choti si app gradients and animations tailwind k sath Expo sdk 51 k sath

@amadousow6598 10 ай бұрын

thx a lot

@cwcfunclock2709 9 ай бұрын

Everything is really good. but I want to tell only one suggestion; please start from beginning. Please do everything on video. It will help us to know how to use commands to install dependencies. We want to know how you set your project up from beginning to end.

@codewithnomi 9 ай бұрын

There are video links in the description about how you can setup tailwindcss and navigation in expo

@cwcfunclock2709 9 ай бұрын

If you can do it in the video, it will be helpful for us. we, beginners can quickly pick up and go along with your flow. It's my humble request.@@codewithnomi

@codewithnomi 9 ай бұрын

@@cwcfunclock2709 I'll keep this in mind next time ;)

@mohamedbouaouine4384 3 ай бұрын

top

@mmsgaminglive 3 ай бұрын

can you tell me your setup specs, I saw your shorts and the setup was awesome

@jaifmd4691 9 ай бұрын

Great project. I would suggest you to use expo-sqlite instead of async storage to cache images or you could use expo-image which automatically caches the images. The problem with async storage is that it limits to only some amount of storage and I was getting, Error caching image: [Error: database or disk is full (code 13 SQLITE_FULL)] with async storage. Overall the animations and UI is awesome. Keep it up.

@codewithnomi 9 ай бұрын

thanks

@rish_you 8 ай бұрын

same issue faced🤝🏼...Thankyou bro you're a lifesaver 🫶🏻

@histoirechan6677 8 ай бұрын

@@rish_you how did you did it? i keep getting errors from changing expo-image

@lungchuingamriammei6631 5 ай бұрын

@@histoirechan6677 Try using hygraph

@sadique_x_ Ай бұрын

anyone fixed the issue with the masonry layout vanishing when the categories are loaded?

@furqanshaikh1027 4 ай бұрын

For Tail Wind CSS IntelliSense what you have used?

@ijasdeen5084 9 ай бұрын

Can you give us list of plugins you are using on your IDE?

@kelv-x 2 ай бұрын

I’ve been recreating this app in typescript and I haven’t had any issues so far, until the image caching part. Some things don’t just carry well into typescript and I’m stumped on how to move forward.

@ZZZZZZ-ly6fw Ай бұрын

I also stumbled upon that, 6mb is max alloted size, but cached image goes way beyond that, did you find any solution?

@aaronvandenberg5863 9 ай бұрын

Really cool! Is this also possible with Expo Router in combination with Reanimated?

@codewithnomi 9 ай бұрын

will have to check that

@aaronvandenberg5863 9 ай бұрын

@@codewithnomi That would be really cool!

@roudol-d 10 ай бұрын

Great project. If I want to build my own recipe database, what could I use instead of API? Since I want to give the possibility of making your own recipe; should I use sanity? If so, what changes?

@codewithnomi 10 ай бұрын

there are so many options yes you can use sanity, create sanity project, create schemas, fill all your data and then use it in your app 😉

@dkmediaworks9444 9 ай бұрын

Hey Nomi, its a great tutorial, i just have one question, I am not able to wrap my head around why did you use setMeals([]) in the handleChangeCategory, coz theoritically it seems to be resetting the meals that we set up in the getRecipe, but in practical it does nothing and even removing setMeals([]) doesn't do much Thanx again

@codewithnomi 9 ай бұрын

I set the meals with empty array so that when we get the new meals data then it will remount the meals component and it will reanimate all the recipes.

@codewithnomi 9 ай бұрын

you can remove this line if you want :)

@debadityakashyap628 9 ай бұрын

But should we have setMeals([]) before the getRecipe?

@codewithnomi 9 ай бұрын

@@debadityakashyap628 it doesn't matter if you put it after or before the getRecipe()

@snehadange4518 4 ай бұрын

Can you make a one video on handle axios api call optimize way?

@SanTechJJ 6 ай бұрын

This is really awesome project and a useful one What are the extensions you used to develop react-native projects?

@codewithnomi 5 ай бұрын

Auto Rename Tag ES7+ React/Redux/React-Native snippets Prettier - Code formatter Simple React Snippets Tailwind CSS IntelliSense

@shubhamsinha5016 5 ай бұрын

Bro, help me.. I get only four images ( meals data) while fetching data from api.. Why happening so

@sathisha8392 Ай бұрын

what about registration process.. is there any gudance for that?

@ragilburhanudinpamungkas9571 10 ай бұрын

It's amazing, hi Nomi, why you don's use react-native-image for image caching instead of creating your own caching method?

@codewithnomi 10 ай бұрын

I think react-native-image does not work properly in the expo project

@ragilburhanudinpamungkas9571 10 ай бұрын

@@codewithnomi sory, i mean react-native-fast-image

@codewithnomi 10 ай бұрын

@@ragilburhanudinpamungkas9571 yes i was talking about react-native-fast-image

@adriansamtani7120 9 ай бұрын

Hi Noni, When I add ring1padding and ring2padding into the style it gives me the error: "Reading from _value directly is only possible on the UI runtime" Not sure how to go around this

@codewithnomi 9 ай бұрын

not sure without checking the code!

@BuiltbyJay 8 ай бұрын

On the details screen when I scroll to the top the application closes

@migueljulio7242 Ай бұрын

hi nomi, i try to buy you a coffe, but any type of credit card or PSE dosent work

@christnovs 7 ай бұрын

What android simulator did you use sir?

@christophermungiria2876 10 ай бұрын

Nice video, please show how to use nativewind, the new docs are confusing

@codewithnomi 10 ай бұрын

I already have a video on how to setup nativewind kzfaq.info/get/bejne/lcBjZqeF05a-dqM.html

@christophermungiria2876 10 ай бұрын

@@codewithnomi this wasn’t working for me, I tried and got it another way, thank you though

@allmoviez 5 ай бұрын

mostly i use my real device to view when building apps, how do I make a the device screen show on my PC?

@codewithnomi 5 ай бұрын

Install xcode

@yenimimanoj9365 2 ай бұрын

I have started learning to develop applications using reactnative projects and came accross your video. Could you please help me understand what type of styling you have done in line 11,12 [TimeStamp: 6:38 ] .

@codewithnomi 2 ай бұрын

It's tailwindcss

@koadhiow 8 ай бұрын

at 46:00 => const handleChangeCategory = (category) => { getRecipes(category); setActiveCategory(category); setMeals([]); }; Could you please help me understand why the code setMeals([]) is used in this context and why it's placed below the getRecipes(category) I'm curious about the reasoning behind this order and its purpose. Doesn't placing it above getRecipes(category) achieve the same result? I'd like to better grasp the logic behind this implementation. thank you

@codewithnomi 8 ай бұрын

there's no specific reason for putting it after the api call. It will work the same even if you put it before the api call. It's just that the api call is going to take some time to fetch the data, and in the meantime setMeals([ ]); will remove the previous meals and show the loading, that's all.

@koadhiow 8 ай бұрын

@@codewithnomi thank you

@NunoCostapt 2 ай бұрын

Nice work. On android it jumps on transition. Good stuff, tho.

@top5deals 9 ай бұрын

catagories.length == 0 ? null : my problem is masonry layout not showing when i reload the app even i use this code and after that i got TypeError: data.map is not a function (it is undefined) that error kindly help me (Edited: 44:55 for that problem i think give data to the masonry list from a components through the props that may be the reason i solve i added the code of recipe component in the Home Screen)

@JaredTracy 3 ай бұрын

The masonrylist component breaks because the element above it (categories) is contained in a view that does not have a height specified. When the categories load, this results in the dom breaking for the masonrylist. If you place a style on the view wrapping the categories with a height of say heightpercentage 10 (roughly 90px), then the masonrylist won’t have any issues when React updates the dom when the categories load. This will allow you to keep the recipes in their own component. Hope that’s clear and helps.

@elyalotfali5791 2 күн бұрын

Where is the assets folder i need it

@souzafeb 9 ай бұрын

Thanks for the tut Nomi, but I've been getting this error (error: node_modules/expo/AppEntry.js: [BABEL] /Users/[my username]/tailwindcss/node_modules/expo/AppEntry.js: .plugins is not a valid Plugin property). Is it something you can help me with? I went back to your video explaining the installation, plus hours of research on the web, you know, reinstalling the project, deleting node_modules, changing versions, etc... Any help is very appreciated!

@codewithnomi 9 ай бұрын

I often face this error and clearing the npm cache, deleting node_modules, package-lock.json and then reinstalling them again works for me.

@ShahrukhKhan-yf7wz 3 ай бұрын

className is not working example className=" flex-1 justify-center" any idea why..?

@ayman7062 8 ай бұрын

Can you please make google aith in the next app ❤❤

@christophermungiria2876 10 ай бұрын

Hello, I have implemented some part of the favorites screen, but I have trouble sending data between the screens. How can I share my code with you?

@codewithnomi 10 ай бұрын

you can pass the data while you navigate to a screen, but if you want to access the same data on multiple screens at the same time then use redux

@christophermungiria2876 10 ай бұрын

@@codewithnomi I haven’t done redux, thank you. I’ll look into it

@harishkumardev5957 7 ай бұрын

I am using react native cli. In this tailwind is not supporting can you help me with this.

@codewithnomi 7 ай бұрын

Nativewind works perfectly with cli as well, check the documentation!

@harishkumardev5957 7 ай бұрын

It is working after I changed the version of tailwindcss to 3.3.2. Saw in one your video. Thanks. @@codewithnomi

@hussainmodiwala 9 ай бұрын

ERROR Error caching image: [Error: database or disk is full (code 13 SQLITE_FULL)] facing this error while caching images

@sahilw4594 9 ай бұрын

Hi bro . Have you found solution on this . I'm having same error!!

@codewithnomi 8 ай бұрын

fixed, I've updated the git repo

@debadityakashyap628 9 ай бұрын

Hey Nomi, i also tend to get this error "Error caching image: [Error: database or disk is full (code 13 SQLITE_FULL)]" when loading it in Android, do you know any fix for it, using Expo? Because of this the recipe screen causes error while loading (in android)

@codewithnomi 9 ай бұрын

I will check this issue

@sahilw4594 9 ай бұрын

Hi bro . Have you found solution for this . I'm getting same error

@udityadav9957 8 ай бұрын

I am also getting same error

@codewithnomi 8 ай бұрын

fixed this issue and updated the github repo 😊

@divtags4192 4 ай бұрын

This is good where is the github repo for the start up code

@codewithnomi 4 ай бұрын

You can find the source code in the video description 😉

@h.o.l.a.t 9 ай бұрын

The expo app closes sometimes when I navigate back from the recipe details screen. What could be causing this?

@BuiltbyJay 8 ай бұрын

Same here I don't know why or when I scroll to the top

@sunilkrishna2783 8 ай бұрын

same here if there is a youtube video then the navigate back not working and if i pause the youtube video then the navigate back is working

@codewithnomi 8 ай бұрын

The issue is with the webview and it crashes the entire app 🥲 This only happens on android because of the webview issue, for now i've updated the github repo and hidden the youtube video on android, now it only shows a video link and it opens the video in youtube app.

@tharukadeshan4518 7 ай бұрын

@@codewithnomi Hi I have fixed adding webViewStyle={{ opacity: 0.99 }} to KZfaqIframe

8 ай бұрын

Hi, I've been following your work and technically you're very good. but I would like to know how to rotate the cell phone screen next to vs code.......I don't know if you understood me

@codewithnomi 8 ай бұрын

There is a rotate icon on the simulator that puts phone in landscape mode, i'll create a tutorial someday on making the landscape mode responsive ;)

@rish_you 9 ай бұрын

You could have used flatlist instead of mapping catagories.

@codewithnomi 8 ай бұрын

I'll use flatlist next time 😊

@madie2659 7 ай бұрын

is there an option to to stop user to go back to welcome screen ?

@codewithnomi 7 ай бұрын

yes, use async storage

@madie2659 7 ай бұрын

@@codewithnomi Thanks

@Anonymous-pf4cr 5 ай бұрын

bro react reanimated was not working in receipes section

@SirRehman786 9 ай бұрын

Tailwind work on App. Js but not work on homescreen and welcomescreen plz help me sir g

@codewithnomi 9 ай бұрын

you need to update the contents array in your tailwind.config.js file to include all the paths for your directories where you are using classNames

@SirRehman786 9 ай бұрын

thanx a lot@@codewithnomi

5 ай бұрын

how did you install tailwind to your project?

@vishwavishwa456 Ай бұрын

Its called nativewind

@apxlxnix1 10 ай бұрын

New to react native, why does your project comes with those folders that mine doesn't come?

@codewithnomi 10 ай бұрын

I'll try making beginner friendly videos

@apxlxnix1 10 ай бұрын

@@codewithnomi It's already friendly, I just thought you used a different command to create your react native template

@codewithnomi 10 ай бұрын

@@apxlxnix1 yeah but they are not totally from scratch because i was trying to make the videos as short as possible

@ijasdeen5084 9 ай бұрын

Will that be responsive while running on Android phone?

@codewithnomi 9 ай бұрын

yes it will

@koadhiow 8 ай бұрын

"My app is encountering a 'database or disk is full (code 13 SQLITE_FULL[13])' error when using Expo on my Android phone. Could you please provide guidance on how to resolve this issue?"

@codewithnomi 8 ай бұрын

I'll check and update the git repo 😉

@koadhiow 8 ай бұрын

@@codewithnomi thank you

@codewithnomi 8 ай бұрын

@@koadhiowfixed and updated the repo

@koadhiow 8 ай бұрын

@@codewithnomi Great!, Glad to hear that, thank you🤩

@YL1998pradeep 9 ай бұрын

Bro which mac are u using

@codewithnomi 9 ай бұрын

macbook pro m2 2023

@muhammadmaaz6922 6 ай бұрын

facing error recipe.js screen line 22.. kindly help me.. error is :: TypeError: Cannot read property 'length' of null { categories.length==0 || meals.length==0? null: ( item.idMeal} numColumns={2} showsVerticalScrollIndicator={false} renderItem={({item, i}) => } // refreshing={isLoadingNext} // onRefresh={() => refetch({first: ITEM_CNT})} onEndReachedThreshold={0.1} // onEndReached={() => loadNext(ITEM_CNT)} /> )}

@muhammadmaaz6922 6 ай бұрын

@Code With Nomi

@codewithnomi 6 ай бұрын

Console log the data that you are setting in categories or meals.

@muhammadmaaz6922 6 ай бұрын

@@codewithnomi ok bhai

@shubhamthakur619 Ай бұрын

where you have mentioned the url to call the api, you must have used the wrong type of quotes. ` use these `