A user can now navigate over to our create screen which means it needs to display a form to the user
that will allow them to add in a title of a new blog post.
In some amount of content for it as well.
Now I want to once again remind you that our blog posts do not currently have a content property but
we're going to add it in quite easily.
OK.
So to get started I'm going to open up my create screen J.S. file and inside of here we're going to
first just focus on showing a form to the user.
So we're going to have to show a text label and we're gonna have to show a text input as well.
We've already got the text imported inside of here.
It's going to add in one additional import for text input and then going to place a text input right
after the existing text element that we have.
And I'm going to copy paste both those elements down one time and I'll update the text on both these.
So the first one will be enter title and the second one can be enter content
OK.
That looks good.
Next up we probably want to make sure that we have some kind of state variable that's going to control
this text input in this one as well.
Even though we are making use of context here and we're trying to centralize all of our state in one
location we can still have local state inside of one single component to control the text that's being
entered inside there.
Remember this process of adding in some state to a text input is referred to turning that thing into
a controlled input.
So I'm going to import my use state helper from react at the top and then inside of create screen I'm
going to initialize two different pieces of state one to handle the title entry and one to handle the
content entry.
So I'll do const title and set title is you state and I'll use a default of an empty string and then
I'll do const content and set content will be you state as well with an empty string.
Now we can wire up the value prop and the unchanged text prop to both of our different text inputs and
make sure that they use the appropriate values from both the state calls.
So on the first one I'll add in a value of title remember the idea here is that we are telling the text
input what the current value is and we'll also add in on change text and whenever we receive some new
text we will use it to update our title state.
So it calls that title with that text like so now we can do the same thing with the second text input.
So on the second one I'll do my value of content and on change text will come from text and we're gonna
pass that into set content with text like so as well okay.
So that should definitely get us started.
So going to save this and I'll flip back over to my device I'll change to the screen screen I see the
two labels and remember by default a text input doesn't really show up so I can still tap inside there
very carefully I should see that cursor and I can start entering and some text in both those different
fields and I'll do a quick test on Android as well so I can tap in there yep looks good and looks good.
So even though I said that yep styling is not gonna be a focus here.
Well we probably still want to make sure that a user can easily see that text input.
So let's just add in a couple of styles really quickly down inside my style sheet.
I'll add in an input section I'm going to give this thing a increased font size just to make it easier
to enter stuff into let's do like 18 or so and we'll add in a border as well so we'll do a border width
of 1 and a border color of black just to be very specific I'm also gonna add in a quick style for our
two labels as well so enter in a new section called label.
I'll give this one a font size of 20 even a little bit larger I'll put a little bit of padding actually
about this margin right underneath it so I'll do margin bottom of about 10 units and we can apply both
these two are two labels in our two text inputs.
It's on the text input.
I'll do a style of styles dot or see me on the text element.
We're gonna use style dot label and I'll repeat that on the second text element as well.
So styles label and then on both the text inputs we can do style of styles dot input and I'll duplicate
that onto the second one as well.
So label input label input all right.
Let's save this and I'll test out once again and OK that's looking a little bit better.
I think we could probably improve this a little bit more.
Let's just add in just one last little take your on styling.
So I think maybe the margin bottom on the label is a bit too much going to decrease it just to about
five and then underneath each input I'll put in a margin bottom as well just to separate both them.
I'll put in a much larger margin bottom 15 and then on the input also put in a little bit of padding
on that border as well just to get a little bit spacing between the text and the border.
So I'll do some padding of 5 and let's just throw on some margin as well.
5 that will override or similarly margin bottom should override the overall margin right there.
Let's save this desktop one more time.
Okay.
Looks good but still that label and just want have a little bit of separation on the left hand side.
Also put in some margin left of 5.
That should be at last change.
Okay.
Looks reasonable good enough for what we are doing it's now a user can enter in some input into either
of those text inputs and then after they enter that in we want to show a button that they can actually
use to add in or create the new blog post.
So let's just very quickly make sure that we can show a button inside of here as well at the very top.
I'll find React Native.
Once again I'll enter in an additional import of button and then underneath the second text input I'll
show a button with a title of ADD blog post
and right now we'll just leave off the on press handler.
Let's say this once again final test.
Yep looks good.
And on Android yep that looks reasonable as well.
OK.
So we've got our form put together.
So let's take another pause right here.
When we come back the next video we're gonna make sure that after a user enters a title and some content
and they tap that button we will add in the new blog post and navigate the user back over to our big
list of blog posts over here.
So click pauses and take care of that in just a moment.