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.
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.
***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 (
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! 👍
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
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’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.
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?
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.
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.
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
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)
You can find the source code in the video description 😉
Před 10 měsíci
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
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!
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.
"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 ❤️
your explanation is so clear, Thanks a Billion😘😘
Great project, thank you Nomi ❤
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 ;)
Thanks, I learnt something today. Image caching
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 😉
Exactly what I needed to take react native seriously again.
Nice video! I've learnt a lot. Keep going man🚀 Much love from Ghana
thanks man ❤️
This is something I want to learn next. Thank God I found your channel, this seems cool 😎
As a React native lover, thank u so much, plz make more videos of react native
Great Image Caching method🔥💯
Noman you are doing an amazing job! Keep it up!
Thank you 🙏
great job noni, we appreciate your work
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
I LOVE YOU!!! THANKS FOR THE TUTORIAL ❤
Your works are amazing...I've really learned a lot from your page 🎉
***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
Thank you, this is so helpful. Instant subscribe!
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
It's cool... can't wait for online course app with expo router
amazing nomi , as always !!
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!
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: czcams.com/play/PLKWMD009Q4qScuZtpIsr-LaLl5dbDQcKb.html
@@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 😉
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.
Thanks so much. I'm so excited with your video.
Animations are great 👍
Great 🎉🎉 with animation you killed it
Excellent tutorial! 👏👏
one of the best video learned a lot.
Thank you for great job to help we beginners.
glad to help 😊
Why I get only four images (meals data) from api?
Great job ,Brother keep it up
nice work！have learned a lot form your video please keep update man
Awesome channel, thank you very much for share!
amazing design man
Thanks for the awesome video.
thank you sir for this amazing videos
Great job 🎉
Great work, thx.
awesome video thankyou for this
Thank you so much
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
Great video 🎉
Perfect 👍🏻
Thnku Sir
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
can you tell me your setup specs, I saw your shorts and the setup was awesome
Amazing 🤩
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?
damn this is amazing!!!!
good keep it up
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
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
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 😉
Very good stuff
what about registration process.. is there any gudance for that?
Really cool! Is this also possible with Expo Router in combination with Reanimated?
will have to check that
@@codewithnomi That would be really cool!
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?
For Tail Wind CSS IntelliSense what you have used?
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()
Nice work. On android it jumps on transition. Good stuff, tho.
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
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.
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
Can you give us list of plugins you are using on your IDE?
Nice video, please show how to use nativewind, the new docs are confusing
I already have a video on how to setup nativewind
czcams.com/video/_Z33DTn0ZFo/video.html
@@codewithnomi this wasn’t working for me, I tried and got it another way, thank you though
thx a lot
Can you make a one video on handle axios api call optimize way?
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!
What android simulator did you use sir?
On the details screen when I scroll to the top the application closes
Where is the assets folder i need it
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 😊
This is good where is the github repo for the start up code
You can find the source code in the video description 😉
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 ;)
bro react reanimated was not working in receipes section
top
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.
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
Will that be responsive while running on Android phone?
yes it will
className is not working example className=" flex-1 justify-center" any idea why..?
need to use style instead of className
is there an option to to stop user to go back to welcome screen ?
yes, use async storage
@@codewithnomi Thanks
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
Can you please make google aith in the next app ❤❤
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 CZcamsIframe
You could have used flatlist instead of mapping catagories.
I'll use flatlist next time 😊
how did you install tailwind to your project?
Its called nativewind
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
"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🤩
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
You can at least give the dummy data file link. Not everyone wants to buy source code just for the dummy data
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
Patreon?
I haven't setup my patreon page, cause im not really sure what to offer there 😅, but i'll soon set it up
here:
patreon.com/CodeWithNomi
P r o m o S M 👊
f
mf uses all the tricks to pay for assets