CODEWITHSUNDEEP
react-nativeshadow
smuvv
smuvv

Reputation: 971

React-native shadow not appearing

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?

Upvotes: 56

Views: 106288

Answers (10)

Daniyal
Daniyal

Reputation: 223

For Android, adding a backgroundColor to the container where you are applying the shadow, should work. If your view is of white color by default, explicitly applying the backgroundColor to be white should bring in shadow on Android.

Upvotes: 0

Mahdieh Shavandi
Mahdieh Shavandi

Reputation: 8635

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

Upvotes: 1

mahmood
mahmood

Reputation: 399

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.

Upvotes: 0

Suyash Vashishtha
Suyash Vashishtha

Reputation: 755

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,

Upvotes: 4

Michael M.
Michael M.

Reputation: 519

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
  }

Upvotes: 5

LordParsley
LordParsley

Reputation: 4048

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

Upvotes: 19

Phuong Phan
Phuong Phan

Reputation: 147

Solution for both borderRadius and shadow

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

Upvotes: -2

talhasaleem09
talhasaleem09

Reputation: 246

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.

Upvotes: 8

TBouder
TBouder

Reputation: 2719

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

Upvotes: 119

GollyJer
GollyJer

Reputation: 26672

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

Upvotes: 21

Related Questions