Creating a New Plant Form

[00:00:00]
>> Kadi Kraman: Now we want to create a form to add our new plant. And if you fancy a challenge, look at the screenshots below, and you can try to create this UI for yourself. I'm not going to live code it because it's quite a lot of code, and we have lots of exciting things to get to.

[00:00:17]
So, try to build it for yourself and check Your work or do as I do, and you can copy this new color from our theme. So in a theme, we're going to add a light gray color. So you know how there's colors that you like just tend to use as default, so I find this e light gray, it's quite pleasant, so I tend to use it a lot.

[00:00:42]
So I tend to use pink for debugging, but this is a nice one, and we're going to use it for the input border. And then for this new, you can copy this entire file and then replace the contents of our new screen with this.
>> Kadi Kraman: So now if we open, we have our new plot modal with two inputs.

[00:01:10]
>> Kadi Kraman: And just walking through the code because I did copy it, so what do we have? We have two useState Hooks, these are from react. And they are going to store the name and how often you need to water the plant. So in react native, you don't have a form element the same way you would do on the web.

[00:01:36]
So each of the inputs are handled independently. So you can use a form management library like Redux form or React hook form, etc. But here, because it's just two inputs, I've used state values both. Then I rendered this into a scroll view. So probably there will going to be enough space to render it at all screens, but let's not take any Chances to run this in this worldview.

[00:02:02]
And if you recall from before, we had scroll views and that list. So this is actually a great example of whence the scroll view is appropriate to use so there's no items here that we want to map over to make an arbitrary long list. So in this case scroll view is the perfect, [INAUDIBLE].

[00:02:19]
And we have our plant image and we have our two text inputs. And notice that this text input is a text, and here we're actually expecting this to be a number. And let me open the keyboard in my Simulator, there you go. So if I now focus on this text input, it will open a text keyboard.

[00:02:47]
You'll focus on the other text input will open on the keyboard. And that's because of this keyboard type property here. I've also added some simple validation, so I didn't do a validation UI. So it's just If you leave these empty, it's going to give you just an alert saying, no, that's a validation.

[00:03:06]
So in a real-world app, you would probably do a validation UI where it has an error, and you displayed an error on the UI. But for our purposes, this is enough to make sure that we don't get garbage data.
>> Speaker 2: Someone's asking if touchableopacity, and button also have a hit prop.

[00:03:23]
>> Kadi Kraman: I think they do, so we can try it.
>> Kadi Kraman: Yes, so touchableopacity, what was the other one?
>> Speaker 2: Just the button.
>> Kadi Kraman: Button? Ooh, button actually might not, It's very bare buttons, yeah, no hit prop on button. But the touchable elements do have it.
>> Kadi Kraman: All right, and let me just open this on my phone.

[00:04:00]
Phone so i use an iPhone for my daily use and like one of the most useful things in my team. When we're building apps is to have team members who use an android phone as their main phone. They are worth their weight in gold really because it was really great to have To have a native Android developer, like actually like look at the UX.

[00:04:24]
And then the other thing that was really useful for me is actually getting a proper Android phone. So this is a Pixel six or seven, but it's a good Android phone. And I always develop because I'm an iOS user, iPhone user. Tend to develop an ios simulator because it's easier to use and then I have an iphone.

[00:04:44]
And you end up thinking that Android phones aren't very good. Or testing for Android is this afterthought because a lot of the time we have a testing device. That's really old because you just buy a cheap Android phone for testing to make sure that It works. And actually having a good Android phone and then using it for web creative apps.

[00:05:05]
Android is pretty damn amazing, I am very impressed. So getting a proper, if it's possible, get your work to get you a proper Android phone for testing.
>> Speaker 2: I agree with you. I've got teams that where they all say, my stuff's working. Okay, did you test Android? No, because they're on an iPhone.

[00:05:25]
>> Kadi Kraman: [LAUGH] Why would we do that? And I've actually spotted a bug. I think I missed this because, again, I didn't test on Android. And this screen, this text is like right to the edges of my screen on onboarding. So we can actually fix that real quick, if we go to onboarding and just add some, add some padding to the container.

[00:05:52]
Let's do maybe a padding horizontal, I don't know, I guess we don't need that much. Maybe eight. Yeah, I think that's better, so it's not stuck to the screen. See, this is already showing me, I should have looked this up on my Android phone. All right, so let me in, beautiful.

[00:06:13]
Again, so this opens the normal keyboard and this opens The text keyboard, which is great. And something I wanted to show you about the submit button.
>> Kadi Kraman: If we open the screen, so something that I added here in the scroll view, is this keyboard should persist taps. So let me show you what happens if I don't add it.

[00:06:46]
So now I'm focusing on the name input, and then if I now press on add plant, the keyboard hides. And then I have to actually press it again for this form to actually submit, right? So what this keyboard strategy, persist steps does that if we focus on here and then we tap on Add, plant.

[00:07:10]
Notice that it didn't hide the keyboard, I don't need to press it twice. It automatically supports [INAUDIBLE]. And the other thing I've noticed is that That my button doesn't have text center aligned. So [INAUDIBLE] our button and for the text, let's just do a text align center.
>> Kadi Kraman: Lovely,
>> Kadi Kraman: All right, and then this is kind of an FYI, so in our form, I think the inputs are going to be visible.

[00:07:55]
Let me just look at my iPhone, because I feel like it was slightly overshadowed there. So on iOS, I do have some, I'd like to be able to do this, gets rendered underneath the input. And to make sure that your input is always visible, you can use a keyboard, avoiding view.

[00:08:18]
So there's a couple of different ways that you can. Do keyboard avoiding view, so a couple different libraries, there is a built in keyboard avoiding view as well. Just in the projects that I've built, I've usually ended up using this keyboard aware scroll view. I'm not saying it is the best thing to use, but it is what I've usually end up using.

[00:08:39]
So let's install it here,
>> Kadi Kraman: So, I started with Bundler in a different tab.
>> Kadi Kraman: Okay, so let's do here we go. EMP Expo install our keyboard avoiding view. And then we start expose start the bundler again.
>> Kadi Kraman: And reload the app.
>> Kadi Kraman: So, now in our new screen, instead of a scroll view, we could render a keyboard avoiding scroll view.

[00:09:36]
Keyboard avoiding scroll view. [INAUDIBLE]
>> Kadi Kraman: Should install the package.
>> Kadi Kraman: Where it is here. Okay, so it's keyboard or waistcoat view.
>> Kadi Kraman: Okay, keyboard aware scroll view, there we go. So this hopefully automatically enforce it, lovely. And click change the closing tag as well.
>> Kadi Kraman: Okay, so now when I go to watching your frequency, you can see that it slides this input slightly up.

[00:10:25]
So we'll have the same effect on a real device.