The Best React Native Menus with Zeego

drop-down menus and context menus have a very certain native feeling inside mobile application and the reason is that these are usually using native components to render a cool overlay UI component or something that pops out into your face with react native this doesn't work out of the box really great but recently I came across a library called zigo by Fernando Rojo which is actually already a bit older but I just had to share this with you because it works so so great great at first I was a bit confused about what zigo actually is because there's no real images there's a great talk that you can watch from Fernando Rojo and he's also been part of the rocket ship podcast I had him on as well basically there are two things we want to look at so we want to look at the two components because they're actually quite different and I just recently understood how they work so let's see how we can integrate them and what this actually does in our application um to get started I already brought up a new Expo application using Expo SDK 51 doesn't matter too much I think which version and I'm running this on both IOS and Android uh emulator so we're going to see both in action it looks to in my opinion a lot better on iOS because there's just no um same concept on Android that does look as good as it does here um however this new template here comes with some code that I actually want to get rid of uh and there's a script that we can call so under scripts there's a reset project script uh which will simply reset our application to a very basic STC and an index file and an infinite refresh okay that's interesting as well maybe we can just do one reload and then everyone's happy again okay cool so now everything's under app example I can remove this because we don't really need that um and under components we also don't really need uh that stuff we also don't need the hooks for this example or the constants we want to clean this up now if you want to add zego to your project you're going to first run npm at zigo or whatever package manager you're using you could also use yarn then you go ahead with the installation of react native iOS context menu and react native iOS utilities for iOS and for Android you're going to need react native menu this also won't work in the Expo go application so we're going to do a pre-build that shouldn't be a problem uh maybe at this point my video on all the different builds of Expo is out so go check that out otherwise simply run npx Expo run iOS or Android and you're going to have everything in place now let's see how we can get started and as I said we're going to take a look at the two things so we're going to look at drop down menu and we're going to look at context menu and how these differ because they actually like completely different uis but they still share the same setup so to get started uh you you see this is where I got lost initially so I got through the getting started um if you're in older versions you might have to use some build properties we don't uh you need to do custom development client yeah that's cool and then it drops down quickly into like using solito or um adding dripsy and create your Primitives and there's actually I think this is a bit confusing and we just want to do it in a really easy way so let's create our own drop- down menu component okay so I will call this dropdown menu. TSX here and going to do a component I want to have some props for this component so what I want to have is an array of items that can feed into this component every item has some properties we're going to get into the properties in a second and then we're going to have an on select basically we want to call that when an item here is selected um now you can use this as always so I can get my items and I get get un select here using props and then we can already integrate this into our index file uh let's see I want to keep this I want to not align this stuff I also don't need the text let's do this in a funny way let's put it up here in the header so you sometimes have like a drop down up there you can just do this with Expo router so I'm going to put in stack. screen uh on this page and Define my options here instead of uh within the layout file so we can definitely render a text if we want to we probably have to close this and then we should hopefully see can we just do please just keep up the sync I want to have IOS really really synced I don't want to press reload all the time maybe just going to close this for once it might help and then press I again so hopefully now the reload is working again okay now what I want is a header right component in which I will put in my cool dropdown menu component this drop down menu component requires now the on select uh so let's add a simple function up here which will handle that press so on select we're going to pass this to a function and then for the items let's begin with an empty array so we fix the problems uh element implicity has any type any uh where did I go wrong oh we should probably have it like this okay better um something expected are you happy now why are you not just loading this no apps connected yeah of course no apps connected for sure let me just do another npx Expo run iOS something got completely out of sync so hopefully this will fix it anyway we got this uh in our header component and we can already start working on that because now we need to take a look at how we actually use zego so as I said this is a bit confusing let's just look here first of all we're going to import this as everything okay import Star as drop- down menu naming is a bit confusing um I should probably use something else here maybe in your case uh call your custom component not drop down menu you see now we only got the difference here in the D be careful if you implement it like this to use the right names however um what we want to do is here is the basic usage so this is the usage and I was kind of a bit sad because once I copied this and put this into my component I think it it just didn't work out of the box okay uh a lot of things are not found so let's see if we can simplify this I will for the moment comment out all the stuff here uh then it's missing some okay we're just going to put in a text then it's happy and then we have the first part this is now interesting so usually you would think okay I have a header I will probably put like a touchable opacity or pressable here like with an icon and then it opens up the drop- down menu however the menu and both also the context menu we're going to see later work a bit different and that they have this um you're going to need this inline so we need our component actually in here probably you could like put in something that you can has another component to this um but in our case we're just going to do it directly in here and put in uh ionicons let's use name ellipses uh horizontal and a size of 24 okay so now we have our button up here which triggers the drop down menu and this already uh well we don't really have any kind of content right so our drop- down menu trigger doesn't really work at all um let's see if we can render something easy uh how about we get started with a drop-down menu label so if we place a simple label here we should see can I click this actually um we don't have any items I have my drop- down menu route I have the trigger here did we Define this correctly or did I troll myself got to be really careful here um it's probably that we are we're either not rendering this correctly yet or something else goes wrong let's see uh because usually I thought a drop down menu label should be enough let's see let's just put in a drop down item because an item is usually uh what you're going to see or what you're going to use so item might have a title I will already close this and say uh my item okay property key is missing that's always required so let's just set this to a random number and voila okay the uh label wasn't enough we actually needed an item so you see here we are rendering the label this is the drop- down menu label and here we do have the item which is displayed here I hope that makes sense this is a drop- down menu um and you can also see this if we open up the application on Android uh cannot connect to Metro I would say you can we might have different opinions about that uh let's see okay Android clicking here and it opens my you see they don't share the exact same functionality and especially not the same look however on Android it kind of looks like Android uh on iOS we also have the additional labels so you always have to be a bit careful and check out the documentation which of the different components so you can see let me put this here uh no you can't see it anymore where is this okay so you're going to have to check which of these work exactly on iOS Android or even the web because most of this does work on the web as well um now let's complete our example of this drop domain I think this is pretty cool this is just a native iOS menu and you can do a bunch of customizations um in our case let's say we want to define a little array of items so let's go back here to my item and I can now specify one item is like about the app it has an icon and an Android icon where do I get these items from good question that's what you should ask so on iOS you can actually use these SF symbols okay so for icon for example I use info Circle if I look this up this is this item and you can just find items here there are a bunch of I don't know how many like a few thousand items for Android what's the icon uh Android that's a good question Let's see we can go into the item icon uh for iOS Androids use the respective platforms names as the prop um that's a great recommendation uh I think I found this somewhere in the documentation of Android where was it this I definitely found a link somewhere I think Fernando added somewhere a sneakier link to the ah to the components custom components n not here but anyway it was kind of hard to figure that out uh which item name you want to use on Android so yeah be mindful of that anyway we got the items set up let's see how we can add a little iteration to our application so for this I want to add a group um so we can do a dropdown menu. group okay so everything we have starts with the root then we had the trigger now everything is wrapped inside the content which is the actual menu and a group just has like a little Separation on top and bottom here I could simply map through my items create an item for uh every element in my array on select I would call my onselect function so uh we would actually get the event up here and could handle this in the parent component and then we just use the item title and the item icon okay let's hit save and let's see and voila we do have this nice application I should get uh the locks down here so trigger press one and Trigger press two and we do see we have a little separation in that list if I check it out here um we see you know Android doesn't just doesn't have a great concept for this kind of popover it looks like this the icons are also horrible you can also by the way use your own images so don't get mad about these items but is just what you get um what could we do as well on top of this we could also create our custom component or a custom version of this so if you don't want to use it like this you could go ahead and Define some item props like this uh this is taken straight from the documentation of zego and then you could create your own like Galactic menu item using the create function so this is a really important piece here this has to be called and then you can create your own item you can pass the props or whatever you want and with that in place you could now um simply create your new item let's do another group below this so dropdown menu do we use lowercase here okay dropdown menu. group okay and I will put in my Galactic menu item and oh this instantly shows up I didn't expect that one that was nice F okay so you see you could also potentially create your own which then helps to your own styling to customize these items um or you could have like what do we what did I prepare um I also try to use like a checkbox item where you could update the state so we see now we have the item here with the checkbox um and a little question so there's a lot you can do with this this is a drop- down menu I click it it opens it uses a trigger and you can still put this although like you need that trigger defined here in the rout you can still now integrate it nicely into your other Pages like this if you create it as a component and pass it in the right places and just have like the trigger component included in it um I also use this in a cat GPT clone like when you press on the header it opens up a nice drop- down menu okay now the second thing about zego and maybe the one that's even more impressive to me is the context menu the context menu on iOS happens when you do like a Force touch or a long press I think it's more like a force touch not just a long press and then it pops out and opens up like a preview of something and then below there's a little U menu as well this just looks unbelievable good and we're going to implement this now uh let's do another component so I will call this one image with context. TSX rank native functional export and then in my index I will just place it in here image with context cool um let's hit save and then we have our image with context what a glorious component okay um let's get started by importing Star as context menu and the cool thing is that this follows pretty much the same setup like we had before so once you understand this it becomes a lot easier so you can now go ahead with context menu rout this is the wrapper you're going to have a trigger so you're going to have context menu. trigger uh and within the trigger I will now place a pressable component which holds uh react native image I'm going to set the source to yeah whatever let's see can we just hit save okay and this should actually be enough to Y open this so you see it tries to do something it's like I want to do this but I don't have any actions that's because we haven't defined any kind of a content for this uh by the way let's change this to a nice Galaxy uh themed image so I want to use this one here from the new project lunch pet okay this looks dope all right uh we can leave the trigger and we can go into the context menu. content and by the way we could have passed this image here uh easily through with like if we would use props up here and then pass it to the component okay that would be pretty easy now uh the next thing we need are the items again so let's do context menu item on press something then we have context menu. item title and then let's just close this for testing uh and this also usually requires a key right um and we don't want to define the onpress okay so let's see and I love this I just love this I don't know I fall in love with these context menus and what you can do so by default it we'll use this as the preview and it shows the menu how does it look in Android well not as good as it looks here but it actually works uh so you can long press and then will'll show your menu but let's see if we can make this even cooler so um at the top I want to define a few context items so this is how we could um customize this these context items could also be passed as props so then you could have like Supply apply your own menu from the parent component uh with the own actions in our case we just have like three actions here uh with icons defined and what we want to call here an action pressed and just going to lock this out with the action cool now we can pass this or we can map through the items so let's see uh I'm going to get well wa we can keep that one let's just iterate them create items just like we did before with item title item icon hit save and voila we have this beautiful context menu and of course if I click on one of these we should see the according look uh save share whatever functionality we attached to them um what else can we do there are a few more things or actually two more things I wanted to present to you so this is the basic functionality of the context menu again drop down context menu they share some similarity but the context menu is just so great with the background blur and stuff going on this is really I I'm I'm so in love with this um you can actually also have what I said before your own images so if you don't like uh especially on Android the icons I actually don't know if the item is rendered on Android uh I'm think let's check item IM image works on web and iOS I'm sorry Android Android will be ignored that's tough that's tough for Android okay let's see so if we had another item with a title and an item image using Source we could actually see that this is rendering MAA down here so it is rendering the image from that URL which we have here and it's rendering this in our context menu I really like this you could have like the user Avatar in there uh or whatever you prefer and finally by default you see the image just pops out here uh but you can also customize this also just want to check what's the state on Android okay we at least got all the buttons in here at least at least so if you wanted to change that you could change the preview okay uh let's put this in here uh context menu. preview and for the preview the syntax looks a bit strange so you don't just pass in any kind of view you actually pass in a function here that returns uh view okay and then we could have a text uh preview let's see if I now hit this we're going to have this small preview however this allows you to do basically whatever you want to do so you can now style that to your needs you can just put in any kind of styling specific with hate colors and text Styles and as a result you could have a preview like this this usually doesn't happen um but for example on the chat GPT app you can like do this Force touch on an old chat and it will open up and show you like the last chat message messages like the chat view maybe this even works on WhatsApp as well um it's just a cool functionality uh on top of all the other cool functionalities of zego so this already brings us to the end um also I think preview not working here on Android let's see what is this renders a custom component is visible on iOS requires passing a function as a child um yeah probably nothing about Android so these are the general functionalities of zego drop down menu context menu Android and also iOS uh drop down menu and context menu I think these give your app really a great native look and feel um you've maybe seen this in evans's demo at the reacton where he shared like the Expo rout Expo server comp no react server components demo and had like these native components pretty sure he used zego for that part as well there are a few more things about ego that I just want to mention um there are different properties and stylings we couldn't talk about everything in here so check out the documentation on these as well as for styling you can custom uh create custom components that's what we did using the create function so this is where we took that initial code from and you can also use something like dripsy or Tailwind CSS to further customize your components and styling however these examples get quick out of hand as you can see and I didn't want to confuse you with all of this code but I just want to mention it so you could use it with tripsy or use it with Tailwind CSS I think this looks actually pretty cool if you use uh the create function with Tailwind or native wind uh then it becomes like this uh pretty cool that you can combine this and piece the things together I think Fernando is always putting a lot of infort into making this possible and like giving you uh an experience that matches anything you've used before so you don't have to like learn something completely new uh for example with solito he tries to emulate the the next link or the next link component and the explorator link component um so you don't have to use anything new or learn anything new so that has been zego drop down menus remember just drop down context Menus can be applied to image pressable components and show you a little preview and an additional menu below it personally I fallen in this with uh in love with this completely I think especially on iOS this just looks amazing and gives your application a real native flare on Android it's probably not perfect but the cool thing is you can still use this universally this would also work on the web and the time are just that we're talking a lot about universal applications so Z is a fitting library in the spirit of the current time so let me know what you like about Z have you tried it are there any other libraries you want to see explored leave a comment and I will hopefully catch you in the next video so until then Happy coding Simon [Music]

Channel: Simon Grimm

Views: 6,842

Keywords: react native zeego, react native menu, react native dropdown, react native dropdown menu, react native dropdown list, react native context menu

Id: U7rzrV4_p14

Length: 24min 14sec (1454 seconds)

Published: Tue Jul 02 2024