ombre React natif ne figurant pas

Question

J'essaie d'obtenir une ombre en dessous de mon point de vue, et de ce que je trouve en ligne, il devrait être assez simple:

shadowOffset: { width: 10, height: 10 }, 
    shadowColor: 'black', 
    shadowOpacity: 1.0, 

mais le problème est que l'ombre est n'apparaissant pas du tout.

Voici mes composants de

 <View style={styles.shadow}> 
     <View style={styles.box} > 
      <View style={styles.ListComponent}> 
      <Text style={styles.itemText}>Livestream</Text> 
      </View> 
     </View> 
     </View> 

et dans ma feuille de style:

const styles = StyleSheet.create({ 
    shadow: { 
    shadowOffset: { width: 10, height: 10 }, 
    shadowColor: 'black', 
    shadowOpacity: 1.0 
}, 

Toute raison ou est-il quelque chose que j'ai manqué?

Answer 1

L'ombre agit-elle sur les E/S? Android et IOS fonctionnent dans React-Native. Pour Android, cela fonctionne avec elevation.

const styles = StyleSheet.create({ 
shadow: { 
    shadowOffset: { width: 10, height: 10 }, 
    shadowColor: 'black', 
    shadowOpacity: 1, 
    elevation: 3, 
    // background color must be set 
    backgroundColor : "#0000" // invisible color 
} 

Sinon, essayez de définir une couleur de fond à votre composant ombre :)

Answer 2

Pour iOS, augmenter le zIndex de votre extérieur <View>

const styles = StyleSheet.create({ 
shadow: { 
    shadowOffset: { width: 10, height: 10 }, 
    shadowColor: 'black', 
    shadowOpacity: 1, 
    elevation: 3, 
    zIndex:999, 
}