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.
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.
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
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.
***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 (
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
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.
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)
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.
Thanks so much, Nomi, for the great content! I need some help with the shared transition tag. It's not working as expected on Android-there's no effect at all. On iOS, the effect only shows when navigating back, but then the image disappears. Any advice?
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.
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 ] .
i couldn't find the images related to this project in your git repo kinldy upload or tell me if i am missing and react native reanimated have issues with java sdk 50+ latest version which occurs in babelconfig file
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.
Nomi, thank you for this great video, i done with it, am new to react but will get it right. you are a great teacher, however, i want to ask if you can do a video of strapi and expo. thank you
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
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! 👍
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?
Why are using hp for font size if a device is wider then or vice versa font is not just depends on height of device as every height and width ratio r not similar
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
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.
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
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.
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!
I often face this error and clearing the npm cache, deleting node_modules, package-lock.json and then reinstalling them again works for me.
Год назад
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
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)
"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?"
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.
thanks ❤️
Thanks, I learnt something today. Image caching
This is something I want to learn next. Thank God I found your channel, this seems cool 😎
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.
There are video links in the description about how you can setup tailwindcss and navigation in expo
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
@@cwcfunclock2709 I'll keep this in mind next time ;)
Why I get only four images (meals data) from api?
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.
will try making the app from scratch next time 😉
Very helpful , clear and crisp content, Thank you
Exactly what I needed to take react native seriously again.
Great project, thank you Nomi ❤
Great Image Caching method🔥💯
great job noni, we appreciate your work
***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 && (
Thanks
your github username??? mine is having many issues
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
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.
@@codewithnomi thank you
Noman you are doing an amazing job! Keep it up!
Thank you 🙏
I LOVE YOU!!! THANKS FOR THE TUTORIAL ❤
amazing nomi , as always !!
Nice video! I've learnt a lot. Keep going man🚀 Much love from Ghana
thanks man ❤️
As a React native lover, thank u so much, plz make more videos of react native
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)
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.
Your works are amazing...I've really learned a lot from your page 🎉
Thanks so much, Nomi, for the great content! I need some help with the shared transition tag. It's not working as expected on Android-there's no effect at all. On iOS, the effect only shows when navigating back, but then the image disappears. Any advice?
can you tell me your setup specs, I saw your shorts and the setup was awesome
your explanation is so clear, Thanks a Billion😘😘
sharedTransitionTag didn't worked for me, is it worked for you ?
@@SayeedAfridi-p6x English yes works will
For Tail Wind CSS IntelliSense what you have used?
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.
I also stumbled upon that, 6mb is max alloted size, but cached image goes way beyond that, did you find any solution?
Excellent tutorial! 👏👏
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 ] .
It's tailwindcss
Thank you, this is so helpful. Instant subscribe!
Thank you
i couldn't find the images related to this project in your git repo kinldy upload or tell me if i am missing and react native reanimated have issues with java sdk 50+ latest version which occurs in babelconfig file
Thanks so much. I'm so excited with your video.
Great 🎉🎉 with animation you killed it
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.
thanks
same issue faced🤝🏼...Thankyou bro you're a lifesaver 🫶🏻
@@rish_you how did you did it? i keep getting errors from changing expo-image
@@histoirechan6677 Try using hygraph
It's cool... can't wait for online course app with expo router
what about registration process.. is there any gudance for that?
Great job ,Brother keep it up
one of the best video learned a lot.
Nomi, thank you for this great video, i done with it, am new to react but will get it right. you are a great teacher, however, i want to ask if you can do a video of strapi and expo. thank you
@@eli.samuel sure, will do.
SUPERB VIDEOS!! In would be perfect if you includes how to setup all of things from beginning like installing the Expo or tailwiind css
Noted!
Can you give us list of plugins you are using on your IDE?
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
the tailwind is now working for me it's in conflict with react navigaton
This is really awesome project and a useful one
What are the extensions you used to develop react-native projects?
Auto Rename Tag
ES7+ React/Redux/React-Native snippets
Prettier - Code formatter
Simple React Snippets
Tailwind CSS IntelliSense
Bro, help me.. I get only four images ( meals data) while fetching data from api.. Why happening so
hi nomi, i try to buy you a coffe, but any type of credit card or PSE dosent work
anyone fixed the issue with the masonry layout vanishing when the categories are loaded?
how did you install tailwind to your project?
Its called nativewind
On the details screen when I scroll to the top the application closes
What android simulator did you use sir?
Really cool! Is this also possible with Expo Router in combination with Reanimated?
will have to check that
@@codewithnomi That would be really cool!
Thank you for great job to help we beginners.
glad to help 😊
nice work！have learned a lot form your video please keep update man
Awesome channel, thank you very much for share!
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! 👍
thank you ❤️
Working on a new series, have a look:
Build a Fitness App in React Native: ruclips.net/p/PLKWMD009Q4qScuZtpIsr-LaLl5dbDQcKb
@@codewithnomi Oh ! I commented the wrong video 😅, I was talking about the fitness app series !
I'll simply add this comment on the good video, see you there 😁
@@jeandesauw7646 😄 no worries, uploading part 2 today 😉
ERROR Error caching image: [Error: database or disk is full (code 13 SQLITE_FULL)] facing this error while caching images
Hi bro . Have you found solution on this . I'm having same error!!
fixed, I've updated the git repo
It's amazing, hi Nomi, why you don's use react-native-image for image caching instead of creating your own caching method?
I think react-native-image does not work properly in the expo project
@@codewithnomi sory, i mean react-native-fast-image
@@ragilburhanudinpamungkas9571 yes i was talking about react-native-fast-image
can i create this app without expo?
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?
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 😉
Why are using hp for font size if a device is wider then or vice versa font is not just depends on height of device as every height and width ratio r not similar
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
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.
you can remove this line if you want :)
But should we have setMeals([]) before the getRecipe?
@@debadityakashyap628 it doesn't matter if you put it after or before the getRecipe()
You could have used flatlist instead of mapping catagories.
I'll use flatlist next time 😊
mostly i use my real device to view when building apps, how do I make a the device screen show on my PC?
Install xcode
thank you sir for this amazing videos
amazing design man
Great job 🎉
pls wheres the source code for the assets such as image
Bro pls the source code aint working , the site is down , pls help
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
not sure without checking the code!
Can you make a one video on handle axios api call optimize way?
I am using react native cli. In this tailwind is not supporting can you help me with this.
Nativewind works perfectly with cli as well, check the documentation!
It is working after I changed the version of tailwindcss to 3.3.2. Saw in one your video. Thanks. @@codewithnomi
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?
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
@@codewithnomi I haven’t done redux, thank you. I’ll look into it
is there an option to to stop user to go back to welcome screen ?
yes, use async storage
@@codewithnomi Thanks
awesome video thankyou for this
Great video 🎉
Nice video, please show how to use nativewind, the new docs are confusing
I already have a video on how to setup nativewind
ruclips.net/video/_Z33DTn0ZFo/видео.html
@@codewithnomi this wasn’t working for me, I tried and got it another way, thank you though
Tailwind work on App. Js but not work on homescreen and welcomescreen plz help me sir g
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
thanx a lot@@codewithnomi
Thanks for the awesome video.
The expo app closes sometimes when I navigate back from the recipe details screen. What could be causing this?
Same here I don't know why or when I scroll to the top
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
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.
@@codewithnomi Hi
I have fixed adding webViewStyle={{ opacity: 0.99 }} to RUclipsIframe
Where is the assets folder i need it
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!
I often face this error and clearing the npm cache, deleting node_modules, package-lock.json and then reinstalling them again works for me.
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
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 ;)
Great work, thx.
Will that be responsive while running on Android phone?
yes it will
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)
I will check this issue
Hi bro . Have you found solution for this . I'm getting same error
I am also getting same error
fixed this issue and updated the github repo 😊
Perfect 👍🏻
Amazing 🤩
bro react reanimated was not working in receipes section
New to react native, why does your project comes with those folders that mine doesn't come?
I'll try making beginner friendly videos
@@codewithnomi It's already friendly, I just thought you used a different command to create your react native template
@@apxlxnix1 yeah but they are not totally from scratch because i was trying to make the videos as short as possible
Bro which mac are u using
macbook pro m2 2023
className is not working example className=" flex-1 justify-center" any idea why..?
need to use style instead of className
This is good where is the github repo for the start up code
You can find the source code in the video description 😉
Nice work. On android it jumps on transition. Good stuff, tho.
"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?"
I'll check and update the git repo 😉
@@codewithnomi thank you
@@koadhiowfixed and updated the repo
@@codewithnomi Great!, Glad to hear that, thank you🤩
Thank you so much
good keep it up
Can you please make google aith in the next app ❤❤
damn this is amazing!!!!
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)}
/>
)}
@Code With Nomi
Console log the data that you are setting in categories or meals.
@@codewithnomi ok bhai
where you have mentioned the url to call the api, you must have used the wrong type of quotes. ` use these `
className not working no effect
Thnku Sir
thx a lot
You can at least give the dummy data file link. Not everyone wants to buy source code just for the dummy data