1 00:00:02,410 --> 00:00:07,890 So back in code, we started with throwing in some views here and of course right now, this won't work, 2 00:00:07,900 --> 00:00:13,930 this will just break or it will not render anything meaningful to the screen. In that first nested view 3 00:00:13,930 --> 00:00:14,920 here, in this block, 4 00:00:14,920 --> 00:00:21,330 I went to have a text input and a button. Conveniently, both is provided by React Native, 5 00:00:21,330 --> 00:00:27,390 we have a text input here and we also have a button component. So we can import both text input which 6 00:00:27,390 --> 00:00:33,510 allows the user to enter text and button and then here in that view, in that first nested view, I'll add 7 00:00:33,510 --> 00:00:40,890 a text input as a self closing tag because there is nothing we could pass between opening and closing 8 00:00:40,890 --> 00:00:42,440 tags and for the button, 9 00:00:42,450 --> 00:00:47,430 you could think that you use a button like this but actually, that's not how this React Native button 10 00:00:47,430 --> 00:00:47,960 works, 11 00:00:47,970 --> 00:00:53,620 instead it's a self closing button and you set a title property to define which text to render there 12 00:00:53,840 --> 00:01:00,150 and here, we could say add. Now we have a text input and a button there 13 00:01:00,360 --> 00:01:08,230 and if we save this and this reloads, we see the button here but we don't see the text input, right? 14 00:01:08,490 --> 00:01:11,070 So that's not working as intended. 15 00:01:11,070 --> 00:01:16,850 The reason for that is actually that the text input will be hidden here below the status bar. 16 00:01:16,920 --> 00:01:22,740 So now is the time where we should get started with adding some layout, some structure to this page because 17 00:01:22,770 --> 00:01:25,410 just adding components alone won't do the trick, 18 00:01:25,410 --> 00:01:30,990 a React Native app is all about using components and then adding the right layout, the right structure 19 00:01:31,080 --> 00:01:40,190 to your components. So here for example, it would make sense to add some general padding around that view, 20 00:01:40,190 --> 00:01:46,310 so on this top view, so padding basically is some distance from the border of that view which is basically 21 00:01:46,760 --> 00:01:48,870 the device frame in our case here 22 00:01:48,920 --> 00:01:54,890 since I'm talking about the topmost view to the content of the view, so some spacing between the borders 23 00:01:54,980 --> 00:02:00,650 of the topmost, of that surrounding view and the content in the view and for that, we can add the style 24 00:02:00,650 --> 00:02:02,660 property here on the view. 25 00:02:02,660 --> 00:02:09,530 Most components in React Native support the style property, the view does and there, you use this dynamic 26 00:02:10,070 --> 00:02:15,800 content binding here which you know from normal React too with the single curly braces and style expects 27 00:02:15,800 --> 00:02:21,590 a Javascript object now. So we add another pair of curly braces here and now a common mistake is that you 28 00:02:21,590 --> 00:02:25,530 think this is a special syntax which requires double curly braces, 29 00:02:25,670 --> 00:02:31,390 indeed it's the normal React syntax with similarly curly braces where then the dynamic value you're 30 00:02:31,400 --> 00:02:34,640 passing to style just happens to be a Javascript object 31 00:02:34,640 --> 00:02:40,310 hence we have another pair of curly braces. And in this object, you can now have key-value pairs where 32 00:02:40,310 --> 00:02:46,610 the keys are your style property names and the values are the values for these style properties 33 00:02:47,420 --> 00:02:51,740 and these style property names are influenced by CSS. 34 00:02:51,770 --> 00:02:58,250 So here, what you can do is you can add padding, that exists in React Native as well and a comprehensive 35 00:02:58,250 --> 00:03:04,130 list of supported style properties can always be found by going to the component you're using, like the 36 00:03:04,130 --> 00:03:10,850 view here and then by clicking on the style property and here if you click on view styles, you'll see 37 00:03:10,850 --> 00:03:17,750 a list of all provided properties which you can use and you'll see some special properties for the view 38 00:03:17,750 --> 00:03:24,410 here and then some general props like layout props and there, you would find the padding for example. 39 00:03:24,480 --> 00:03:30,640 So that's how you can find out what's supported but you'll also see many examples throughout this course. 40 00:03:30,650 --> 00:03:36,080 So here, I add padding and the value now can just be a number which will be device independent pixels, 41 00:03:36,290 --> 00:03:41,300 so a pixel value which always looks good no matter which device size you have. 42 00:03:41,330 --> 00:03:46,990 So here, we could add 10 and if we do that, now we see the button is a bit further down, 43 00:03:47,050 --> 00:03:51,860 maybe let's add 30 here so that we can see a bigger difference 44 00:03:52,090 --> 00:03:56,050 and now that's working and now if you tap above the button, you don't really see an input here 45 00:03:56,050 --> 00:04:01,230 but you see that my soft keyboard opened up on Android, on iOS it doesn't open by default 46 00:04:01,240 --> 00:04:03,790 but there also you can tap here 47 00:04:03,970 --> 00:04:11,410 and if you were to tap often enough or if you go to hardware, that keyboard toggle software keyboard, it 48 00:04:11,410 --> 00:04:13,780 should open up there as well, 49 00:04:13,780 --> 00:04:15,180 so here we also have an input. 50 00:04:15,190 --> 00:04:19,840 So now we can see that input because now it's not behind that status bar anymore. 51 00:04:19,840 --> 00:04:27,040 So adding that padding probably made sense because now, we made sure that our layout is inside of our 52 00:04:27,040 --> 00:04:28,660 screen here. 53 00:04:28,660 --> 00:04:31,980 Now there are other tools for making sure we have enough padding here as well 54 00:04:32,170 --> 00:04:36,460 but for now, let's manually set the padding and let's maybe set it to a value of 30. 55 00:04:36,880 --> 00:04:39,760 So we were getting started with the layout, 56 00:04:39,760 --> 00:04:43,650 now let's go back to this component and let's make sure we can see something, 57 00:04:43,660 --> 00:04:48,120 we can see that there is a text input and we don't just have to guess it. 58 00:04:48,550 --> 00:04:54,070 For this, we can go to the text input and there for example add the placeholder prop and just as before 59 00:04:54,070 --> 00:04:55,800 to find out what you can set, 60 00:04:55,810 --> 00:05:02,990 you can always go to the official docs, in this case to the text input docs and there, you find a description 61 00:05:03,000 --> 00:05:04,930 how to use it and some examples 62 00:05:05,070 --> 00:05:10,770 but if you scroll down, you'll also find all the props you can set and there for example, you find out 63 00:05:11,130 --> 00:05:16,410 that you can set a placeholder prop, which is that dummy text that is shown before the user entered 64 00:05:16,410 --> 00:05:17,640 some text. 65 00:05:17,640 --> 00:05:23,580 So here, that takes a string and here we could enter course goal because you should be able to set your 66 00:05:23,580 --> 00:05:24,940 course goal here 67 00:05:25,040 --> 00:05:28,970 and if you do that, you see both on Android and on iOS 68 00:05:28,980 --> 00:05:31,510 there is this course goal text. 69 00:05:31,510 --> 00:05:33,590 Now still, it could be a bit better, 70 00:05:33,600 --> 00:05:39,180 could be a bit clearer that there is a text input and therefore here, I'll add a style, another inline 71 00:05:39,210 --> 00:05:40,170 style 72 00:05:40,170 --> 00:05:48,170 and here I'll set up border bottom color of black, black now is a string, such color shortcuts are supported 73 00:05:48,180 --> 00:05:53,940 in React Native and a comprehensive list of all available colors is attached to this lecture here 74 00:05:54,870 --> 00:06:01,860 and I can also see that a border bottom width of let's say 1 and what this does is it should set a bottom 75 00:06:01,860 --> 00:06:07,770 border on this input so that now if we go back, we have that underlining here, we can clearly see it 76 00:06:07,770 --> 00:06:13,710 on iOS and since there still is not that much space on iOS, let me actually ramp up this padding up 77 00:06:13,710 --> 00:06:17,520 here to 50 maybe, yes that looks better. 78 00:06:17,540 --> 00:06:22,630 So now we have that border below our input and that makes it clear that there is an input here. 79 00:06:22,810 --> 00:06:26,380 Of course you're not restricted to only setting a border on the bottom, 80 00:06:26,380 --> 00:06:28,640 you could also just set a general border 81 00:06:28,660 --> 00:06:32,140 by leaving out bottom here, a border color and a border width 82 00:06:32,530 --> 00:06:36,180 and if you did that, then this would be surrounded by a border. 83 00:06:36,190 --> 00:06:42,250 Now one important note regarding these style names here, style property names, you of course see 84 00:06:42,250 --> 00:06:49,390 that it's border width, border color written like this, in normal CSS, you would have had border-color 85 00:06:49,750 --> 00:06:55,870 and that would apply the border color but that would be an invalid property name in Javascript which 86 00:06:55,870 --> 00:06:57,670 is why this is not supported. 87 00:06:57,670 --> 00:07:03,280 Now actually, a valid property name in Javascript would be if you wrap this in quotes though 88 00:07:03,520 --> 00:07:10,240 but even that is not supported in React Native, so these alternative syntaxes, for example this syntax 89 00:07:10,240 --> 00:07:18,010 would work in Javascript if you apply some style to web HTML element, these syntaxes are not supported 90 00:07:18,010 --> 00:07:23,320 in React Native though, there you really have to use this camel case syntax where you for example 91 00:07:23,320 --> 00:07:29,740 write border color like this or in short, you have to use the property names you also find in the official 92 00:07:29,740 --> 00:07:37,030 docs, there are no alternative names for these style properties and we could now also add a padding here 93 00:07:37,600 --> 00:07:43,570 of let's say 10 so that we have some spacing between the border and the actual part where we enter something 94 00:07:43,720 --> 00:07:49,540 and I'd say this already looks way better and we can clearly see that we here have an input where users 95 00:07:49,540 --> 00:07:50,530 can enter something.