1
00:00:00,840 --> 00:00:05,260
Now that we've got our tech screen put together let's try to show a text input inside of it.

2
00:00:05,260 --> 00:00:07,340
Remember that's the entire goal of this application.

3
00:00:07,350 --> 00:00:10,460
We want to show a text input towards the top all right.

4
00:00:10,470 --> 00:00:15,420
So to show a text input inside of a real component we're going to first find our import statement right

5
00:00:15,420 --> 00:00:16,860
here from React Native.

6
00:00:16,950 --> 00:00:22,410
And in addition to the primitive components of view and text we're also going to pull in another primitive

7
00:00:22,410 --> 00:00:25,320
element called text input.

8
00:00:25,320 --> 00:00:29,640
So as you might guess this is going to show a text input to our user that they can type some text into

9
00:00:30,600 --> 00:00:31,880
inside of my text screen.

10
00:00:31,890 --> 00:00:37,960
I'm going to remove the existing text element right there and I'll replace it with text input.

11
00:00:38,070 --> 00:00:39,900
So all right.

12
00:00:39,920 --> 00:00:43,350
So you might think it's just that easy to show a text input.

13
00:00:43,370 --> 00:00:48,170
Well it kind of is and it kind of his and let's save this and test out our application and just see

14
00:00:48,170 --> 00:00:49,420
what happens.

15
00:00:49,500 --> 00:00:50,750
Let's all save this.

16
00:00:50,750 --> 00:00:55,070
I'll go to my text demo screen and sure enough I see absolutely nothing at all.

17
00:00:55,070 --> 00:00:57,050
So yeah you might think it's just that easy.

18
00:00:57,080 --> 00:00:58,570
Well maybe it's not.

19
00:00:58,700 --> 00:01:04,820
So it turns out that when we show a text input element by default it actually is on the screen.

20
00:01:04,820 --> 00:01:07,870
It just doesn't quite show up in a way you would expect.

21
00:01:07,910 --> 00:01:12,350
So on my android device over here I'm going to kind of tap right underneath the header and as soon as

22
00:01:12,350 --> 00:01:16,890
I do you'll see the keyboard appear and I get a cursor there and I can start typing in.

23
00:01:17,210 --> 00:01:23,640
Also on ISIS I can tap right underneath that header Oh I accidentally hit the header button and we tried

24
00:01:23,650 --> 00:01:24,030
again.

25
00:01:24,040 --> 00:01:24,770
There we go.

26
00:01:24,800 --> 00:01:30,550
And I can see my cursor there and I can type and sure enough it appears that the text input actually

27
00:01:30,580 --> 00:01:31,750
is there.

28
00:01:31,750 --> 00:01:38,080
So here's the thing about using the text input primitive by default it has zero styling applied to it

29
00:01:38,320 --> 00:01:40,920
with the exception of some height that is assigned to it.

30
00:01:41,410 --> 00:01:45,580
So by default it has some amount of height but other than that there's absolutely nothing that's going

31
00:01:45,580 --> 00:01:49,080
to actually indicate to you that it's visible on the screen.

32
00:01:49,120 --> 00:01:54,280
So whenever we make use of a text input we are always going to end up adding in some styling to it.

33
00:01:54,310 --> 00:01:56,540
So let's do that right away.

34
00:01:56,610 --> 00:01:58,950
I'm going to find my styles object right here.

35
00:01:59,070 --> 00:02:03,320
I can expand that object and I'll add in a new styling property.

36
00:02:03,360 --> 00:02:03,780
I'll call it.

37
00:02:03,780 --> 00:02:05,430
How about input.

38
00:02:05,640 --> 00:02:08,390
Remember the names of the properties we had inside of here.

39
00:02:08,430 --> 00:02:09,930
We can makeup at will.

40
00:02:09,930 --> 00:02:13,640
It just has to be something that makes sense to you and other developers.

41
00:02:13,740 --> 00:02:17,430
So we're going to use this object right here to apply some styling to our text input.

42
00:02:18,090 --> 00:02:26,520
I think we should probably add in some margin I'll do a margin of 15 also add in a border color of black

43
00:02:27,390 --> 00:02:32,730
and a border width of one like so we haven't really spoken a lot about some of the different styling

44
00:02:32,730 --> 00:02:34,980
properties that are available to us just yet.

45
00:02:35,040 --> 00:02:39,930
We're going to go over styling in great detail as soon as we finish up with all the state stuff pretty

46
00:02:39,930 --> 00:02:40,700
darn soon.

47
00:02:40,700 --> 00:02:44,490
And at that point time you're going to learn about all the different styling properties we have access

48
00:02:44,490 --> 00:02:45,300
to.

49
00:02:45,420 --> 00:02:48,880
Anyways let's Now apply this style to our text input.

50
00:02:48,930 --> 00:02:49,940
So back to my text input.

51
00:02:49,950 --> 00:02:54,920
I'll say style is styles that input it.

52
00:02:54,930 --> 00:02:58,380
Let's save and now once we go back to our text demo.

53
00:02:58,510 --> 00:02:58,730
Yeah.

54
00:02:58,740 --> 00:02:59,360
There we go.

55
00:02:59,360 --> 00:03:03,040
And that's a lot more visible than it was before.

56
00:03:03,120 --> 00:03:03,690
All right.

57
00:03:03,720 --> 00:03:05,040
So showing a text input.

58
00:03:05,070 --> 00:03:07,050
Well yeah it actually is kind of easy.

59
00:03:07,050 --> 00:03:11,580
The problem is that we always have to apply some default styling because otherwise we see nothing appear

60
00:03:11,580 --> 00:03:14,490
on the screen even though it technically is there.

61
00:03:14,530 --> 00:03:15,900
Let's take another quick pause right here.

62
00:03:15,910 --> 00:03:18,100
There's one other quick thing that you need to know around.

63
00:03:18,100 --> 00:03:22,870
Text inputs that you're going to need to apply to them almost all the time just as this style that we

64
00:03:22,870 --> 00:03:24,310
just applied so quick pause.

65
00:03:24,340 --> 00:03:27,880
And we'll talk about that other properties or those two other properties in the next video.