1 00:00:02,290 --> 00:00:08,230 Now with that input container defined and with a couple of new styles covered therefore, 2 00:00:08,270 --> 00:00:12,580 we can do something which I mentioned that it would always be a good idea, 3 00:00:12,640 --> 00:00:16,380 we can split our application into multiple components. 4 00:00:16,600 --> 00:00:17,800 This look here, 5 00:00:17,800 --> 00:00:24,100 this input container look, this card look is probably something we want to use in other parts of the application 6 00:00:24,100 --> 00:00:24,890 as well. 7 00:00:25,060 --> 00:00:28,450 We might have different items which we want to present in such a card, 8 00:00:28,450 --> 00:00:32,680 consider you're building an online shop where you have each product in such a card 9 00:00:32,680 --> 00:00:39,160 on the overview screen. Now to avoid repeating this style definition over and over again, we can outsource 10 00:00:39,160 --> 00:00:45,130 it into a separate component, a component that doesn't really have much logic in it but which controls 11 00:00:45,160 --> 00:00:46,950 the styling of its content, 12 00:00:47,080 --> 00:00:53,050 a pure presentational component therefore. Technically it still is a regular React component and hence 13 00:00:53,050 --> 00:00:58,450 I'll create a new file here in the components folder and name it card. Name is up to you but it is this 14 00:00:58,450 --> 00:00:59,400 typical card look 15 00:00:59,410 --> 00:01:01,510 so it sounds like a fitting name to me. 16 00:01:02,220 --> 00:01:11,290 Now here as always, import React from React and then also import the view from React 17 00:01:11,290 --> 00:01:20,830 Native here and then create the card component, a functional component like this which you in the end 18 00:01:21,310 --> 00:01:22,900 export as a default 19 00:01:22,900 --> 00:01:28,630 and obviously since it's all about presentation here, we'll need the stylesheet to create a style object 20 00:01:28,630 --> 00:01:31,120 because that will be the core thing of this component, 21 00:01:31,120 --> 00:01:36,200 it should be there to wrap itself around any content and just apply some general styling. 22 00:01:37,270 --> 00:01:42,600 So now, I'm going to the start game screen and I'll grab all the styles here of the input container, 23 00:01:42,700 --> 00:01:49,180 copy them from there and add them to the card instead. Here I'll add a new card property and use my styles 24 00:01:49,180 --> 00:01:49,790 in here 25 00:01:51,220 --> 00:01:54,880 and inside of the card component, 26 00:01:55,020 --> 00:01:59,670 I'll have a very simple markup so to say, very simple jsx code. 27 00:01:59,670 --> 00:02:05,900 It's just a view which I return here which should be wrapped around props children, props children is that 28 00:02:05,910 --> 00:02:11,880 special prop in React which is basically the content you pass between the opening and closing tags of 29 00:02:11,880 --> 00:02:18,570 your custom component. So it can wrap itself around any content because the only goal of this card component 30 00:02:18,570 --> 00:02:25,400 is to apply some style to the surrounding container and we do this by adding styles card here. 31 00:02:25,510 --> 00:02:32,610 Now there is just one thing, there are certain styles in here which probably should not be set from from 32 00:02:32,610 --> 00:02:33,790 inside of the card, 33 00:02:33,810 --> 00:02:41,580 not every card might have this width or max width and not every card should center its content. 34 00:02:41,580 --> 00:02:47,220 Hence I'll cut these three items from there and only have the shadow and the padding set up in 35 00:02:47,220 --> 00:02:50,890 here and I want to make this a bit more flexible. 36 00:02:50,970 --> 00:02:57,780 Besides the card styles, it would be nice if we could also assign our own styles from outside and maybe 37 00:02:57,780 --> 00:03:07,440 even override some of the card styles. We can do this by passing in a new object to the style prop and 38 00:03:07,530 --> 00:03:13,730 distributing all the properties, all the key-value pairs of our cards style here into this new object. 39 00:03:13,800 --> 00:03:20,400 This is the spread operator, a modern Javascript feature which pulls all the key-value pairs of an object 40 00:03:20,460 --> 00:03:23,910 out of that object and adds it to a new surrounding object. 41 00:03:24,150 --> 00:03:28,170 So we copy all the styles defined down there into this new object 42 00:03:28,170 --> 00:03:34,170 and I'm doing this so that I can also add another key-value pair here or another set of key-value 43 00:03:34,170 --> 00:03:41,370 pairs where I take all the styles defined in props styles, so in the style prop I passed to my own custom 44 00:03:41,370 --> 00:03:42,090 component, 45 00:03:42,090 --> 00:03:48,060 I take all the key-value pairs defined there and merge them into this object and since I do this second, 46 00:03:48,240 --> 00:03:53,760 this will override any key-value pairs set up in styles card, so that we can override any styles set 47 00:03:53,760 --> 00:03:56,700 up in there from outside when we use our component 48 00:03:56,700 --> 00:04:02,100 and when we add additional styles outside of the component, it will also merge that in and consider it 49 00:04:02,140 --> 00:04:08,160 and with that we can also assign our own styles from outside of the card component when we use the card 50 00:04:08,160 --> 00:04:12,730 component and using the card component is something that would make sense as a next step. 51 00:04:12,750 --> 00:04:20,040 So let's go to these start game screen and import card from the components folder and there from the 52 00:04:20,040 --> 00:04:28,220 card folder and replace our input container view here with card, like this, just like this, with opening 53 00:04:28,220 --> 00:04:29,920 and closing tags. 54 00:04:29,930 --> 00:04:35,420 Now again, I want to set my own styles, I want to set my own width, max width and align items, 55 00:04:35,510 --> 00:04:39,040 so I'll keep input container in the stylesheet down there 56 00:04:39,320 --> 00:04:46,030 but now get rid of all the other styles in there, all the styles which are now set up in the card 57 00:04:46,100 --> 00:04:46,650 so that we 58 00:04:46,790 --> 00:04:54,920 only keep the width and alignment here and then add this here to card on the style prop which is 59 00:04:54,980 --> 00:05:01,280 accepted or which has an effect because in the card component, it's that style prop which I merge with 60 00:05:01,280 --> 00:05:10,250 my other styles, so for that style prop, I'll point at styles input container. Now with that if we save 61 00:05:10,250 --> 00:05:12,330 that, I'm getting an error, 62 00:05:12,350 --> 00:05:17,350 object is not a function near React Native stylesheet. 63 00:05:17,420 --> 00:05:24,070 So in the card.js file as it points here, something's wrong, even gives me the line number, it's line 10, 64 00:05:24,060 --> 00:05:24,250 that's 65 00:05:24,260 --> 00:05:30,890 what this number here means and yes, my problem here is that I use stylesheet like this, 66 00:05:30,920 --> 00:05:31,640 that's wrong, 67 00:05:31,640 --> 00:05:35,760 instead we have to call Stylesheet.create to define our own styles, 68 00:05:35,780 --> 00:05:37,010 so that's the right syntax. 69 00:05:37,010 --> 00:05:42,240 So it's a syntax error, not technically a syntax error but I'm using the stylesheet object incorrectly. 70 00:05:42,410 --> 00:05:46,430 So it's an error from my side, the error message helped us with that and now we have the same look as 71 00:05:46,430 --> 00:05:52,420 before but we have that reusable card which we can now use in any place where we want to have 72 00:05:52,430 --> 00:05:55,280 exactly this look with the shadows and so on.