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.
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.
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.
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 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, 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?
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 (
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
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 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.
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 ] .
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, 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.
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
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, 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)
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!
"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?"
where you have mentioned the url to call the api, you must have used the wrong type of quotes. ` use these `
Год назад
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
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
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 😎
Very helpful , clear and crisp content, Thank you
Great project, thank you Nomi ❤
Nice video! I've learnt a lot. Keep going man🚀 Much love from Ghana
thanks man ❤️
Exactly what I needed to take react native seriously again.
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 ;)
Great Image Caching method🔥💯
Noman you are doing an amazing job! Keep it up!
Thank you 🙏
great job noni, we appreciate your work
I LOVE YOU!!! THANKS FOR THE TUTORIAL ❤
amazing nomi , as always !!
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 😉
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
Why I get only four images (meals data) from api?
Excellent tutorial! 👏👏
As a React native lover, thank u so much, plz make more videos of react native
Your works are amazing...I've really learned a lot from your page 🎉
Thank you, this is so helpful. Instant subscribe!
Thank you
Animations are great 👍
Great job ,Brother keep it up
Great 🎉🎉 with animation you killed it
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. I'm so excited with your video.
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
one of the best video learned a lot.
Awesome channel, thank you very much for share!
It's cool... can't wait for online course app with expo router
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
Great job 🎉
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?
amazing design man
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 video 🎉
thank you sir for this amazing videos
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!
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?
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
Thanks for the awesome video.
awesome video thankyou for this
***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
Amazing 🤩
For Tail Wind CSS IntelliSense what you have used?
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 😉
how did you install tailwind to your project?
Its called nativewind
Great work, thx.
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.
Perfect 👍🏻
anyone fixed the issue with the masonry layout vanishing when the categories are loaded?
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
good keep it up
damn this is amazing!!!!
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 so much
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
can you tell me your setup specs, I saw your shorts and the setup was awesome
what about registration process.. is there any gudance for that?
the tailwind is now working for me it's in conflict with react navigaton
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
What android simulator did you use sir?
On the details screen when I scroll to the top the application closes
Really cool! Is this also possible with Expo Router in combination with Reanimated?
will have to check that
@@codewithnomi That would be really cool!
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
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
can i create this app without expo?
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
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
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 give us list of plugins you are using on your IDE?
hi nomi, i try to buy you a coffe, but any type of credit card or PSE dosent work
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()
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
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
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
Bro pls the source code aint working , the site is down , pls help
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 😉
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 😊
Thnku Sir
pls wheres the source code for the assets such as image
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.
"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🤩
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
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
Where is the assets folder i need it
Will that be responsive while running on Android phone?
yes it will
Can you make a one video on handle axios api call optimize way?
You could have used flatlist instead of mapping catagories.
I'll use flatlist next time 😊
Bro which mac are u using
macbook pro m2 2023
bro react reanimated was not working in receipes section
className is not working example className=" flex-1 justify-center" any idea why..?
need to use style instead of className
thx a lot
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 `
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 ;)
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.
top
Can you please make google aith in the next app ❤❤