Reat Native - position absolute not show on top of View - react-native

Question

I use React Native 0.55, and I want to display a kind of icon on top of a , like this : http://b3.ms/qpknagGre9BR
For now, I use this :
<View style={styles.cardContainer}>
<Image source={iconPlayers} style={styles.iconTop} />
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
</View>
And my styles :
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
zIndex: 999,
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
It's crazy because now it works, but I have a problem, I can't put elevation: 4 on styles for an <Image /> element, I have a Warning.
If I remove the elevation: 4, of my styles, the image is shown behind the cardBox.
How can I achieve what I want without any warning ... ? Thanks.
** EDIT **
I wrapper the <Image /> in a <View />, and I put elevation property to the wrapper, and it works.
I thought elevation was for boxShadow for android, but it impacts the zIndex.

Answer 1

I am trying your code in snack expo, which uses the latest react-native version (55.4). There is no warning in applying elevation to Image property, it just works fine and the image is also above the card. If your react-native version gives warning just wrap it in a View and apply elevation to that View. Also, remember zIndex gets affected by your Views elevation (only Android). Since you have applied elevation: 4 to card box, you must give elevation >= 4 for your Image component else it will draw beneath the card box.
snack example: https://snack.expo.io/B14UPA9Bm
You can also avoid Zindex by changing the order of components,
// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
<Image source={iconPlayers} style={styles.iconTop} />
</View>
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
//zIndex: 999, not required now
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
Check and tell if it works in Android and iOS. thanks