Categories
React Native Answers

How to add an image border shadow with React Native?

Spread the love

To add an image border shadow with React Native, we add nested Vies with different background colors.

For instance, we write:

<View
  style={{
    flexGrow: 1,
    backgroundColor: Colors.white,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
  }}
>
  <View
    style={[
      Theme.center,
      Theme.dropShadow,
      {
        top: -100,
        width: 190,
        height: 190,
        borderRadius: 190 / 2,
        backgroundColor: Colors.white,
      },
    ]}
  >
    <Image
      source={require("../../assets/resto/chef_jude.png")}
      style={[
        {
          width: 180,
          height: 180,
          borderRadius: 180 / 2,
        },
      ]}
    />
  </View>
</View>;

to set thr backgroundColor properies of the Views.

We set the inner one to have different top position to produce the shadow effect.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.