This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Exercise: Creating a Modal" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott: What I want you to do now is a few things. I want you to create a component right here that has a button, something you can click on. And when you click it, I guess we could jump right in since this is an async. When you click it, if you have my changes, then you have this UI reducer here.
[00:00:23] Or where is it at? There you go, you have this UI reducer here that sets the modal's visibility. So when you click it, you should make an action that sets this visibility. And then what I want you to do is, and I didn't show you this component because actually, you can just read it..
[00:00:47]
>> Scott: If you go to the React Native docs and you look for modal.
>> Scott: When you click it, it should open up a modal, that's it. The modal is actually really easy to use. You just use modal and you just say if it's open or not. Don't worry about closing it right now.
[00:01:06] Just try to get the modal to open when you click the button, that's it. But you should definitely make it go through redux though. So when you click the button, fire off an action of the type, if you're using the stuff that I put down, the type should be SET_EXERCISE_VISIBILITY.
[00:01:23] The payload should be true. And then that modal which is bind right to that state where it says visible, that's where it's gonna bind to. So that's the thing that's changing, whether it's a visible or not.
>> Scott: And that's it, that's all you gotta do. If you get that far and you still need something else to do inside the modal, if you look at the design,
[00:01:47]
>> Scott: Here, there's the same topbar component that we just made. Bring that topbar component in. But instead, put a input bar inside of it and style it to make it look like that. So we know how to input cuz that's the first thing we did yesterday with the Todo app.
[00:02:05] So you could bring that in and try to style it a little like that. I can promise you it's gonna be a little difficult, yes.
>> Speaker 2: Question, should we be concerned that the React Native modal is deprecated?
>> Scott: No, you shouldn't be concerned because it still works great.
[00:02:21]
>> Scott: Yes, yeah, it's fine.
>> Scott: Unless you have a better modal solution, then I would just use that one, yeah. And actually, I'm pretty sure it's not deprecated. Where did they see deprecated? The only thing that's deprecated is this animated property. The modal itself is not deprecated. Yeah, if it was deprecated, you'd actually get a warning right here.
[00:02:49] Like a yellow warning that pop, this thing is deprecated in this release. Next release, we just won't use it at all, I'll tell you that. Yeah, the animated property is deprecated in favor of animationType. So instead of just put animated true or false, it allows you to say, hey, what type of animation do you want, slide or fade?
[00:03:05]
>> Scott: Yeah, so this is fine.
>> Speaker 3: I have a question about sizing things. What's best practice? Say you make a design for the small iPhone, or make one for the big iPhone, right? And pack as much as you fit on there, like that.
>> Scott: Right.
>> Speaker 3: How is it gonna look in practice on the small one?
[00:03:31] Do you have to make separate style?
>> Scott: No, because everything's flex.
>> Speaker 3: Yes.
>> Scott: So it should be fine, yeah.
>> Speaker 3: So like the unit, say if you make it 60 unit.
>> Scott: Okay, so now if you do all the units, then yeah, you're gonna have to do the conversion yourself.
[00:03:49] I wouldn't just put it on there and expect it to be okay. There's gonna be some big differences where you have to change some things. I mean, it's the same thing with the web. If you have, first done about display versus 11-inch MacBook Air, things are gonna look different.
[00:04:03] So, you should know how to look for it and change it yourself.
>> Speaker 3: Probably a good reason to like back in the percentages.
>> Scott: Yeah, you can do them instead of just things-
>> Speaker 3: It makes wonder why you have to go out of your way to do that.
[00:04:20]
>> Scott: I don't know, that's a good question.
>> Speaker 3: Right.
>> Scott: Yeah, I wonder why they do that. I actually think that they scale the stuff for you. Because I think the units are relative to the screen in fact. So if you just use the units, I think you're actually fine, to be honest.
[00:04:35] We can try it on-
>> Speaker 3: Depending on the, I don't know, the aspect ratio, right?
>> Scott: Right, the aspect ratio of the device. So if unit's 6 Plus and you say this is 60 units, I think that's gonna look different in 60 units on a 4S. It's not gonna be the same value.
[00:04:50] I mean, it's not gonna be the same, what am I looking for? Yeah, it's gonna be different relative to that screen. I believe that's the way they do it. Otherwise, you wouldn't know what device you're on, so it would be crazy. So yeah, I think that's how they handle that.
[00:05:09]
>> Scott: Cool, yeah, cuz it's density pixels, so yeah they do. That's how it works, it's the density. Yeah, so the screen density pixels, yeah, that's definitely how it works. So yeah, you should be fine there.
>> Speaker 3: Yeah, do they each have the same number of density pixels? That probably varies from device to device.
[00:05:31]
>> Scott: Yeah, it varies. What I'm saying is if you had 60 density pixels on the most high resolution iPhone 6 Plus, it might be this big. But if you do the same 60 density pixels on a 4S, it won't be the same size it is on a 6 Plus.
[00:05:50] So it's not gonna be huge on the phone, it'll just be smaller.
>> Speaker 3: What I mean is, I don't know, say it's 100. The screen has 100 density pixels wide. So, you make some element that's 100, maybe another device would have 80.
>> Scott: I see what you mean, yeah.
[00:06:11]
>> Speaker 3: Is there is any rule of thumb?
>> Scott: I think once you max out, you max. The other one can only go to 80 and you put 100, then it's just max. You just hit 80 and there's nothing more. I don't think it'll draw off screen. I think you're fine, but we can test it.
[00:06:23] We'll do that after the workshop and see what happens.
>> Speaker 3: Well, it won't get cut off, right?
>> Scott: I'm not sure actually, I don't know how they do it. I think they do handle it where it doesn't get cut off. I'm not too sure, actually. I've read it on Android, but I can't say the same for iOS.
[00:06:39] That's why I'm not sure.
>> Scott: Cool, so any questions on what we're gonna be doing? So remember, we're doing two things.
>> Scott: Create this, where I can click on something. Which you need to create an action that when clicked is gonna dispatch. So you just gotta do a couple of things.
[00:06:59] It means you need to connect this CurrentWorkout, this UI thing, you need to connect it. Or actually, not even the CurrentWorkout. I think you can probably just connect the Main. Or CurrentWorkout, whichever one you want to connect. You just need to connect one of them. And you can pass in the actions.
[00:07:18] And on click in the CurrentWorkout, we wanna click something and have the modal launch up.
>> Scott: That's it, and have it go to redux. So let me push this stuff up and you can start here.
>> Scott: So it's on a 3rd-party branch.
>> Scott: With a 3, and yeah, again if you get really far with that, go ahead and try to style the input box inside that modal according to the designs.
[00:08:02] You can't really just style the input box like that. You have to wrap it in a view. You have to do some other stuff. It was a little more challenging than I thought it was, but it's totally possible to do that. And in the next exercise, we'll actually add this fuzzy searching and stuff like that in.
[00:08:23] And we'll add the API, stuff like that.