In the last section we kicked off our log and form component by import import on a couple of different
components from our common directory.
You'll notice here that you know condensing it down to a single line is just fantastic saves us a lot
of space here.
Now there's a couple of different directions that we can go with our blog and forum to get it working
for accepting a email and password.
But I think the best direction is going to be to focus on just getting some text inputs in here.
In each of the card sections and starting to receive an email and a password from the user you know
just give them the ability to type something in.
So that's a great place to start.
But before we do let me say something really quick handling text inputs is a little bit of a pain with
re-act native Cade's a little bit of a pain.
So to figure out how to handle text inputs Here's the methodology we're going to take.
We're first going to implement a text input inside of this log in form.
So we're going to do all the work that's required directly inside this logging form.
After that you know after we figure out how it works we're going to factor out that text input to a
separate component to a reusable component.
OK so that's that's the plan here.
We're going to first figure out how it works and then we're going to refactor it over time.
OK.
So with that disclaimer Let's get started with some text fields.
The Riak native library provides us with a primitive text field and a text field.
I mean just something that can accept text from use or called text input.
So we're going to import that right now from the re-act native library.
So here is our view.
I will also Pullan text input like so the text input.
Again it's a primitive It's a view tag or you know a component that we can place anywhere inside of
our render method.
So we want to have one text input or input for each of our hard sections three hours going to focus
on doing one of the two inputs.
So I'm going to expand out like hard section and inside of it or place a text input like so.
OK.
So here is kind of difficulty.
Number one with text inputs and let me tell you there's more than one difficulty.
Number one is that text inputs by default do not have a set height and width by default they behaved
just like the image tags we saw earlier.
They render with a height in the width of zero and they also have zero styling in general.
So if we just went refreshed our simulator right now we would not see anything pop up on the screen
so it'd just get our text input to be visible like just visible.
We're going to add on a style tag or a style Propp excuse me and we'll give it a hard coded height of
20 and a width of 100.
OK.
So this is just to get the darned thing visible.
So let's flip Bobe and our simulator now and you'll see that our card section the first one now appears
to have a little bit of height to it.
If I click all the way to the left all the way to the left if you click in the middle it won't work.
You have to click all the way to the left.
We can then start to type.
So OK.
It looks like we are able to accept some amount of text here.
So we're definitely going in the right direction.
Let's take a short break and come back and talk a little bit more about exactly how text inputs work
with re-act native