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 :)