No Comments Yet
Be the first to share your thoughts and start the conversation.
Menu Item Component
Loading...
Loading...
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we learn how to create a reusable menu item card component in React that can be used to display various fast food items. The process involves creating a new component and fetching item properties such as image URL, name, and price. The tutorial outlines how to structure the card, making it clickable, and ensuring it is visually appealing on mobile devices.
MenuCard in the components folder.MenuCard by passing props, including item details such as image URL, name, and price.00:00:02 So now let's create a reusable menu item card that we can then put here and replicate for all of the items.
00:00:10 We can do that by creating a new component within the components folder and I'll call it a menu card.
00:00:19 .tsx run rnfe and then just put it right here.
00:00:25 Perfect.
00:00:27 head back over to our search and instead of rendering a simple piece of text, actually render the menu card that we just created.
00:00:37 And to it, you can pass the entire item as a prop.
00:00:41 So item as menu item, so it knows what it is.
00:00:45 And this menu item will contain all of these important information about the menu card item.
00:00:51 So let's head over into it and let's fetch those props and implement it.
00:00:56 We can start by destructuring the item and then further destructuring the image URL, the name and the price from it.
00:01:06 And this will be of a type, item is a menu item.
00:01:13 So that our app knows what we're working with.
00:01:15 Then the way you read images from storage in AppRite is you have to form the URL out of your image URL and the AppRite project ID.
00:01:25 So I'll say image URL is equal to a template string of image underscore URL and then question mark project is equal to and then you can pass the app right
00:01:40 config dot project ID.
00:01:42 So now that we have this image URL, we can actually create each one of these cards, but it won't be a view.
00:01:48 Rather, it'll be a touchable opacity because you'll be able to click on it.
00:01:53 Within this touchable opacity, we can render an image and this image will have a source equal to URI is equal to image URL with a class name equal to size
00:02:07 of 32, absolute and minus stop minus 10 to make it feel like it's floating with a resize mode of contain.
00:02:19 So now if you save it, you should be able to see, if you head back over to your search, all of these different fast food items appearing on your screen.
00:02:30 That's too many of them.
00:02:32 And what we can also do is render a piece of text just below it.
00:02:36 This text will render the name of the item.
00:02:39 And we can style it a bit by giving it a class name of text-center, base-bold, Text-dark 100 and the margin bottom of 2 to divide it a bit from the image
00:02:53 with a number of lines property set to 1 so it can actually not go into two lines.
00:02:59 And this will of course make it look a tiny bit better for now.
00:03:02 Below this text we can also render another piece of text that we'll render from and then dollar sign, and then the price.
00:03:12 This one will have a class name equal to body regular, text dash gray dash 200, and a margin bottom of four.
00:03:23 Below it, we can finally render a touchable opacity, so another button, with an empty on press function for now.
00:03:30 And within it, we can render a piece of text that'll say add to cart with a little plus icon, and a class name of paragraph dash bold and text dash primary.
00:03:44 So if we save it, it'll look something like this.
00:03:47 Now it'll have the add to card button and it'll seem even messier.
00:03:51 But finally, to fix it, we just have to give this touchable opacity a class name equal to menu card.
00:04:01 If you do it like this, you'll see that now it's gonna appear within this card.
00:04:06 And we also have to give it some additional styles to make it look better on Android by selecting the platform we're on,
00:04:14 so the operating system.
00:04:16 And if it is set to Android, in that case, we can also give it an object of elevation is set to 10 and a shadow color equal to and we can give it some
00:04:33 hexadecimal value of like 878787 or if we're not on Android we can just make it an empty style object.
00:04:43 So now it's gonna look good on mobile as well.
00:04:46 And with that in mind, we have just developed this menu item card.
00:04:50 Well, it's pretty cool because finally we can visualize all of these items.
00:04:54 And thanks to the native abilities of the touchable opacity component, these actually seem clickable.
00:05:00 So as you hover over them, scroll, and for the first time we have a very nice flat list.
00:05:05 So you can see how it's very optimized for all of these different items.
00:05:10 Sorry for scrolling too fast.
00:05:12 But yeah, you get the idea.
00:05:13 You can now visualize these elements.
00:05:16 The photos, of course, make it so much more appealing because you can visually see what it is about.
00:05:22 The price, of course, is very small and hidden, and you can just immediately add it to the cart.
00:05:27 But before I actually implement add to cart functionalities, in the next lesson, we'll focus on this little search input and filter right here below the
00:05:38 search at the top.
00:05:38 I'm referring to this part right here.
00:05:41 Of course, this is a typical search input.
00:05:43 And then this is a slideable filters bar, which I think you've seen pretty much on every single mobile application.
00:05:51 So let's do those next.
