how to add shadow around the image in react-native

Question

I need to add a shadow around the Image my image is a rectangular field and i need to add a shadow around that rectangular field

I want to do something like this: stackoverflow question

I wanted to know how to do this in react native that can be applicable for both android and ios

Answer 1

Shadow is only for iOS. For Android you need Elevation. You could do something like this. I use it currently and works fine:

elevationLow: {
    ...Platform.select({
    ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,    
    },
    android: {
        elevation: 5,
    },
    }),
},

Answer 2

Wrap your Image inside View (for semantic clarity) and then define following style rules to the View:

shadow: {
  shadowColor: '#202020',
  shadowOffset: {width: 0, height: 0},
  shadowRadius: 5,
},

I made an example here: https://snack.expo.io/rJesdOgRZ. But atm "snack" is so freaking slow that it's difficult to check actual results. But at least the code is visible and works as a benchmark.