React-native shadow not appearing

Question

I'm trying to get a shadow below my views, and from what I found online it should be quite simple:

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

but the problem is that the shadow is not appearing at all.

Here's my components

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

and in my StyleSheet:

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

Any reason for this or is there something I've missed?

Answer 1

Is the shadow working on IOs ? Android and IOS work ≠ in React-Native. For android, it works with 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 } 

Otherwise, try to set a background color to your shadow component :)

Answer 2

For iOS, raise the zIndex of your outer <View>

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