1 00:00:02,470 --> 00:00:05,140 Now that we worked on the text here, 2 00:00:05,140 --> 00:00:11,250 for one we can now go back to app.js and get rid of this temporary change here where we always show 3 00:00:11,250 --> 00:00:12,100 the game over screen, 4 00:00:12,100 --> 00:00:17,350 we don't want to do that anymore, instead we want to start with the normal start game screen again 5 00:00:17,350 --> 00:00:24,790 and in addition to this change, I now also want to make one extra adjustment and that's this start game 6 00:00:24,790 --> 00:00:25,720 button. 7 00:00:25,810 --> 00:00:31,000 We're using the normal button here which of course is something you can do but sometimes you also want 8 00:00:31,000 --> 00:00:35,910 to create your own button, you want to have full control over how your button looks like 9 00:00:36,130 --> 00:00:40,610 and for this, you can of course create your own button and that's exactly what we're going to do now. 10 00:00:40,950 --> 00:00:45,700 Hence in the components folder, I'll add my own button and you can name this whatever you want, you could 11 00:00:45,700 --> 00:00:46,390 name it button 12 00:00:46,390 --> 00:00:49,400 but that's kind of already the name of the built-in one 13 00:00:49,480 --> 00:00:56,740 and whilst you could of course still name yours like this, to avoid any name clashes or confusion, I'll 14 00:00:56,740 --> 00:01:04,330 name my button here main button because it will be my main, my primary button which I use for the 15 00:01:04,330 --> 00:01:05,710 big actions in this game 16 00:01:05,710 --> 00:01:07,480 like starting a new game. 17 00:01:07,720 --> 00:01:12,730 Now that's the file name in there, we'll have a regular React component of course, 18 00:01:12,730 --> 00:01:14,470 therefore we import React. 19 00:01:14,590 --> 00:01:18,160 We import a view here, we will certainly need some text, 20 00:01:18,160 --> 00:01:23,960 we'll certainly need a stylesheet from React Native like this 21 00:01:24,160 --> 00:01:29,990 and then here, we have the main button component which receives props and which in the end will return 22 00:01:29,990 --> 00:01:35,290 some jsx. We'll have our styles object with Stylesheet.create 23 00:01:35,470 --> 00:01:39,310 and as always, we'll export our main button. 24 00:01:39,310 --> 00:01:42,100 And now the question is, how do you build your own button? 25 00:01:42,110 --> 00:01:48,640 Now it might sound very complex to do that but actually, it isn't. Your own button is also just a combination 26 00:01:48,640 --> 00:01:56,890 of view and text and very important, also a touchable component, like touchable highlight or touchable 27 00:01:56,890 --> 00:02:01,300 opacity or touchable native feedback or even touchable without feedback 28 00:02:01,360 --> 00:02:06,940 if you don't want to give any visual feedback. So here I'll go with touchable opacity and we need that 29 00:02:06,940 --> 00:02:13,690 to give the user feedback regarding the fact that the button was pressed and to register an onPress event 30 00:02:14,320 --> 00:02:19,720 and other than that, we'll just build our button with a view which we styled in a certain way and 31 00:02:19,720 --> 00:02:21,370 a text in there. 32 00:02:21,370 --> 00:02:29,330 So now here in main button, we can return our touchable opacity and in there, have a view which we can 33 00:02:29,330 --> 00:02:34,120 use to then style the button and in there, maybe a text for a text a button should have. 34 00:02:34,240 --> 00:02:39,680 Now let's say our button should be usable such that we passed a text directly between the opening and 35 00:02:39,680 --> 00:02:41,600 closing tags of our component, 36 00:02:41,600 --> 00:02:46,030 hence here we can use props children as the text I want to show on the button 37 00:02:46,300 --> 00:02:55,990 and then here on this view, I'll have a style of let's say styles button, on this inner text here, we could 38 00:02:55,990 --> 00:03:04,860 have a style of styles button text and these names are up to you of course and on the touchable opacity, 39 00:03:04,930 --> 00:03:07,920 I'll add the onPress listener and we'll have to do something there. 40 00:03:09,000 --> 00:03:11,430 So now we get the skeleton for our button, 41 00:03:11,450 --> 00:03:13,700 now we can start adding some styles to it. 42 00:03:13,790 --> 00:03:18,450 Now of course you can style that button in whatever way you want, 43 00:03:18,470 --> 00:03:20,410 I got a certain style in mind here which I'll add 44 00:03:20,420 --> 00:03:24,490 but again, definitely play around with that and apply your own styles. 45 00:03:24,530 --> 00:03:30,620 So for the button itself which is the view around the text, I want to give the button a certain background 46 00:03:30,620 --> 00:03:34,850 color and you could also ensure that this can be set from outside of course, 47 00:03:34,850 --> 00:03:42,180 you can get really creative here. I'll hardcode a color in here by of course using my colors constant here. 03:42.270 -- 03:48.960 So I'll import colors from constants/Colors, colors like this 48 00:03:49,100 --> 00:03:55,710 and then here use colors primary color, the primary color maybe, like that. 49 00:03:55,790 --> 00:04:00,380 So that's the background color this button should have, again you could also make sure that this style 50 00:04:00,380 --> 00:04:04,090 is set dynamically with the help of some prop you're getting from outside 51 00:04:04,160 --> 00:04:06,290 but here, I'll hardcode it in here. 52 00:04:06,290 --> 00:04:11,180 In addition to that, the button should have some padding so that the text doesn't sit directly on the 53 00:04:11,270 --> 00:04:13,130 edges of the button container, 54 00:04:13,130 --> 00:04:19,310 so of the box around the text but there is some spacing and you can use the same padding in all directions 55 00:04:19,310 --> 00:04:22,590 but I want to use a padding vertical of 12, 56 00:04:22,640 --> 00:04:29,300 so not that much padding to top and bottom and a padding horizontal of let's say 30, 57 00:04:29,300 --> 00:04:32,550 so way more padding to left and right. 58 00:04:32,710 --> 00:04:36,830 That's the button, now for the text of the button, there 59 00:04:36,880 --> 00:04:41,500 also the color of white which should look good on our primary color, 60 00:04:41,500 --> 00:04:47,290 you could use black too because our primary color actually is a color where, as you can see, both white 61 00:04:47,410 --> 00:04:49,480 and black actually work, 62 00:04:49,480 --> 00:04:55,840 so you could use either but I'll go with white here for the button and I'll add a font family of 63 00:04:55,840 --> 00:05:01,780 open sans to use this custom font there as well, as you learned, you need to set this on every text, there is 64 00:05:01,780 --> 00:05:07,150 no inheritance, there is no global font you could set up, every text that should use this font needs to 65 00:05:07,150 --> 00:05:15,840 get it and I'll add a font size of let's say 18 to have a bigger text here in this button. Now when the 66 00:05:15,840 --> 00:05:21,720 button is pressed, then I actually of course typically don't want to handle this press event inside 67 00:05:21,720 --> 00:05:24,990 of the button but inside of the component where we use the button. 68 00:05:25,110 --> 00:05:27,160 So I simply want to forward it 69 00:05:27,180 --> 00:05:33,330 and for that, we can simply expect to get a function reference, an event handler function on the let's 70 00:05:33,330 --> 00:05:36,490 say onPress prop of our custom button 71 00:05:36,510 --> 00:05:41,670 but you could name this prop anything, you could name it onClick because in the end, it's you who uses 72 00:05:41,670 --> 00:05:42,510 your own button 73 00:05:42,600 --> 00:05:48,540 and there you just have to make sure you pass a fitting function reference, a fitting pointer at an event 74 00:05:48,540 --> 00:05:54,310 handler function to the onPress or whatever you name it prop on your own button. 75 00:05:54,360 --> 00:05:55,680 So this name is up to you, 76 00:05:55,680 --> 00:05:58,610 now let's use the main button and let's use it on the start 77 00:05:58,610 --> 00:06:02,170 game screen. There we can simply import it, 78 00:06:02,190 --> 00:06:13,230 so import the main button from components/MainButton and this main button now is used here for starting 79 00:06:13,230 --> 00:06:14,170 a new game. 80 00:06:14,230 --> 00:06:16,980 So I'll replace button here with main button 81 00:06:16,980 --> 00:06:23,610 but keep in mind that on this button, I configured the content, the text to be shown such that it's actually 82 00:06:23,610 --> 00:06:31,440 the content which is passed between the opening and closing tags of our button and therefore back in the 83 00:06:31,440 --> 00:06:32,790 start game screen, 84 00:06:32,790 --> 00:06:38,760 the title here is no longer passed on a title prop but instead, now we have an opening and closing tag 85 00:06:38,760 --> 00:06:42,730 for our own button and we add start game there. 86 00:06:44,110 --> 00:06:50,170 Now onPress is still a prop we leave here because in the main button, I forward the onPress event 87 00:06:50,230 --> 00:06:54,520 so to say, to the function I get on my own onPress prop here, 88 00:06:54,520 --> 00:07:00,870 therefore we have to set the onPress prop on our own button and therefore with that, we should have 89 00:07:00,870 --> 00:07:04,500 a nice main button here, a nice button when we start a new game. 90 00:07:07,840 --> 00:07:09,280 Let's give this a try here, 91 00:07:09,310 --> 00:07:13,680 this is how it looks like and that looks quite nice in my opinion, a nice button. 92 00:07:13,900 --> 00:07:15,080 I'm not done though, 93 00:07:15,220 --> 00:07:19,360 I want to have rounded corners on that button and for that, back in the main button file, 94 00:07:19,360 --> 00:07:24,640 we can of course simply go to this button property here in the stylesheet which is the style object 95 00:07:24,640 --> 00:07:32,650 getting applied to our view and there, we can add a border radius of 25 and if we do that, then 96 00:07:32,650 --> 00:07:39,210 you'll see that if I now get this button, it now has this nice look here. 97 00:07:39,450 --> 00:07:45,580 Let you also show it on Android, now has rounded corners and has this nice opacity effect when you tap 98 00:07:45,580 --> 00:07:46,120 on it 99 00:07:46,270 --> 00:07:51,680 and by the way as mentioned earlier already, you can change this opacity effect by going to the touchable 100 00:07:51,730 --> 00:07:58,080 opacity component and there, you can set the active opacity to the level of opacity you want to have 101 00:07:58,120 --> 00:07:59,090 when it's pressed, 102 00:07:59,140 --> 00:08:04,040 for example if you use a rather high value here, then this effect is less strong, 103 00:08:04,060 --> 00:08:10,930 now it's only slightly transparent when we tap on it and not as transparent as before. But that's totally 104 00:08:10,930 --> 00:08:11,980 up to you what you want here, 105 00:08:11,980 --> 00:08:15,530 I'll go for .6 here to have a slightly stronger effect 106 00:08:15,610 --> 00:08:21,130 but again that's something you can configure and in general, my suggestion would be that you play around 107 00:08:21,130 --> 00:08:28,950 with that and see how you can style that button, how you can really fine tune it to your requirements. Now 108 00:08:28,950 --> 00:08:31,140 with the custom button added, 109 00:08:31,140 --> 00:08:33,170 I also want to use it on the game over screen, 110 00:08:33,270 --> 00:08:42,380 so there, I'll also import main button from components/MainButton like this 111 00:08:42,610 --> 00:08:49,110 and then simply add that main button here when we show our new game button down there. 112 00:08:49,120 --> 00:08:53,620 Use the main button instead, therefore remove the title prop because that's not how we're setting the 113 00:08:53,620 --> 00:08:55,710 title on our own custom button, 114 00:08:55,720 --> 00:09:02,840 instead we have to pass it here between the opening and closing tags of our custom component tags. 115 00:09:03,040 --> 00:09:11,950 So therefore now here, this should also look nicer if we quickly finish a game here, trying to let the 116 00:09:11,950 --> 00:09:13,540 computer guess 33, 117 00:09:17,550 --> 00:09:20,730 here we are and now we see the nice button here too. 118 00:09:20,730 --> 00:09:24,540 We also see the correct output here regarding the number of rounds it took and the number we had to 119 00:09:24,540 --> 00:09:25,440 guess 120 00:09:25,440 --> 00:09:30,510 and we can start a new game thereafter and also go through that again real quick, 121 00:09:36,440 --> 00:09:36,770 yes, 122 00:09:36,870 --> 00:09:44,900 that's all looking really nice. The remaining thing I now still want to do is I want to work on these 123 00:09:44,900 --> 00:09:46,520 two buttons, lower and greater. 124 00:09:46,520 --> 00:09:48,230 They look a bit boring 125 00:09:48,290 --> 00:09:54,200 I'd say, we can certainly make them look more exciting. Now one way of making them look a bit more exciting 126 00:09:54,200 --> 00:09:56,690 is that we use our custom button there as well. 127 00:09:57,020 --> 00:10:04,710 So of course here in the game screen, we can also import the main button from components/MainButton, 128 00:10:04,730 --> 00:10:09,650 so our own custom button and use that instead of the button we're currently using, which is built-in 129 00:10:09,660 --> 00:10:12,070 one. So use our own button here, 130 00:10:12,200 --> 00:10:17,770 therefore of course move the title between the opening and closing tags, 131 00:10:17,870 --> 00:10:24,710 so here that's lower and then here for the second button, that is greater 132 00:10:25,220 --> 00:10:31,610 and now this should look a bit nicer if we start a new game here. 133 00:10:31,640 --> 00:10:35,470 Now we use our custom buttons here, though now we also see a problem, 134 00:10:35,590 --> 00:10:39,440 there are simply a bit too big, there're too close to each other, 135 00:10:39,530 --> 00:10:44,540 we can change that however by going down to the button container and giving this a bit more width, maybe 136 00:10:44,540 --> 00:10:47,550 set the max width to 90% here actually. 137 00:10:47,560 --> 00:10:53,490 So now if we try this again, yes that looks a bit better, there is at least some spacing between the buttons 138 00:10:53,490 --> 00:10:58,380 and for now this will do because for now, we're not optimizing for all screen sizes. 139 00:10:58,530 --> 00:11:04,140 Let's also increase this width here to 400 though so that we have enough width, we do actually use 400 140 00:11:04,140 --> 00:11:09,160 pixels and now this looks good here on iOS 141 00:11:12,590 --> 00:11:15,880 and also on Android. Now that looks a bit better as I mentioned 142 00:11:15,890 --> 00:11:22,700 but wouldn't it be also nice if we had icons in there, instead of text because text of course works but 143 00:11:22,700 --> 00:11:24,650 an icon might also do the trick 144 00:11:24,650 --> 00:11:30,830 and we haven't used icons thus far since you often need them in mobile apps though. It's definitely something 145 00:11:30,830 --> 00:11:36,980 you should also be aware of, you should be aware of how to work with icons, how to add icons inside of 146 00:11:36,980 --> 00:11:39,370 your app and that's therefore what we'll do next.