1
00:00:02,360 --> 00:00:04,830
So for does error message in the input component.

2
00:00:04,880 --> 00:00:08,680
We're getting the text from outside, but I want to control the style from inside.

3
00:00:09,200 --> 00:00:16,730
So here in the end, I will wrap this text here in a view component simply to have more styling options,

4
00:00:16,730 --> 00:00:26,120
you could say, and assign the style here of air or container maybe, and on the text itself, all assign

5
00:00:26,120 --> 00:00:28,490
a style of air or text.

6
00:00:28,820 --> 00:00:31,410
But these identifiers, as always, are totally up to you.

7
00:00:31,790 --> 00:00:36,260
I also don't always want to show this if it's invalid, but instead I want to show it if it's invalid

8
00:00:36,260 --> 00:00:36,800
and.

9
00:00:37,940 --> 00:00:39,780
This input has been touched.

10
00:00:39,800 --> 00:00:44,870
That's why I'm managing this touched state so that the user at least has a chance of entering something

11
00:00:44,870 --> 00:00:46,040
before I yell at him.

12
00:00:46,760 --> 00:00:49,490
So now our container and our text can be added.

13
00:00:49,850 --> 00:00:53,390
And of course, you are totally free to stall this in whatever way you want.

14
00:00:53,660 --> 00:01:00,170
I'll give the container a margin vertical of, let's say, five, and then for the air or text here

15
00:01:00,710 --> 00:01:01,880
again, up to you.

16
00:01:02,390 --> 00:01:11,900
I will assign a font family of open sans here, a color of red maybe, and a font size.

17
00:01:13,590 --> 00:01:14,280
Of.

18
00:01:16,210 --> 00:01:19,210
Fourteen to have it a little bit smaller or 13.

19
00:01:20,680 --> 00:01:25,210
And that was that what you'll see if this reloads and let's test this on Android as well, of course,

20
00:01:25,210 --> 00:01:26,260
not just on iOS.

21
00:01:26,260 --> 00:01:29,080
So if we wait for this to load on Android.

22
00:01:32,150 --> 00:01:33,890
There we go to Admon.

23
00:01:35,620 --> 00:01:40,900
And unfortunately, the Android emulator is a bit slower, which is why this takes a bit longer and

24
00:01:40,900 --> 00:01:41,260
we.

25
00:01:42,890 --> 00:01:48,830
Add a new product here now, first of all, to try to submit it like this, I get an error as it should

26
00:01:48,830 --> 00:01:49,400
be the case.

27
00:01:50,000 --> 00:01:51,560
And if I start entering here.

28
00:01:52,520 --> 00:01:59,660
I can do that, however, please note that after a touch to image and input, if it's invalid, I get

29
00:01:59,660 --> 00:02:00,170
an error.

30
00:02:00,870 --> 00:02:02,570
That's exactly how it should be the case.

31
00:02:02,570 --> 00:02:04,880
So I can enter all of this.

32
00:02:06,250 --> 00:02:11,320
Now we have another issue, my keyboard is overlapping the description and puts it we'll have to fix

33
00:02:11,320 --> 00:02:13,270
this, first of all.

34
00:02:14,600 --> 00:02:18,800
Let me enter something valid into all the other inputs, even if it's an invalid, immaterial, we're

35
00:02:18,800 --> 00:02:22,990
not checking whether it's a valid you are here just whether it's some text at all.

36
00:02:23,360 --> 00:02:26,510
So I don't care about the exact you are validation here.

37
00:02:26,510 --> 00:02:31,340
Of course, you could add a regular expression check for this, but now I'll just enter some valid input

38
00:02:31,340 --> 00:02:35,480
into all these fields and to crofter if I had Savir.

39
00:02:36,890 --> 00:02:37,760
This has saved.

40
00:02:39,960 --> 00:02:43,260
And also can be found here at the bottom.

41
00:02:44,610 --> 00:02:48,450
And it did create two year one behind the scenes, but this is where it is coming from.

42
00:02:50,450 --> 00:02:55,120
Let's now make sure that we can also reach all inputs and for this back and he added products green,

43
00:02:55,130 --> 00:02:57,710
I'll use a component which you already saw earlier in the course.

44
00:02:58,010 --> 00:03:03,350
I'll remove these two imports, which we don't need anymore, and instead at the keyboard avoiding view

45
00:03:03,350 --> 00:03:09,710
to make sure we can always reach all our inputs and now does keyboard avoiding view here can be used

46
00:03:09,710 --> 00:03:11,030
in the added products green.

47
00:03:12,170 --> 00:03:16,180
You can be wrapped around our scroll view like this.

48
00:03:25,020 --> 00:03:26,940
Around the entire Skrull view.

49
00:03:30,000 --> 00:03:34,800
And there you might not want to play around with how you configure disregarding the behavior, you can

50
00:03:34,800 --> 00:03:38,550
all use the platform API to use a different behavior for different platforms.

51
00:03:39,030 --> 00:03:47,640
All will try padding here and add a keyboard vertical offset of, let's say, one hundredths to add

52
00:03:47,730 --> 00:03:53,930
a lot of padding so that we really move up all the inputs quite a bit because they're rather large with

53
00:03:53,940 --> 00:03:54,510
a label.

54
00:03:54,510 --> 00:03:57,750
We have the input itself, which isn't super small.

55
00:03:57,760 --> 00:03:59,780
So I definitely want to move it up quite a bit.

56
00:04:00,210 --> 00:04:05,940
And in addition and that's important, you need to add a style here and I'll quickly add a inline style

57
00:04:05,940 --> 00:04:06,350
here.

58
00:04:06,360 --> 00:04:10,920
Of course, you could also use to stylesheet and add flex one here and that's superimportant.

59
00:04:10,920 --> 00:04:15,630
You need to add this to the keyboard avoiding view, which you wrap around your scroll view to have

60
00:04:15,630 --> 00:04:20,400
an effect because it basically needs to reserved for itself the entire screen size.

61
00:04:20,690 --> 00:04:25,470
There is a scroll view in there and that will still be able to scroll, but you also need that.

62
00:04:26,550 --> 00:04:27,360
Now with that.

63
00:04:28,200 --> 00:04:33,480
Let's give this a try on Android, but since this takes a bit to load, I'll also quickly have a look

64
00:04:33,480 --> 00:04:34,260
at iOS.

65
00:04:34,680 --> 00:04:36,530
And there you see, you still can scroll.

66
00:04:36,780 --> 00:04:41,250
Unfortunately, your keyboard isn't even close to our description, by the way.

67
00:04:41,250 --> 00:04:43,670
We can add multiple lines there as well, as you see.

68
00:04:44,130 --> 00:04:46,500
But now let's have a look at our.

69
00:04:48,890 --> 00:04:49,970
Android app here.

70
00:04:52,840 --> 00:04:54,390
Go to the admin section there.

71
00:04:58,020 --> 00:05:02,940
And in there, if I go to my description here, you see this is now moved up.

72
00:05:02,940 --> 00:05:04,470
If I'm in the image you are El.

73
00:05:06,190 --> 00:05:09,130
Typing some stuff there and I click into description.

74
00:05:10,490 --> 00:05:17,030
This is reachable now, so now with that, we make sure that we can always reach all the inputs, which

75
00:05:17,030 --> 00:05:21,470
of course is important in an application, you want to make sure that you can reach all your inputs.

76
00:05:21,830 --> 00:05:26,540
We're validating the data, we're saving the data, and we're doing this in a highly reusable way.