Now a quick fix which I just noticed that we will need to implement, our shadow is gone here on this
category page,
I didn't notice this earlier,
this happens because in the category grid tile,
I added overflow hidden,
if I remove that here, then we have the shadow back and it makes sense that we get it because with overflow
hidden, we basically say the grid item which is this view around everything else here, that basically
defines what we can see, the shape of this defines what we can see
and this simply crops the shadow as well and that's of course something I don't necessarily want
here.
Now of course, overflow hidden is important though to make sure that the ripple effect works correctly
and the solution therefore is very simple,
we can move our elevation here onto this grid item view, which is this extra view we added to restrict
the ripple effect.
So add the elevation there, maybe increase it to five so that we can see it a bit better
and with that, we can see that we'll have the shadow back on Android,
we have the shadow now again.
Now for iOS, you could think that you simply move these shadow properties here onto the same styling
object,
so onto grid item as well but this won't do the trick as you can tell. Here on iOS,
we still have no shadow because there, overflow hidden still crops the shadow, that's simply a
little platform difference we have
but that's no problem.
We can revert this, we can leave the shadow on a container,
we could also move it here, doesn't make a difference.
What we can instead do is, we can leverage the platform and make sure that we only set overflow hidden
if we're on Android because we really only need it there, we really only need it there to crop this shape
for the ripple effect.
So we can check if platform.os is equal to Android and actually, we only use the ripple effect if we're
on version 21 or higher,
so if platform.version is greater or equal to 21. If that's the case, we want to set overflow
to hidden because then we need to crop this to make sure the ripple effect works correctly, otherwise
we can set this to visible which is the default so that we have no cropping, which means on iOS, we'll not
set this to hidden and therefore on iOS, we now have the shadow again too
and on Android, we also have the shadow
but we still have the correct ripple effect.
So that's a little improvement,
totally optional improvement but of course there to fix our styling which I want to implement here
to make sure we have the style again which we wanted.