Good news - shadow styling is now supported on mobile elements!
You will notice that shadow works a little different on mobile, however. This is because Android thinks about adding shadow as creating elevation in the UI. In the spirit of keeping designs consistent across iOS and Android, we are mapping the more opinionated Android elevation levels to iOS shadow settings. This is why you will see Elevation as a new control when shadow has been enabled. In the future, we will likely open up more control here but in the mean time, I’ve added the mapping below.
Note: Shadow is not showing up on Android BubbleGo at the time of posting, but we know the issue and are working on a fix.
Note: Mobile shadow settings are not yet supported in styles, but will be addressed soon as a part of a project to more broadly support elements with mobile and web style settings.
Mapping
-
level 1:
- 1dp Elevation
- iOS:
- shadowOffset = CGSize(width: 0, height: 1)
- shadowRadius = 1.5
-
level 2:
- 3dp Elevation
- iOS:
- shadowOffset = CGSize(width: 0, height: 3)
- shadowRadius = 3
-
level 3:
- 6dp Elevation
- iOS:
- shadowOffset = CGSize(width: 0, height: 6)
- shadowRadius = 4.5
-
level 4:
- 8dp Elevation
- iOS:
- shadowOffset = CGSize(width: 0, height: 8)
- shadowRadius = 6
-
level 5:
- 12dp Elevation
- iOS:
- shadowOffset = CGSize(width: 0, height: 12)
- shadowRadius = 7.5
