In this lesson, we're going to walk through how we can build the initial form and integrate our boilerplate code so that we can store our name and our content and we can wire those up to form elements.

Now, whenever I'm building out a feature like this, the very first that I start with is creating the state elements that I'm going to need because that's going to give me the ability to store values and then also to set those values, and our TextInput tag, which we've used before, we use that in the auth screen component, needs to have both of those functionalities within its grasp.

So let's start by adding in the useState hook so I'm going to say import React, and then useState so that we can have those hooks there and then I'm going to get rid of this text component.

[Capture #1 [00:53]]

We no longer need that, and instead, I'm going to import the TextInput component just like we've done on our auth screen form.

Now inside of the function, so that is right below where it says export default, I'm going to define my two pieces of state using the useState hook. So I'm going to say const and then in brackets, name, setName, and I'm going to set that equal to useState with the default value of the empty string.

[Code-Block #1]

Then I'm just going to duplicate that and the next line is going to say content and then setContent and we're also going to start off with an empty string.  That's all we need to do for our local state for right now.

[Code-Block #2]

In one of the next guides, we're going to see how we can take that image value, that path to the file so that we can wrap that up in a form and send it to the API, but for right now, I just want to buildout the placeholder components.

So with all of that in place, now let's pull in our TextInput. and feel free to open up the auth screen and go right to your TextInput right here and you can just copy this because what we're going to be using here is very similar. It's one of the great things about using a componentbased architecture is we can simply paste that in and now all we have to do is swap out the value, the setter, so instead of setEmail, it's going to be setName and then right now, for style, I'm not even going to use anything at all. I'm just going to get rid of that. I don't want to have the autoCapitalize, or spellCheck elements either, and for placeholder, we'll switch that to name.

So everything there is working nicely. If you hit save here, you'll see we don't have any errors and you can have that placeholder for name.

[Capture #2 [2:44]]

We're not going to worry about styles for right now. That's not the point of this guide. So now let's take this TextInput component and we're going to duplicate this for content so the content for the placeholder, let's just say add meme explanation here or whatever you want to put there inside of your placeholder and then for value, I'm going to say content and then for the onChange text handler, that's going to be setContent. Hit save, and you can see that that's been added.

Now it's kinda hard to tell where one of them starts and the other end because we don't have any kind of borders or padding or margin or anything like that, but that's fine We'll add that later.

Now the one thing that is a little bit tricky here is for our name, it's perfectly fine for that to be on one line. We don't want a really long name. We don't want someone putting a paragraph there for the name. We want that to just be a few words, or a very short sentence, for the explanation that could be very long.

That could be a paragraph, a few paragraphs and we want to make sure that we allow for that so how can we do that? Well, thankfully the TextInput has the ability to allow for multiline strings. So what you can do here I'm going to add a quick and dirty style just for this TextInput for content just so you can see the way that you can make these multiline components work.

So I'm going to add a style here.  Set it equal to, let's go with a border width of two and border color of black just so you can see where all of this is going to be. So I'm going to hit save, and you can see we have a border around our content component.

[Code-Block #3]

Now what I can do is I can say multiline and I just have to say multiline. This is the same thing as saying multiline true, but whenever it's a bullion value for a prop, you can simply pass the word and the way React Native understands it is that means we're saying multiline is true.

So I'm going to hit save here and you can see not much changed.

[Capture #3 [5:10]]

It added a slight bit of height, but watch what happens here when we actually go and start typing. So I can just start typing anything and now this has the ability to grow based on how we're typing. So this is really helpful.

This gives us the ability to give our users any type of content length they want for this. Now, if I go up to the name value and I start typing and then hit return, you can see nothing is happening here and that's because we did not add multiline true into our name. We only added that to the content. So that's working really nice. That's the behavior we want for both of those components. We'll add our own styles in a little bit, so it looks nice, but for right now, this is exactly the behavior we're looking for.

Now the last thing that I'm going to do here is let's just add our button right below our image picker. So I'm going to come down below this view and let's just import button and make sure you're picking a button from the components helpers and not the button component from React Native. and for our button, let's let TypeScript tell us what we have to pass to it.

So inside of the button here, I can hover over the red line, and it says it's missing the following properties, text, and onPress so that's really helpful. I know I need to pass in the text and for text, let's just say submit and then for onPress, for right now, let's just say we want to do a console log statement, console log and submitting. Something like that.

## Save

Hit save, and that's there, and that's working.

[Capture #4 [6:58]]

You can hit submit, and if you open up the terminal here, you'll see that it's showing that it is passing in that submit value and that handler is working.

So alright, this is coming along nicely. We have the two components we need for the text are name and our content. Our content box has the ability to be multiline. We have our image picker, and then we have our submit button. So everything that we need in terms from a data perspective we currently have here in place so I'm liking the way this is working.

In the next guide we are going to start building out the API connector so we're going to wrap up all this data including you're going to see it's a little bit tricky in order to format the data from the image so that the server can understand it so we're going to walk through how to do that with our image picker, and then we'll be able to start creating our own posts right from the system.

Resources

• Source code