Form Solution: Creating the Modal

[00:00:00]
>> So, the first thing I'm gonna do is I think I'm gonna go into the Modal and then just add the text input where the user can type in. So, here's the Modal. Let's import the TextInput. And let's add it here. And we'll want to do useState to store the value for the TextInput.

[00:00:33]
So let's do, will be called it'll be a name and setName, useState and that's default this to an empty string, let's do value, being name, so on TextInput, TextInput. Yeah, I want to show you in the documentation, but let's say TextInput, it's just really handy to just have the reference for the component open, because it's easy to forget what their names are.

[00:01:19]
So on the web, you will have an onChange. But on text input, you can actually use onChange or on change text. So I usually use onChange text because for the argument, it just gives you the new text. So let's do onChanged text. And for this, basically we'll get to the new value.

[00:01:43]
And we'll call setName with the new value. And you can see it because we're passing the arguments state true, we can actually omit this step and then just pass in setName. Cool, so now if we launch the modal, what is this? And that's save, so it is actually showing up.

[00:02:11]
Here it is, but text inputs don't have any style by default, so you can hardly see it even though it does work. So the second thing we'll do is import StyleSheet and add some styles so we could actually see. Our input. So let's create the styles with StyleSheet.create.

[00:02:41]
And do input. Let's start off by adding a border, so let's do borderColor: 'grey'. BorderWidth: 1, we show we need and let's style, styles.input. Cool, let's add some padding to it as well. Padding, let's do 5, let's do 10, not 5 10, that's a lot. Okay 10 and we're gonna just add some styles to the view as well.

[00:03:27]
So just so we could have some padding. I'm gonna call it container. And let's do. Padding: 5, and let's do backgroundColor: 'white'. And you can see that's, this isn't actually taking up the whole screen, so in order to do that, we'll do add a flex: 1, here as well.

[00:04:08]
And I think here in the example actually added some rounded corners in the inputs. So let's do that as well. Can use borderRadius, let's make it 5. Cool, so now we've got an input. Whoops and now we got an input. That works, which is great. What should we do next?

[00:04:37]
Let's add a submit button. What do we call it? Let's call it submit. So let's do a TouchableOpacity. With some Text that says Submit. And let's import TouchableOpacity, I misspelled anything. I did. [SOUND]. Okay and let's give it some styles, style={styles button} and styles.buttonText [COUGH] button. We're going to add some height that's too maybe 60 and backgroundColor, Which I think they used teal.

[00:05:53]
I guess 60's a bit much, let's do 40, kinda refer to the rounded edges here or not. Okay, a bit of rounded edges, surrounded edges. Okay and now I want to center or submit text so you can use use flex for that so we got justifyContent: 'center' and alignItems: 'center'.

[00:06:32]
And last thing you wanna do is let's just update the button text so it's white so we can see it better. So color: 'white' fontWeight: 'bold'. Nice and I'm gonna add some padding just at the bottom of the input. That's margin, I it should be margin, marginBottom so they're not so close together.

[00:07:06]
Okay, now let's add a little text. Here's to tell the user that, what this input is for. So the little text and name of the palette, actually we could add a placeholder here as well. Placeholder the palette name. I'm gonna add some styles to this name with a palette text as well, just to add some space.

[00:08:07]
I think, I'm gonna make the container padding 10, just to give it a little bit more space. All right, so now we've got an input. We got an input, we got a title for the input, and we got a Submit button. So first thing we should do is, let's just see that we can pass the parameters back to our home component.

[00:08:36]
And without actually doing the selecting of the colors, so I'm going to wire up the submit button without passing in the colors first. So let's do, okay let's create a handle submit hook here. So let's use useCallback. And let's create a new constant for handle Submit. The idea is that this gets called when the user presses the submit button.

[00:09:23]
So if you remember, one of the requirements was that if the name is empty, you want the user to get an alert saying please enter a name, so let's add this here. Now to do this, we can use the alert module that's built into react-native. And what we can do here is if !name so if name is false, which is an empty string, or undefined.

[00:09:49]
We can do Alert.alerts, actually, so it actually call Alerts on alert to trigger it. Whatever you pass in here will be displayed to the user on the screen. So please enter a pallet name. Yeah and finally, we should wire this handle submit up so we pass it into our touchable opacity.

[00:10:18]
So unpress, we call handleSubmit. Now if you press submit, we get a little alert that says please enter a palette name. Now if I actually enter a name, I press Submit. We've still got this error. And hopefully you can already see why this is happening. And the reason is because we are relying on the value of this name, but we haven't added it here to the hooks array.

[00:10:51]
So in this case, we want this to change when the name changes. So we add the name here. So in this case. [SOUND] Like this doesn't trigger the alert. We haven't actually done the modal thing yet but this works correctly.