Overview of Forms in React Native

[00:00:00]
>> If you use web developments, you kind of familiar with having to have a actual HTML form element, where your form lives, and there's a button that has, it's the submit button and kind of things. In React Native, things are sort of simpler and more difficult. Simpler in that, there is no restraints and having to have everything inside the form element.

[00:00:22]
But more difficult is because you have to track everything yourself with the state, when to submit it, and everything else. There are a bunch of inputs that are available for React Native, and I'm just going to go through the main ones that I use most frequently. TextInput is probably the most common, most frequently used in React Native, it is actually incredibly powerful and you can do loads of things, but it's similar to the input in the web.

[00:00:53]
So I've created this little example that should have four different forms. And, Yeah, so this is four different forms, all using the TextInput, But they do different things. So the first one we have is just the basic TextInput. So this is the one that you would use most frequently, just to input some text, so, I've got the current value displaying here.

[00:01:34]
So what we have here, I've used a style prop, I've used the value, which is the current value. I used useState for all of these, and then we have a function for onChangeText which sets the value. And finally, I've used that placeholder attribute to have a little placeholder here if nothing is displayed.

[00:01:56]
And then we have a number input. Basically for the number input, I've used the same properties, the only differences that I've used a keyboardType, which is numeric. Okay, so this is what it looks like on a device. So, for a normal input, I can just type it in here, which is pretty nice.

[00:02:21]
For a number input, notice that when I tap, sorry. For a number input, notice that when I tap on this input, it actually brings up my number keyboard. This is what you can set using the keyboardType. If you actually look at React Native TextInput, If I do keyboardType, keyboardType, yeah.

[00:02:53]
So this shows you all the different keyboardTypes that you can have. These work across platform and there are some that only works on iOS and only on Android. Now, going back to here, if you have, for example, a password input or something sensitive that the user needs to input, usually you don't want to actually display, What the user inputs, so we can obfuscate it, and we do this using secureTextEntry=[true].

[00:03:30]
And finally, we can have a multiline input. So this, Oops. I'm gonna do this again because I forgot to show it on the screen. And finally, we can have a multiline input. And you can see that, This works with lots of lines. And these are basically the main TextInputs that you can have.

[00:04:11]
Now, moving on to a different component. The picker component is an interesting one because it looks very different depending on the platform that you're looking at. So this is the same picker code, and on the left is what I got on iOS and on a Mac, right is what I had on Android.

[00:04:30]
And that is because that is the default view for both platforms. So on iOS, you kind of have this like scroll view, which has tactical feedback. And on Android, it's like a thing that you press on, and it launches a module. Now, another component that's quite cute is the switch component, switch is essentially a toggle button.

[00:04:56]
With some styling aside, it looks really similar across platforms. So let's look at an example. So this is, I mean, it would actually look very, very similar if when I launch it on my phone. Yeah, so I just have this little button in the middle of my screen.

[00:05:16]
And the button color is very easily customizable. I think switches actually weren't the smallest components in terms of props. So you just have, whether it's disabled, the background color, there's an unchanged value, changed, and not really much else. There are loads and loads of other components out there which you can explore in your own time, but not everything is built into React Native.

[00:05:43]
So when I build applications, I tend to rely on community and third-party components quite a bit. A lot of them are actually under the React Native community organization. This is basically a community, it's a bunch of open source libraries that are in the React community, like on the React Community care.

[00:06:04]
So there's a Slack channel, and there's a bunch of components that sometimes people have built, they don't have time to maintain so they kind of hand them off to the community. So generally, these are all quite reliable things. But a lot of the time, if you need a component, you just Google for it.

[00:06:24]
For example, a date picker, there isn't really a good date picker solutions built in. So you would just do React Native date picker. Any search words, and then you have a bunch of options. So these, for example, say here are two options, That I've looked at before. And you might wonder how you would choose between them, if you did have to do a date picker.

[00:06:48]
So what I usually do is I look at the author, if it's someone that I know, especially if it's a company, I feel more relied. But if it's an individual developer, the thing to look at is how many stars it has. And also how many forks it has because there are some libraries that are incredibly popular because the author of the library is really popular.

[00:07:11]
So they'll do a tweet and then you get a thousands of stars but not actually many people are using it. So having lots of forks is a good indication that library is quite active. The other thing I look at is, obviously if it does the thing that I need.

[00:07:26]
So you look at the API, you look at there, what it looks like, and if it actually solves the thing that you're trying to solve. And the last thing that I look at is when the last commit was made. So if the last commit well, here, this hasn't been updated in two years, but maybe it doesn't have to, but that's something to be wary of.

[00:07:45]
So you kind of know that if the last commit here was two years ago, then you'll probably not get a lot of updates here so you'll have to make do with what was already there. So there are just some considerations that you might have to think of when you're choosing which third-party library to go with.