feat: Add custom shadow example to docs, clean up decoration style #466
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
I added this example to docs as I cannot add a correct support for shadows on Android. Android doesn't support any of the shadow properties (except the new
boxShadow) and provides its ownelevationprop instead, which doesn't work in our case as the elevation is printed on the non-transparent background of the parent view. In our case, all grid items are absolutely positioned with transparent background, so theelevationis not visible.I tried implementing the shadow effect with the new
boxShadowRN style prop but it didn't work right for grid items which have rounded corners. The problem is that applying the box shadow to the rectangular view that I use internally in the library creates a gap between the item and the shadow and doesn't respect the rounded corners. TheboxShadowmust be applied on the view that has rounded corners, so I decided to add an example to docs showing how to do this as I cannot implement such behavior on my end.Example images of the
boxShadowissueThe following images show how the
boxShadowwould look like if I implemented it in my library when grid items are rendered with rounded corners.Added labels near the
activeItemShadowOpacityprop