Why is shadow in react native being applied to text?

user_12064910 0
Viewed 713

I have following component:

<TouchableOpacity style={styles.event} onPress={onPress}>
      <View style={styles.dateContainer}>
        <Text style={styles.eventDate}>Sent at : {event.sentAt}</Text>
      </View>
      <View style={styles.eventTextContainer}>
        <Text style={styles.eventText}>{event.text}</Text>
      </View>
    </TouchableOpacity>

then in my styles:

event: {
        shadowColor: "#000",
        shadowOffset: {
        width: 5,
        height: 5,
        },
        shadowOpacity: 0.75,
        shadowRadius: 3.84,
    ...Platform.select({
      android: {
        elevation: 5,
      },
    }),
eventTextContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
    },
    eventText: {
        fontSize: 20,
        fontWeight: '700',
    }

The shadow is being applied to the text, which I dont want, only want it applied to the touchable opacity, what am I doing wrong?

enter image description here

react-native shadow
1 Answers

This is similar to another stackoverflow question, the key to avoid this problem is applying a background color to the container with the shadow styles, in your case is the event style.

event: {
  shadowColor: "#000",
  shadowOffset: {
    width: 5,
    height: 5,
  },
  shadowOpacity: 0.75,
  shadowRadius: 3.84,
  ...Platform.select({
    android: {
    elevation: 5,
  },
  backgroundColor: "#FFF",
}),

user_88827840
Related