react-native: shadow props of parent shouldn't inherit to children element...

Issue Description

take a look at this screenshot…

simulator screen shot sep 23 2016 3 59 26 am

take a look at row3 text… it inherit shadow props from parent component <View />

Steps to Reproduce / Code Snippets

<View 
  key={id} 
  style={styles.box}
  shadowOffset={{height: 10}}
  shadowColor='black'
  shadowOpacity={0.5}
>
  <Text style={styles.text}>{title}</Text>
</View>

Expected Results

shadow props of parent shouldn’t inherit to children element…

Additional Information

  • React Native version: latest
  • Platform(s) (iOS, Android, or both?): ios
  • Operating System (macOS, Linux, or Windows?): mac

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 9
  • Comments: 17 (2 by maintainers)

Most upvoted comments

Same here.

edit: Found a “fix” for my use case. The trick is to set a background color to the component on which you set the shadow. In the top example that would be:

<View 
  key={id} 
  style={[styles.box, { backgroundColor: white }]}
  shadowOffset={{height: 10}}
  shadowColor='black'
  shadowOpacity={0.5}
>
  <Text style={styles.text}>{title}</Text>
</View>

Unfortunately this only works with coloured backgrounds – when setting a transparent background with RGBA or ‘transparent’ is doesn’t help.

@ericnakagawa I can reproduce this with transparent or RBGA backgrounds on my view using RN 0.43.4

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      	<View style={ styles.withShadow }>
          <Text style={styles.text}>HELLO WORLD solid</Text>
      	</View>

        <View style={[styles.withShadow,{backgroundColor:'transparent'}]}>
          <Text style={styles.text}>HELLO WORLD transparent</Text>
        </View>

        <View style={[styles.withShadow,{backgroundColor:'rgba(33,33,33,0.05)'}]}>
          <Text style={styles.text}>HELLO WORLD rgba</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize:24,
    color:'white',
    textAlign:'center',
  },
  withShadow: {
    margin: 20,
    height: 150,
    width: 150,
    backgroundColor: '#EEE',
    borderWidth:1,
    shadowColor: "#000000",
    shadowOpacity: 0.85,
    shadowRadius: 5,
    shadowOffset: {
      height: 0,
      width: 0
    }
  }
});

simulator screen shot apr 24 2017 10 54 47 am

Can we re-open this issue? On React-Native 0.55.0 and experiencing this bug as well.

Can we reopen this? Child element still seem to inherit their parent’s shadows.

Please re-open this issue. I am experiencing this on 0.55.2 . Thankfully @sanderfish provided a temporary fix.