Active item shadow not visible on Android (Expo 53 / RN 0.79.6 / New Architecture)

[outaTiME]

Description

Sadly, when dragging an item in the grid, the activeItem shadow is not rendered on Android.
On iOS the shadow appears as expected.

Steps to reproduce

1. Create a SortableGrid with draggable items.
2. Run the app on Android.
3. Drag an item.

Code snippet, Snack or GitHub repository link

https://github.com/outaTiME/ambito-dolar

React Native Sortables version

1.8.0

Reanimated version

3.19.1

React Native Gesture Handler version

2.28.0

React Native version

0.79.6

Platforms

Android

Architecture

Fabric (New Architecture)

Workflow

None

Device

Android emulator

Acknowledgements

Yes

[MatiPl01]

Hey @outaTiME!

Thanks for reporting the issue. In general, Android doesn't support view shadows (except the new boxShadow prop to which I will come back later). As a result, the current implementation works fine on the web and iOS but not on Android, where I used the elevation prop that should add a little shadow effect (not the same as on iOS or on the web) but I forgot that elevation doesn't work when the parent view has transparent background, thus it is not visible at all near the active item.

I tried to experiment with the new boxShadow prop, but, when I applied it on the view that I use internally in my library, then it didn't respect border radius of the grid item component and gave a weird effect. As a result, I decided to add info to docs that the built-in shadow is not supported on android and implemented an example that shows how you can add boxShadow to the active item on your side.

Here is a PR in which I described the problem more in detail: #466
And here is the new example I added in docs: https://react-native-sortables-docs.vercel.app/grid/examples/custom-shadow

Please let me know if it helps!

[outaTiME]

Thanks a lot for your detailed explanation and for taking the time to adjust the docs and add an example — really appreciate the clarity and the effort 🙏.

I was previously using react-native-draggable-flatlist, but due to its lack of maintenance and stability I migrated to your library. With the old one I was able to get the same shadow experience on both iOS and Android (I don’t use web at the moment), but I totally understand that given the way everything is built here it’s not currently possible.

Thanks again for the transparency and for pointing me to the new example with boxShadow. It’s great to know the options and the current limitations on Android.

[MatiPl01]

Interesting that the shadow worked in the react-native-draggable-flatlist. I will check what does this library do to make it work.