1 00:00:02,250 --> 00:00:08,310 Now a quick fix which I just noticed that we will need to implement, our shadow is gone here on this 2 00:00:08,460 --> 00:00:09,880 category page, 3 00:00:10,050 --> 00:00:11,970 I didn't notice this earlier, 4 00:00:11,970 --> 00:00:14,210 this happens because in the category grid tile, 5 00:00:14,220 --> 00:00:15,780 I added overflow hidden, 6 00:00:15,780 --> 00:00:22,860 if I remove that here, then we have the shadow back and it makes sense that we get it because with overflow 7 00:00:23,250 --> 00:00:29,250 hidden, we basically say the grid item which is this view around everything else here, that basically 8 00:00:29,250 --> 00:00:33,650 defines what we can see, the shape of this defines what we can see 9 00:00:33,690 --> 00:00:41,760 and this simply crops the shadow as well and that's of course something I don't necessarily want 10 00:00:41,760 --> 00:00:42,750 here. 11 00:00:42,780 --> 00:00:48,780 Now of course, overflow hidden is important though to make sure that the ripple effect works correctly 12 00:00:48,960 --> 00:00:53,340 and the solution therefore is very simple, 13 00:00:53,460 --> 00:01:05,540 we can move our elevation here onto this grid item view, which is this extra view we added to restrict 14 00:01:05,540 --> 00:01:06,860 the ripple effect. 15 00:01:06,860 --> 00:01:11,620 So add the elevation there, maybe increase it to five so that we can see it a bit better 16 00:01:11,750 --> 00:01:17,330 and with that, we can see that we'll have the shadow back on Android, 17 00:01:17,330 --> 00:01:19,190 we have the shadow now again. 18 00:01:19,190 --> 00:01:27,140 Now for iOS, you could think that you simply move these shadow properties here onto the same styling 19 00:01:27,160 --> 00:01:27,530 object, 20 00:01:27,540 --> 00:01:32,710 so onto grid item as well but this won't do the trick as you can tell. Here on iOS, 21 00:01:32,720 --> 00:01:38,360 we still have no shadow because there, overflow hidden still crops the shadow, that's simply a 22 00:01:38,360 --> 00:01:40,610 little platform difference we have 23 00:01:40,850 --> 00:01:42,310 but that's no problem. 24 00:01:42,350 --> 00:01:45,260 We can revert this, we can leave the shadow on a container, 25 00:01:45,260 --> 00:01:47,610 we could also move it here, doesn't make a difference. 26 00:01:47,840 --> 00:01:53,690 What we can instead do is, we can leverage the platform and make sure that we only set overflow hidden 27 00:01:53,690 --> 00:02:00,590 if we're on Android because we really only need it there, we really only need it there to crop this shape 28 00:02:00,740 --> 00:02:02,300 for the ripple effect. 29 00:02:02,300 --> 00:02:09,470 So we can check if platform.os is equal to Android and actually, we only use the ripple effect if we're 30 00:02:09,470 --> 00:02:11,300 on version 21 or higher, 31 00:02:11,300 --> 00:02:18,020 so if platform.version is greater or equal to 21. If that's the case, we want to set overflow 32 00:02:18,020 --> 00:02:23,660 to hidden because then we need to crop this to make sure the ripple effect works correctly, otherwise 33 00:02:23,930 --> 00:02:31,940 we can set this to visible which is the default so that we have no cropping, which means on iOS, we'll not 34 00:02:31,940 --> 00:02:35,320 set this to hidden and therefore on iOS, we now have the shadow again too 35 00:02:35,480 --> 00:02:36,970 and on Android, we also have the shadow 36 00:02:36,980 --> 00:02:39,110 but we still have the correct ripple effect. 37 00:02:39,350 --> 00:02:41,160 So that's a little improvement, 38 00:02:41,750 --> 00:02:46,910 totally optional improvement but of course there to fix our styling which I want to implement here 39 00:02:46,910 --> 00:02:49,250 to make sure we have the style again which we wanted.