1 00:00:02,330 --> 00:00:06,200 Now sometimes it can be cumbersome to add a bunch of such checks 2 00:00:06,200 --> 00:00:09,920 and here we already have three checks on the header for example, 3 00:00:09,920 --> 00:00:14,070 certainly something we can add but maybe not optimal. 4 00:00:14,480 --> 00:00:22,970 Instead to keep our style objects cleaner, we could set up a base header here, for example header base 5 00:00:23,360 --> 00:00:37,110 and then add headerIOS and headerAndroid and now what we do is we take all these styles which change 6 00:00:37,110 --> 00:00:39,600 based on the platform out of the base style, 7 00:00:39,860 --> 00:00:44,830 add them here to headerIOS and headerAndroid and on headerIOS, 8 00:00:44,970 --> 00:00:51,020 we only keep the iOS look here, so white, 9 00:00:56,160 --> 00:01:04,100 then this color for the border at the bottom and a pixel width of one for that border 10 00:01:04,200 --> 00:01:13,200 and here on Android, we remove this check and keep color primary as a background color and on the other 11 00:01:13,200 --> 00:01:19,800 hand, we get rid of our border by using these values or by entirely removing that and not setting it 12 00:01:19,800 --> 00:01:20,970 at all. 13 00:01:20,970 --> 00:01:28,590 Now we just need to make sure we add headerIOS or headerAndroid and for that, we can go up here and 14 00:01:28,690 --> 00:01:35,050 set up up our styles object where we merge in all our header base styles now, 15 00:01:35,070 --> 00:01:45,500 so these are always set but now in addition, we can merge in the result of platform select which now 16 00:01:45,500 --> 00:01:54,770 is a method which takes an object where we have to specify an iOS key and point at the value or 17 00:01:54,770 --> 00:02:02,270 in this case, the object we want to use if we are on iOS which is styles.headerIOS and add an Android 18 00:02:02,270 --> 00:02:05,310 key and point at styles that headerAndroid 19 00:02:05,540 --> 00:02:12,380 and with that we're telling React Native please merge in the properties of the value, in this case, an 20 00:02:12,380 --> 00:02:15,680 object we're selecting for iOS and for Android. 21 00:02:15,680 --> 00:02:21,410 So you'll always have to pass an object to platform select and then you have different values for iOS and 22 00:02:21,410 --> 00:02:26,390 Android and the value here could also be a number, just wouldn't work here because here we actually expect 23 00:02:26,390 --> 00:02:32,350 an object so that we can pull out all the property value pairs and pass them to our surrounding style. 24 00:02:32,360 --> 00:02:37,310 So here a number doesn't make sense but you can use select with any kind of value, 25 00:02:37,370 --> 00:02:38,960 here we just need an object, 26 00:02:39,020 --> 00:02:45,410 so we're pointing at the headerIOS and the headerAndroid objects. And with that, we're having leaner code, 27 00:02:45,680 --> 00:02:51,110 we have leaner styles down there and then we have code with a base style where we then use platform 28 00:02:51,110 --> 00:02:57,230 select to dynamically pick different styles based on the platform we're running on and therefore now, 29 00:02:57,230 --> 00:03:04,760 we have the same look as before but now in a more elegant way. Another place in our app where we could 30 00:03:04,760 --> 00:03:11,360 take advantage of this is our main button here. Our main button looks and feels the same on both platforms 31 00:03:11,480 --> 00:03:14,780 which isn't horrible but which also might not be what we want. 32 00:03:15,590 --> 00:03:21,590 If we go to our MainButton.js file, we see we always use touchable opacity here but actually on Android, 33 00:03:21,590 --> 00:03:23,940 we might want to use the ripple effect. 34 00:03:23,990 --> 00:03:30,740 Now thankfully, React Native has the touchable native feedback component built in which actually gives 35 00:03:30,740 --> 00:03:33,830 us a touchable object which has a built-in ripple effect, 36 00:03:33,920 --> 00:03:38,730 so we want to use that on Android and touchable opacity on iOS. 37 00:03:38,810 --> 00:03:44,300 Now of course, we can use the platform API which we therefore also have to import from React Native to 38 00:03:44,330 --> 00:03:47,510 use a different component here based on the platform 39 00:03:47,630 --> 00:03:52,520 and for that we can use a really neat feature React has not React Native specific but we can use it 40 00:03:52,520 --> 00:03:54,200 in React in general, 41 00:03:54,290 --> 00:04:00,200 we can set up a variable which starts with a capital character so that we can use it as a jsx element 42 00:04:00,230 --> 00:04:07,430 because only capital character variables can be used as jsx elements and we name this let's say button 43 00:04:07,490 --> 00:04:12,170 component, the name is totally up to you and by default, that's touchable opacity. 44 00:04:12,170 --> 00:04:19,730 So I point at the touchable opacity object here, without angled brackets, just pointing at it like this. 45 00:04:19,730 --> 00:04:27,350 Now we can add an if check and check if platform OS is equal to Android and important, also check something 46 00:04:27,350 --> 00:04:29,230 else on platform, 47 00:04:29,240 --> 00:04:37,210 also check if platform version is greater or equal to 21 because only Android API version 21 48 00:04:37,230 --> 00:04:40,040 or higher supports the ripple effect. 49 00:04:40,100 --> 00:04:46,130 So if both is true, then we'll set button component to touchable native feedback so then we'll use the 50 00:04:46,130 --> 00:04:50,480 one with the ripple effect, otherwise we'll use the one with the opacity effect. 51 00:04:50,600 --> 00:04:56,930 So if we're on Android and the Android version is high enough, it's 21 or higher, then we use touchable 52 00:04:56,930 --> 00:05:03,350 native feedback. Now because I name this with a capital starting character, we can use this here instead 53 00:05:03,350 --> 00:05:12,260 of touchable opacity in our jsx code, looks strange at first but will work perfectly fine. If we now save 54 00:05:12,500 --> 00:05:22,640 this and this restarts, you'll see now here you have that ripple effect, you can see it if we press and 55 00:05:22,640 --> 00:05:29,450 hold, you see that ripple effect on the button. Doesn't look perfect yet because it's actually rectangular 56 00:05:29,450 --> 00:05:33,350 and doesn't respect our border radius and we'll fix that but it works 57 00:05:33,350 --> 00:05:40,340 and on the other hand here on iOS, we have the opacity effect as you can tell if you press this. 58 00:05:40,340 --> 00:05:47,990 So now let's fix the border radius and we can do so by wrapping this with another view and that's 59 00:05:47,990 --> 00:05:51,780 just a little hack, a little workaround you need to be aware of. 60 00:05:52,010 --> 00:05:57,490 We wrap this with another view where I set a style of let's say button container, 61 00:05:58,480 --> 00:06:07,430 add that style down there in our stylesheet and on that button container here which is now wrapped 62 00:06:07,430 --> 00:06:08,640 around everything, 63 00:06:08,780 --> 00:06:17,910 I set the same border radius as I set on the button, so 25 in this case here and I add overflow hidden 64 00:06:18,000 --> 00:06:25,320 which means that any child component that would go beyond the boundaries of this components, so of the component 65 00:06:25,320 --> 00:06:31,170 with this style is basically clipped and this will ensure that the ripple effect which is now a child 66 00:06:31,170 --> 00:06:36,670 component of this view will be clipped on the rounded edges of this button. 67 00:06:37,210 --> 00:06:44,070 So now if we save this and we retry this, you will see that the ripple effect only fills out the button, 68 00:06:44,070 --> 00:06:50,200 which of course looks way better and on iOS of course, we still have the same behaviour as before. 69 00:06:51,070 --> 00:06:55,750 So using the platform here in an if check is also something we can do but 70 00:06:55,780 --> 00:07:01,180 we can also use this neat trick here to render totally different components based on the platform we're 71 00:07:01,180 --> 00:07:01,780 running on.