React-native shadow not appearing

user_6265937 0
Viewed 75680

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?

react-native shadow
9 Answers

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>

comparing shadow properties

user_12773500

I too wanted to have a shadow below my View in my Android app. So the trick I found was:

For IOS:

const styles = StyleSheet.create({
    shadow: {
      shadowOffset: { width: 0, height: 2 },
      shadowColor: '#000',
      shadowOpacity: 0.2
    }
});

And For Android:

const styles = StyleSheet.create({
    shadow: {
        elevation: 5
    }
});

If you're working on UI elements I suggest you have a look at NativeBase site. They have made life easy as far as styling is concerned.

user_63723230

I solved this by adding overflow: 'visible' to the style attributes of the Image I was applying the shadow to.

image: {
    overflow: 'visible',
    width: 300,
    height: 200,
    borderRadius: 4,
    shadowOffset: { width: 0, height: 2 },
    shadowColor: '#000',
    shadowOpacity: 0.2
  }
user_110024380

Shadow works in React Native. All you have to do is Increase the Elevation to a higher value. And make sure there is no Hidden overflow on the parent container as it covers the extra part. Here is the minimum code for Shadow render. It works perfectly fine as long as you have your Elevation value correct.

shadowColor: 'black',
shadowOpacity: 1,
elevation: 12,
user_119744660

Sometimes changes do not take effect in react-native and you need to terminate the app and reopen it. And also you have to save changes on every single file you have made.

user_117830730

actually for me, it was shodowOpacity that was missing in my styles. I had given shadowColor: 'rgba(0,0,0,0.4)' and it was working on Android, I didn't know that I have to add also shadowOpacity: 0.4 in order to work on iOS. adding it solved the problem

user_88981380

Solution for both borderRadius and shadow

        <View style={{backgroundColor: '#000', ...shadow}}>
          <View style={{overflow: "hidden", borderRadius: 10}}>
            <VideoPlayer
                ...
                />
          </View>
        </View>
user_56038280
Related