So in a new place screen, I want to be able to add a place and for that, I'll first of all add the text
input component which of course has nothing to do with native device features but we simply also need
that because in there, we can now add such a text input that allows the user to enter the title and therefore,
I'll also add a text component here where I say title, that should act as a label for this text input
here
and overall, I also want a scroll view in here to wrap all my content because I don't know which device
the user is going to use but we'll add more than just a title, we'll also add an image picker and a place
picker throughout this module and therefore being able to scroll this page is really important.
So now we have that title label and the text input that belongs to it which for now will not
do anything but which will soon allow the user to enter a title.
I also want to make sure that of course this form can be submitted,
so what I also want to do is I want to add a button component here and after the text input here, I'll
have my button where I say save place for example, add a color here and set this to Colors.primary
and for that, you need to make sure you're importing the colors constant here and onPress will later
submit this form, for the moment I'm not doing anything here.
The text input of course also can be configured, though most basic configuration is fine here, I don't
need to change the keyboard type and so on but some styling would be nice and that's actually true for
the entire page.
So for this view here for example, I want to add a style of form here, so a style identifier of form
so that I can style the overall form. For the title here,
I'll add a style of label and for the text input, I also want to add my own styles and I'll use the identifier
text input here. With that
let's go down to the stylesheet and make sure we do add some styling here. For the overall form,
I'll add a margin in all directions of 30 so that it doesn't sit directly on the edges of the screen.
For the label,
I want to set a font size of let's say 18 and also add a margin to the bottom of 15 so that we have
some spacing between the label and the text input and on the text input itself,
well in order to be able to see it, I'll add a border bottom and set its color to this light gray here
with this hex code of #ccc and a border bottom width here of 1 and then also have a margin to its bottom,
so to the content below it, the button right now of 15 and what I'll also add here is a little bit of
a vertical padding, just four and a little bit of horizontal padding,
just two. If I save that, let's have a look.
If I go to the new places screen, this is what I have and this doesn't look too shabby,
also on Android, this is something we can work with I guess and this is something we can build up on.
Now of course, this input isn't doing anything,
I of course want to capture what the user entered and to keep this simple, here I'll not add super complex
validation or anything like that,
instead I'll just capture the value and that's it. You can of course add validation, you can add a reducer
as we did it in
the user input module where you learned how you can manage more complex forms in all ways,
here again I will keep this very simple and therefore, I will just import the use state hook from
React here so that I can just capture my values here.
So here, I will have my title value and set title value function and use use state to initialize this
to an empty string and I'll then add a function here,
the title change handler, which receives the text the user entered and where l'll then just set my title
value to that text and here of course, you could add validation but again to keep this simple, I'll not
do it.
It's the title change handler that should now be bound to the on change text prop here, on the text
input,
so there I'll point at title change handler and I'll bind the value of that input of course to my title
value because that's where I store the user input and
with that we have a fully functional user input here where I also capture the values. Now with that, we're
able to get the title,
we also have save place.
Whenever we press this button,
I want to save it so I'll have my save place handler which is a function I want to bind to this save
place button,
so here instead of having this empty anonymous function, I'll point at save place handler on this save place
button and in there, I now want to make sure this place does get saved
and for this, I'll again use Redux.
So I'll install Redux with npm install --save redux and also React Redux and I'll also install
Redux Thunk so that we can use that too.
For now I don't need it because I'm not talking to a server but later once we add native device features,
you will see that there we also got some features that are asynchronous and where we might want to
wait for their completion before we actually dispatch an action which is exactly where Redux Thunk can help
us. So therefore with these three packages installed, we can now set up Redux.