React native: zIndex not taken seriously on Android

Question

There is a container component which holds an Image. This container is supposed to be behind text in a different container component. Both container components are at the same depth from Root element. Explaining the exact structure is a bit complicated.

The gist of the issue is that zIndex is respected on iOS, but not on Android. You can clone the Expo project here

https://github.com/fullhdpixel/stopwatch_RN

iOS screenshot (correct):

Android screenshot (incorrect, see laps text)

Answer 1

On Android zIndex fights with elevation property. If you are using elevation purely for the shadow, you should use a component like this to get the shadow - https://github.com/Kishanjvaghela/react-native-cardview

Or you can try setting elevation but with backgroundColor: 'transparent'. I think this will raise the element but not give it shadow. (if you try this way let me know how if it still works, I forget, it might have been a bug that they fixed).

Edit:

Just tried out that elevation without shadow trick, it works, here is a snack to try with expo - https://snack.expo.io/@noitsnack/elevation-without-shadow-trick

Answer 2

The issue has been solved. The solution was straightforward, it was just a rearrangement of elements.

See this commit: https://github.com/fullhdpixel/stopwatch_RN/commit/ec6cb79945fabbf0b718cbdb98f201d92f749a73