Welcome Back. In this lesson,
we are going to dive into the most essential component for our login
and registration screens, that is the input component.
The input component is an essential part
of any form, whether it's for login or registration.
It allows users to enter their information such as password, email and more.
So we're going to start off by creating
this basic input component and then we're going to add some styles to it.
So grab your code editor and let's get started.
I have my editor already opened and what
I'm planning on doing is creating a screen for our login page given here so that we
can see how we are creating our input component.
Let's create a new directory inside here and let's call it Login. Inside which we're
going to create two new files as always, login JS and then the style JS file.
And here I'm going to type in the style
sheets that we might need for the initial setup.
So let's just create the constants style
and text styles sheet and then create and then let's export default style.
And here I'm just going to create the most basics.
I'm going to import react from react.
I'm going to import Safe Area View
from React Native and I'm going to import the styles that we just created.
And let's create the login constant for our functional component that is
returning null so far and let's export default Login.
So to be able to come to this screen, we're definitely going to need routes.
So let's create a new route called Login
and let's use this route for our main navigation.
And let's create a new stack screen here
using Login and the login screen that we just created.
Let's import this.
Great, let's save it.
And then let's say that our initial route name is going to be Routes Login so
that we are able to see this in our application when our application launches.
And then what we want to do is create the component for the input field here
and then we're going to want to show it on the login screen.
So I'm just going to quickly use the Safe Area View using our global styles
so that we have the white background and it should take up the whole screen.
So we're going to need global style flex as well here.
And now I'm going to save this.
I have some error here.
Yes, this should be closed. Great.
And then we're going to create a new
component and we're going to call it the input component.
And then we're going to need two new files here as well.
Input JS and style JS.
For style.js I'm just going to copy these empty
styles from here so that we don't have to do more typing.
And here we could do the same from the login screen and we might need
to change some stuff up such as we don't need Safe Area View.
We can be returning null so far.
And here we're going to use input name instead.
And then on our login screen we're going
to place inside the scroll view
our input component that we just created. Great.
I'm just quickly going to say that our
vertical indicator shouldn't show and we need to import Props view as well.
So let's do that.
And now we're all set to get started with the development of our input component.
Great. I do want to be able to see this and I
have my simulator running and my terminal running as well with my Metro bundler.
So let's open that up.
Let's reload the application and go here.
And now we're on login screen and we don't see anything because our background is
white and our input component is returning
nothing.
We're not going to set this screen up.
All we're going to do is create the input component.
First of all, what we want to do is make sure that we have labels for our input
component and that we have somewhere to type.
So we're definitely going to need a view component for wrapping all of these items.
So let's import view from
react native inside our input component and inside here we're going to need a text
and we are going to need a text input component.
Let's use the text to display the field title so we can just
call it label and for that we're going to be using Props.
So let's import Props types and we're going to say here that input prop types
and the first thing that we're going to be accepting is a label and that is going
to be of type string and it is going to be required.
So here we're just going to say Props
label then we're going to need a text input
component and that is going to use the states
and because we need states we're going to have to use state here.
So let's save that.
And here we're going to create a new
constant for value and then set value and we're going to use state of empty.
And then what we're going to do is we're
going to say that value is equal to value and on change text,
give us the value and assign it to set value.
Actually I'm just going to call it val
so that we don't mix up our variables' names and great.
So now what we need is to make sure that we pass a label here.
So let's say that that is email
and we see it pop up here and it needs to be styled in a specific way.
So let's click into the email field here
and let's inspect it and then go to input and our styles and create a new style
called label and we're going to give it font family of inter
and font weight of 400 and font size of scale, font size twelve
and line height of scale, font size how much?
15. Okay, great.
So let's import this function so that we
don't get any errors and let's use this color for it.
I'm going to say color.
And now we have to apply this label style to our text.
So let's say style label.
And here we go.
Our email field has changed according to the given styling here.
And now what we need to do is make sure
that we set up our input component correctly.
First of all, we see that we have a margin top of 12 here.
So we're definitely going to be needing styles for our input components.
Let's create a style and let's call it input.
And then we are going to create the input
styles here and we're going to need margin top vertical scale 12.
And we need to import this as well.
And then we do need a padding bottom of twelve.
And actually let's make this into padding vertical instead.
And then we're going to need a bottom
border that is going to be of color this with 50% opacity.
And I'm actually not going to be using the hexadecimal value because I can't give
the hexadecimal value an opacity but I can do so using Rgba.
So I'm just going to say border bottom
width is one and border bottom color is Rgba and let's convert this to RGB
and it is going to be 167, 167
and 167, 0.5. That stands for opacity. Great.
Now we see this very well and the what we need to do for the sake of this page is
give the whole page margin horizontal of 24.
So let's apply that style here.
Let's do it to our scroll view.
So let's say style.
Actually we should give it to content.
So content container, style, style container.
Let's go here and then container.
And we're going to say margin horizontal is going to be horizontal scale 24.
Let's save this and great, now we see this in a better way.
And now what we're going to need is also a placeholder for our inputs.
So what we're going to have to do is go
to our input component and say that we're expecting a placeholder and it is going
to be a string and it is not going to be required if they don't want to.
Just say if placeholder placeholder is available,
then we need props, placeholder, and otherwise it's just going to be null.
And if we were to pass a placeholder
from here such as enter your email, we're going to see it here.
Great. Now that we have all of that set up,
what we need to do is control what happens when the user starts typing.
So let's say that onChangeText, we don't only want to get the value here.
What we also want to do is call props onChangeText.
And let's say here that we
need a function for this.
Okay, I haven't closed this. Okay.
And then by default it's just going to be
default props, onChangeText,
it's just going to be an empty function.
And to this function we're going to pass the value so that we're able to
get this information here and do something with it.
So we can create a use state here
and call it an email and then set email and then use state of empty.
And here we can pass an onChangeText, get the value and set email to this value.
We can even pass the type of the keyboard that should show here.
So we can say something like
keyboard type here
and then we're going to say that it is
equal to props keyboard type
if it's available,
otherwise it's going to be default.
So let's accept the keyboard type here
and we're going to say that it is
a string, but it is not required.
And we could actually set the default value here.
So keyboard type would be default
and we could just leave this statement out of here.
And here we can pass a keyboard type of email.
Okay, so it's not email, it's email address.
Great.
And now if we go here and if we toggle the software's keyboard,
we're going to see that we have an email sign available here.
Great.
So now let's check that set email is working as it should.
What we could do for that is just console
log email here and let's open our
terminal, actually the bundler, okay.
And then we can start typing here, nata@vacheishvili.com for example.
And it's working out.
We get the email and set it here.
So when we're going to be using it
for forms, we're going to be all get with this function.
And one more thing I want to do is we're
going to have to say if it is a secure entry or not.
Because as we see here, we might have a password.
So let's go to input here
and say secure text entry.
And we're going to say that we're
going to have secure text entry prop.
And by default that is going to be false.
But we could use secure text entry prop type for our
going to be a string.
Actually, no boolean.
And if we say here that secure text entry
is true, then we're going to see
this text entered as a password.
So that's it for our tutorial today.
We already have our text input component
ready and we can use it to build our login
screen, which is going to be the text styles.
So stay tuned and I'll see you in the next video.