1
00:00:02,110 --> 00:00:07,000
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

2
00:00:07,030 --> 00:00:12,190
input component which of course has nothing to do with native device features but we simply also need

3
00:00:12,190 --> 00:00:19,330
that because in there, we can now add such a text input that allows the user to enter the title and therefore,

4
00:00:19,330 --> 00:00:24,350
I'll also add a text component here where I say title, that should act as a label for this text input

5
00:00:24,370 --> 00:00:25,360
here

6
00:00:25,360 --> 00:00:32,450
and overall, I also want a scroll view in here to wrap all my content because I don't know which device

7
00:00:32,520 --> 00:00:37,540
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

8
00:00:37,540 --> 00:00:43,120
picker throughout this module and therefore being able to scroll this page is really important.

9
00:00:43,180 --> 00:00:48,820
So now we have that title label and the text input that belongs to it which for now will not

10
00:00:48,820 --> 00:00:52,450
do anything but which will soon allow the user to enter a title.

11
00:00:52,540 --> 00:00:55,840
I also want to make sure that of course this form can be submitted,

12
00:00:56,170 --> 00:01:02,500
so what I also want to do is I want to add a button component here and after the text input here, I'll

13
00:01:02,500 --> 00:01:10,450
have my button where I say save place for example, add a color here and set this to Colors.primary

14
00:01:10,540 --> 00:01:15,730
and for that, you need to make sure you're importing the colors constant here and onPress will later

15
00:01:15,820 --> 00:01:19,750
submit this form, for the moment I'm not doing anything here.

16
00:01:19,750 --> 00:01:25,030
The text input of course also can be configured, though most basic configuration is fine here, I don't

17
00:01:25,030 --> 00:01:29,920
need to change the keyboard type and so on but some styling would be nice and that's actually true for

18
00:01:29,920 --> 00:01:31,360
the entire page.

19
00:01:31,360 --> 00:01:37,330
So for this view here for example, I want to add a style of form here, so a style identifier of form

20
00:01:37,330 --> 00:01:41,140
so that I can style the overall form. For the title here,

21
00:01:41,140 --> 00:01:50,980
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

22
00:01:51,100 --> 00:01:55,210
text input here. With that

23
00:01:55,210 --> 00:02:00,180
let's go down to the stylesheet and make sure we do add some styling here. For the overall form,

24
00:02:00,220 --> 00:02:05,350
I'll add a margin in all directions of 30 so that it doesn't sit directly on the edges of the screen.

25
00:02:06,160 --> 00:02:07,480
For the label,

26
00:02:07,780 --> 00:02:15,640
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

27
00:02:15,640 --> 00:02:20,530
some spacing between the label and the text input and on the text input itself,

28
00:02:20,860 --> 00:02:27,670
well in order to be able to see it, I'll add a border bottom and set its color to this light gray here

29
00:02:27,670 --> 00:02:36,460
with this hex code of #ccc and a border bottom width here of 1 and then also have a margin to its bottom,

30
00:02:36,490 --> 00:02:43,060
so to the content below it, the button right now of 15 and what I'll also add here is a little bit of

31
00:02:43,060 --> 00:02:48,300
a vertical padding, just four and a little bit of horizontal padding,

32
00:02:48,670 --> 00:02:52,100
just two. If I save that, let's have a look.

33
00:02:52,150 --> 00:02:57,310
If I go to the new places screen, this is what I have and this doesn't look too shabby,

34
00:02:57,400 --> 00:03:03,360
also on Android, this is something we can work with I guess and this is something we can build up on.

35
00:03:03,460 --> 00:03:05,970
Now of course, this input isn't doing anything,

36
00:03:05,980 --> 00:03:13,390
I of course want to capture what the user entered and to keep this simple, here I'll not add super complex

37
00:03:13,390 --> 00:03:15,770
validation or anything like that,

38
00:03:15,790 --> 00:03:22,030
instead I'll just capture the value and that's it. You can of course add validation, you can add a reducer

39
00:03:22,330 --> 00:03:23,360
as we did it in

40
00:03:23,370 --> 00:03:28,680
the user input module where you learned how you can manage more complex forms in all ways,

41
00:03:28,690 --> 00:03:36,490
here again I will keep this very simple and therefore, I will just import the use state hook from

42
00:03:36,490 --> 00:03:40,660
React here so that I can just capture my values here.

43
00:03:40,660 --> 00:03:49,360
So here, I will have my title value and set title value function and use use state to initialize this

44
00:03:49,350 --> 00:03:53,140
to an empty string and I'll then add a function here,

45
00:03:53,230 --> 00:03:59,800
the title change handler, which receives the text the user entered and where l'll then just set my title

46
00:03:59,800 --> 00:04:08,750
value to that text and here of course, you could add validation but again to keep this simple, I'll not

47
00:04:08,750 --> 00:04:09,470
do it.

48
00:04:09,470 --> 00:04:15,380
It's the title change handler that should now be bound to the on change text prop here, on the text

49
00:04:15,380 --> 00:04:16,040
input,

50
00:04:16,040 --> 00:04:22,190
so there I'll point at title change handler and I'll bind the value of that input of course to my title

51
00:04:22,190 --> 00:04:25,070
value because that's where I store the user input and

52
00:04:25,190 --> 00:04:33,050
with that we have a fully functional user input here where I also capture the values. Now with that, we're

53
00:04:33,050 --> 00:04:35,530
able to get the title,

54
00:04:35,570 --> 00:04:37,640
we also have save place.

55
00:04:37,640 --> 00:04:40,110
Whenever we press this button,

56
00:04:40,190 --> 00:04:46,370
I want to save it so I'll have my save place handler which is a function I want to bind to this save

57
00:04:46,370 --> 00:04:47,680
place button,

58
00:04:47,720 --> 00:04:54,050
so here instead of having this empty anonymous function, I'll point at save place handler on this save place

59
00:04:54,050 --> 00:04:58,920
button and in there, I now want to make sure this place does get saved

60
00:04:59,030 --> 00:05:01,540
and for this, I'll again use Redux.

61
00:05:01,910 --> 00:05:10,880
So I'll install Redux with npm install --save redux and also React Redux and I'll also install

62
00:05:10,880 --> 00:05:13,660
Redux Thunk so that we can use that too.

63
00:05:13,670 --> 00:05:19,170
For now I don't need it because I'm not talking to a server but later once we add native device features,

64
00:05:19,170 --> 00:05:24,230
you will see that there we also got some features that are asynchronous and where we might want to

65
00:05:24,230 --> 00:05:29,750
wait for their completion before we actually dispatch an action which is exactly where Redux Thunk can help

66
00:05:29,750 --> 00:05:34,470
us. So therefore with these three packages installed, we can now set up Redux.