We've now looked at state in a couple of different places and now we're going to look at state in just
one more location.
I know we've been talking about state for quite a while but it really is the most important of react
by far.
So let's talk about where we're going to build for this last example.
OK.
So where we kind of took a look at a mockup like this.
We're going to show a enter name little label right there underneath that will show a text input.
We want a user to enter some text into that input and as they do we're going to print out whatever the
user types character by character as the user types it.
So for example if I type in s I should then instantly see your name as s appear right there.
And when I add in the character T I should see t up here right away and all the way through until I
eventually finish my entire name.
Well like so.
So this might look like a really simple application and in truth it really is.
But you're going to find that there's one kind of weird thing around handling text inputs with react.
It's one thing that just takes a little bit of understanding to get used to.
But at the end of the day the code around it is not that bad.
It's just a kind of conceptual thing.
All right.
So let's get started with this application by going through our usual process.
We're going to create a new screen inside of our screens directory.
Why are that up to our app dot J.S. file and then add a button to our home screen.
So right away let's get to it inside my screen directory I'll create a new file called text screen not
J.S. but there are some boilerplate inside of your so import react from react import view text style
sheet from react native.
Well then do our text screen component.
I'll do an export default text screen at the bottom.
Let's not forget that style sheet.
You count styles is style sheet create an inside of our component let's just so show something right
now.
How about just a view with a text element inside there.
And right now I'll give it the text text screen.
Very good.
All right.
So again just the usual boilerplate.
Nothing crazy here.
So let's save this and then we'll hook this up to our laptop J.S. file and then add our button to the
home screen so I'll find out what J.S. here it is at the top.
I will import text screen from source screens text screen and then I'll wire up that up to my routing
object right here.
So I'll add on text for text screen.
We'll save that file and then finally go over to our home screen and once again down at the very bottom
after all these buttons will add in one less button I'll change the text or the title on it to go to
text demo.
And of course we'll change the navigate call as well to navigate.
Text again so we can save this will make sure all of our different files that we just changed are saved
and we can flip back over to our device.
There is my text demo button.
I'll tap it and I'm at my tech screen.
Very good.
All right.
So let's take a quick pause right here when we come back the next video will write out some code inside
of our tech screen and get a better idea of how to show a text input to a user.