Now that we've got our tech screen put together let's try to show a text input inside of it.
Remember that's the entire goal of this application.
We want to show a text input towards the top all right.
So to show a text input inside of a real component we're going to first find our import statement right
here from React Native.
And in addition to the primitive components of view and text we're also going to pull in another primitive
element called text input.
So as you might guess this is going to show a text input to our user that they can type some text into
inside of my text screen.
I'm going to remove the existing text element right there and I'll replace it with text input.
So all right.
So you might think it's just that easy to show a text input.
Well it kind of is and it kind of his and let's save this and test out our application and just see
what happens.
Let's all save this.
I'll go to my text demo screen and sure enough I see absolutely nothing at all.
So yeah you might think it's just that easy.
Well maybe it's not.
So it turns out that when we show a text input element by default it actually is on the screen.
It just doesn't quite show up in a way you would expect.
So on my android device over here I'm going to kind of tap right underneath the header and as soon as
I do you'll see the keyboard appear and I get a cursor there and I can start typing in.
Also on ISIS I can tap right underneath that header Oh I accidentally hit the header button and we tried
again.
There we go.
And I can see my cursor there and I can type and sure enough it appears that the text input actually
is there.
So here's the thing about using the text input primitive by default it has zero styling applied to it
with the exception of some height that is assigned to it.
So by default it has some amount of height but other than that there's absolutely nothing that's going
to actually indicate to you that it's visible on the screen.
So whenever we make use of a text input we are always going to end up adding in some styling to it.
So let's do that right away.
I'm going to find my styles object right here.
I can expand that object and I'll add in a new styling property.
I'll call it.
How about input.
Remember the names of the properties we had inside of here.
We can makeup at will.
It just has to be something that makes sense to you and other developers.
So we're going to use this object right here to apply some styling to our text input.
I think we should probably add in some margin I'll do a margin of 15 also add in a border color of black
and a border width of one like so we haven't really spoken a lot about some of the different styling
properties that are available to us just yet.
We're going to go over styling in great detail as soon as we finish up with all the state stuff pretty
darn soon.
And at that point time you're going to learn about all the different styling properties we have access
to.
Anyways let's Now apply this style to our text input.
So back to my text input.
I'll say style is styles that input it.
Let's save and now once we go back to our text demo.
Yeah.
There we go.
And that's a lot more visible than it was before.
All right.
So showing a text input.
Well yeah it actually is kind of easy.
The problem is that we always have to apply some default styling because otherwise we see nothing appear
on the screen even though it technically is there.
Let's take another quick pause right here.
There's one other quick thing that you need to know around.
Text inputs that you're going to need to apply to them almost all the time just as this style that we
just applied so quick pause.
And we'll talk about that other properties or those two other properties in the next video.