Full-Screen Modals

[00:00:00]
>> Kadi Kraman: So next up we're going to breeze through some UI work. So we need to actually build this plant management UI. A lot of this is going to be concepts that we already use. So I'm going to point out the more interesting things. But we will be copy pasting some UI code.

[00:00:16]
So first we will need a full screen modal to add a new plant. So if you go to the end of this lesson, you'll see what we are aiming for. So on iOS, we're going to render a full screen modal over the top of our button tabs. And then on Android, I've just kept the default animation.

[00:00:37]
So it will slide in from the right, but it will still be a full screen modal. You could change this animation to also slide in from the bottom if you prefer, but I like to keep the defaults when possible. So how do we render a full screen modal over the top?

[00:00:55]
So we want to open it with an icon button from the homepage. So you might think that you would want to render it inside your tabs, but if we render it inside our tabs, it won't be able to render over the top of these bottom tabs, even if you render it modally.

[00:01:12]
So whenever you want to render a modal over the top of content, then this modal needs to be defined at the same level. Or above the content that you want it to overlay. So in our case, we want it to be at the very top or root level.

[00:01:29]
So in our app folder, let's create a new file called new.tsx. And let's just copy this placeholder. So it's just gonna be a view with some center align text. And let's add the screen into our layout file as well. So again, the screen already exists even though I haven't added anything.

[00:02:03]
But I want to use the options to set the presentation mode to modal. So let's do new, and we want to do presentation modal. And let's give it a title of New plant. Next, let's add a little vector icon button at the home header on the right, like a little plus for adding a new button.

[00:02:46]
So we can choose a vector record from here. So I think I used a plus from undesign. So copy this. So it's not gonna be in this root layout file, I almost did the wrong thing. So we want to add this. So we've hidden this header, if you see.

[00:03:09]
So we've got headerShown false. So we want this header button to be in the layout file of our tabs. So if we go into this layout file, and we have our index file, so it will be a header button on this index file. So import it. And in index, we'll do a headerRight.

[00:03:38]
HeaderRight, and this will be a function. And let's start by rendering this icon. Lovely, so this is rendering to the right of the screen. I want this to be a pressable, so let's wrap this in a Pressable. So this will be imported from. And let's use the Link component from explore later, and the href is going to be new.

[00:04:22]
Okay, so now if I click this, it's not going to work and that's because we have a component as a child of our X-ray router link. So whenever you run the text here, so if I just said New as a text, then this will work. But because I'm rendering a component, I need to use the asChild prop.

[00:04:45]
If I do asChild, then this does open. So for this pressable, let's add some margin. So let's do a quick style. Let's keep it an inline style. Let's just do a marginRight of, marginRight, of 18. So it's not squished against the edge. And instead of black, let's use our beautiful green color.

[00:05:17]
So we'll do theme and colorGreen. And now the last thing, and actually the reason that I've added this pressable here, is that, notice that when I click on the icon, or tap on the icon, I need to click exactly on the icon. So even if I'm being a bit butter fingered, and clicking Next to the icon, it's not actually opening.

[00:05:43]
And this is not great UX. If you're doing icon buttons, you need to make sure that your pressable area is big enough for users to comfortably catch it. So on pressable or any type of components, you can use the hitSlap. And this basically adds additional pressable area around your pressable component that also triggers the onPress.

[00:06:07]
So we'll do hitSlap 20, and now notice that I can click next to the button. Don't have to be right on it to also trigger this modal. Does that affect styling, or spacing or anything. It doesn't affect styling.