This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Creating a Modal Solution Part 2" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott Moss: So let's look at that workout list. All right, so I'm using a couple things here. I got this button. I got the React Native vector icons here, a lot of stuff going on. If we look and see what's actually happening, it's actually just a small little view here.
[00:00:18] So it's just a view that has a text that says add some exercises and it has a button that when you press it, it just calls this.props.setModalVisibility to true. So enable the modal when you click that button. That's it. That's all it's doing and I added a icon in the button which is a plus.
[00:00:36] I didn't do anything else. I'm not checking to see if the current workout has items in it yet to render a list. We're gonna do that after the solution, so that's pretty much all that's happening here. It's literally just calling this prop.
>> Scott Moss: Any questions here? No, all right.
[00:00:57] And then let's look at the exercise modal. So this one's a little more beefy. So the exercise modal is using, did I get rid of? Wait.
>> Scott Moss: Looks like I got rid of the actual modal code in the modal, so we can do it live then. So the exercise modal is actually just going to launch the modal itself when clicked on.
[00:01:25] It looks like for some reason I erased it somehow, I don't know how, this is exercise list. That's why.
>> Scott Moss: One second. We'll speed this up so we don't have to watch me do this again.
>> Scott Moss: There we go, there's the modal, super easy.
>> Scott Moss: So here we go.
[00:01:50] This is the ExerciseModal.
>> Scott Moss: We don't need to list right now, we'll just put a View here.
>> Scott Moss: And a Text.
>> Scott Moss: Cool, so the ExerciseModal is literally just going to take in the visible property. So if we go back and look at the current workout, it has a visible property.
[00:02:29] That's gonna be true or false. That's gonna be bound to the props.exerciseModal that's coming from React. So it's gonna take that, and it's also gonna take a method or function called closeModal. So if we go back and look at that. Here we go. So we're binding to the visible property on an actual Modal component provided us from React Native.
[00:02:49] We're binding straight to that. I'm gonna put a slide animation on. And then onRequestClose, this is specifically for Android to send props.closeModal. For iOS, you don't have to put this, for Android this is required so clean up, and that's about it for now. Eventually we'll have some other stuff in here in the modal but for right now, this is it.
[00:03:16]
>> Scott Moss: Any questions on this? I'm gonna run it. I think it's gonna break cuz I forgot to do RNPM. Any questions so far before we run it? And then we'll go through the Redux thing and we'll see where the modal's opening and how that stuff is working so we can actually see it.
[00:03:30] No questions? Okay, let me just restart it. Pretty sure I got to run rnpm but let's just see. I want the binaries already linked from last time, yeah. Let's see here, main.
>> Scott Moss: This thing's freaking out on.
>> Scott Moss: Yeah. It's in a container now.
>> Scott Moss: From CurrentWorkout, there we go.
[00:04:13] So let's refresh that.
>> Scott Moss: We are in containers. There we go.
>> Scott Moss: No, it is not attached to parent. Okay, so you just gotta reload it, cuz you don't know what you're talking about. [LAUGH]
>> Scott Moss: There we go. All right, so it looks like we've got some styling issues going on with this current workout thing like this top bar taking up the whole page.
[00:04:45] So if we go to currentWorkout we can kind of fix that. Why is that thing freaking out? It's because,
>> Scott Moss: So let's give it a height of 40.
>> Scott Moss: Wow, why is that still so big?
>> Speaker 2: Is it cuz you have another flex 1 down below?
>> Scott Moss: Yeah, but I thought I took the flex off of it.
[00:05:13] All right, that's what I'll do, I think the default flex for that top bar should just come off.
>> Scott Moss: You don't flex. No default flex for you. There we go. And then we'll put 60 back here. There we go, sweet.
>> Scott Moss: All right, so now we've got this button here, if we click it, the modal pops up and it says modal.
[00:05:41] So what we'll do is we'll just run through this right quick. I can't close it cuz I didn't put the close thing in there. But we'll just run through and see how all that is working, yeah? All the way, yeah. So you can't see the menu if the modal is up.
[00:05:54] I forgot about that. So let's actually just add the button to close it right quick, yeah. So we'll say import Button from, what's that button thing that I use? That's this person. People always try to namespace their packages with weird names. APSL, I'm not sure what that means, but that's their namespace, Button.
[00:06:23]
>> Scott Moss: And then we'll say onPress just props.closeModal and then children, we'll say close. There we go, so now if I close it, it should close, sweet. All right, so let's actually look at this. Let's go to debugger. Let's turn this on, it's already on, sweet. Let's go to debugger, go here, open this up and let's set up some breakpoints so we can follow along what's actually happening.
[00:07:02] So the first thing we wanna do is let's go look inside of the containers and currentWorkout. So currentWorkout, you can go away. We want to take a look at when we click to open the modal so that's gonna be this method right here. So let's take a breakpoint there.
[00:07:24] So I'm gonna dispatch this action. We're gonna dispatch this function, this action creator which takes a Boolean and that's gonna dispatch an action. So then what that's gonna run if we head over to actions, it's then gonna run inside of actions this method right here. So then we'll put a breakpoint here and we should see this happen.
[00:07:44] So this is just gonna return an object with the payload on it. And when that dispatches, it should run this reducer right here inside of UI, which it's going to hit right here, or right here. Okay, I guess it'll be right there. Cuz it won't let me go anywhere else, sweet.
[00:08:04] And then once that happens, then the modal will open up. Because when this happens right here, when this new state happens, it's gonna come full circle back around a current container. And it's gonna be like, all right, update this state right here which is gonna update this prop, which is gonna cause this to rerender.
[00:08:22] And when it rerenders the thing that changed is this. This will now be true. It was false, but after we ran through Redux and did all that stuff inside the reducer, we changed it to true on this payload. So that's the only thing that's gonna change on a rerender.
[00:08:43] So let's check it out. So if we hit that, looks like it stops. If we go back, boom. So yeah, it stopped right here first, and if we look, the thing that we passed invisible is just a Boolean that says true. That's it, we passed that into setExerciseModalVisibility and we can look, the modal hasn't opened up yet, still closed.
[00:09:06] We hit play, we walk through it some more.
>> Scott Moss: Did it stop? What happened? Okay, it just went on. Anyway, now it stopped over here. Then it stopped here. Wait, did I take the breakpoint off?
>> Speaker 3: It's false.
>> Scott Moss: Yeah, cuz I just hit closed. It should stop right here.
[00:09:36] I guess it just didn't feel like it. Let's,
>> Scott Moss: Play right quick. There we go. All right, let's try that again. So we hit open, it'll stop right here. All right, so now we're dispatching setExerciseModalVisibility from '../actions/actions'. Cool, so yeah, it should stop right here. I don't know why it didn't stop.
[00:09:57] That's weird. Let's play it again.
>> Scott Moss: What? So it's not stopping here, but it's actually working. It's kind of crazy. Maybe I'll just do a refresh right quick. Let's try that.
>> Scott Moss: Reload, there it is. [LAUGH] Now it just comes in here somehow. There it is. Okay, thank you.
[00:10:42] Okay, let's try that again. So now we'll hit that.
>> Scott Moss: There it is. So this time it stopped right here on the createAction, which is going to just set the type to SET_EXECERCISE_VISIBILITY. And then set the value of true, right? And if we hit hit Play again.
>> Scott Moss: Did I not set up the reducer one?
[00:11:17]
>> Scott Moss: There we go. It moved it. Cuz I totally put it right there. Look, it's trying to move it. Right there, thank you.
>> Scott Moss: Hit close. Hit Play. There we go. So this time I closed it, but you can see it now it actually hit it. So the breakpoint's in the right place and it just set the type, same type that we dispatched and the payload in this case is false cuz I hit close.
[00:11:41] And once I hit Play, this should close and it closed.
>> Scott Moss: So let's actually run it through smoothly this time. There we go. So it stops right here on the createAction.
>> Scott Moss: And then stops right here on the reducer with the payload true. And then once this reducer is done, state is updated, modal is open, and it does the same thing going backwards, except for now the visible is now false.
[00:12:12] Well it's exactly the same thing, we're just changing the value. Reducer picks it up, switches it to false, and now it's closed.
>> Scott Moss: Everybody follow that? And the reason that works is remember, cuz we're binding in the currentWorkout,
>> Scott Moss: Set this.props.setModalVisibility, which we're getting from Redux is, I'm sorry.
[00:12:37] We're binding to this.props.exerciseModal which we're getting from Redux with is state.ui.exerciseModal. That's the thing that we're setting right here. When we pass in this visible character, we're overriding this value right here. And when it re-renders through the props, this gets called again with the props changed, of this now being true or false.
[00:13:00] And that's what toggles the visibility.