Accidentally put shadows on my text when creating a shadow border outline

Question

When creating a border that has shadows, I noticed whatever text I put inside that border(which is a view) that my text also has the same shadow implementation.

How can I achieve this same shadow effect on my border but leave my text to the default styling?

 <View style={styles.reviewBox}>
    <Text style={{fontSize: 14, color: 'black'}}>
        Why does this text have shadows on it
    </Text>
 </View>

reviewBox: {
      width: 300, 
      height: 50, 
      borderTopWidth: 0,
      borderBottomWidth:.5, 
      borderRightWidth: .5, 
      borderLeftWidth: .5, 
      borderColor: 'white', 
      borderBottomLeftRadius: 10,
      borderBottomRightRadius: 10,
      shadowColor: "#000000",
      shadowOpacity: 1,
      shadowRadius: 1,
      shadowOffset: {
        height: 1,
        width: 1
      }
    }

This seems to be a known react-native issue: https://github.com/facebook/react-native/issues/10049. Possibly updating to the newest version might help, otherwise you might have to Manually override the options for the text. — Aram Becker, Aug 25 '21 at 05:29
Maybe this post answers your question: https://stackoverflow.com/q/52914868/5249411 — Aram Becker, Aug 25 '21 at 05:30
Does this answer your question? [How to apply shadow to react native View without affecting inner view elements?](https://stackoverflow.com/questions/52914868/how-to-apply-shadow-to-react-native-view-without-affecting-inner-view-elements) — Aram Becker, Aug 25 '21 at 05:32

score 0 · Answer 1 · answered Aug 25 '21 at 05:52

0

You can try this:

    backgroundColor: 'white',
    shadowColor: '#000000',
    shadowOffset: {
            width: 3, 
            height: 3 
    },
    shadowOpacity: 1.0,
    borderRadius: 10,

answered Aug 25 '21 at 05:52

Rahman Haroon

1,088
2
12
36

Accidentally put shadows on my text when creating a shadow border outline

1 Answers1