React-native shadow not appearing

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

Solution 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,  
}  

Solution 3:

As some of the comments have pointed out, you're in a bit of a bind if you need overflow: 'hidden'. (Such as for a card with rounded edges and a full-bleed image.)

A handy approach is to add shadow to a parent container with no backgroundColor set. That is due to this issue https://github.com/facebook/react-native/issues/10049#issuecomment-366426897 which causes children to inherit the shadow of a parent view without a background. (It can look pretty weird when it affects multiple children.)

• Add a parent container with a shadow & no backgroundColor set.
• Have a single child view with a backgroundColor.

    <View // Parent
      style={{
        flex: 1,
        // No backgroundColor
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 1},
        shadowOpacity: 0.8,
        shadowRadius: 2
      }}
    >
      <View // Card
        style={{
          flex: 1,
          borderRadius: 10,
          // To round image corners
          overflow: 'hidden',
          borderColor: '#999',
          borderWidth: 0.5,
          // https://github.com/facebook/react-native/issues/10049#issuecomment-366426897
          backgroundColor: '#FFF',
          // Android shadow
          elevation: 4
        }}
      >
        <Image // Content
          style={{
            height: '50%',
            width: '100%',
            alignSelf: 'center',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          source={{
            uri: 'https://yourimageurl.com/image.jpg'
          }}
          resizeMode="cover"
        />
      </View>
    </View>