CODEWITHSUNDEEP
react-native
nadeshoki
nadeshoki

Reputation: 371

how to add shadow around the image in react-native

I need to add a shadow around the Image my image is a rectangular field and i need to add a shadow around that rectangular field

I want to do something like this: stackoverflow question

I wanted to know how to do this in react native that can be applicable for both android and ios

Upvotes: 18

Views: 49151

Answers (4)

Pawara Siriwardhane
Pawara Siriwardhane

Reputation: 2055

Another easiest and the best option I came across is the use of react-native-shadow-2 along with react-native-svg. Here, we need to install react-native-svg since react-native-shadow-2 is dependant on react-native-svg.

Basic shadow

import { Shadow } from 'react-native-shadow-2'; 

export default const ImageWithShadow = () => {
    <Shadow> 
      <Image style={styles.imageStyles} source={ImageSource} />
    </Shadow>
}

Advance shadow styling

import { Shadow } from 'react-native-shadow-2'; 

export default const ImageWithShadow = () => {
    <Shadow startColor='#00000020' distance=10 radius=5 size=20> 
      <Image style={styles.imageStyles} source={ImageSource} />
    </Shadow>
}

As shown in the above sample code you have to just wrap all the content (image or text or View or any other react native component) that you need to add a shadow inside the tag. No need of doing any manual styling like in react native shadow options. If you browse their documentation you can find many props that you can effectively utilize to customize the shadow applied to the component.

Upvotes: 0

sebastianf182
sebastianf182

Reputation: 9978

Shadow is only for iOS. For Android you need Elevation. You could do something like this. I use it currently and works fine:

elevationLow: {
    ...Platform.select({
    ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,    
    },
    android: {
        elevation: 5,
    },
    }),
},

Upvotes: 28

Ryan Turnbull
Ryan Turnbull

Reputation: 3944

You can use shadow style props for your View to achieve this. You will want

shadowOffset = takes in height and (optional, i dont really like using it, but ) width values to move your shadow in those directions.

shadowColor = takes a colour, similar to backgroundColor, indicates colour of the shadow

shadowRadius = takes a value, will dictate how far out your shadow is from the View

shadowOpacity = value from 0 to 1, indicates how strong the shadow presence is.

Heres a quick example of something you probably want. This code will make a red circle, with a slight shadow visible at the bottom of the circle. This code is of course customizable.

<View style = {{
    position: 'absolute', top: 50, left: 50, 
    backgroundColor: 'red', width: 100, height: 100, borderRadius: 50,
    shadowColor: "black",
    shadowOffset: { height: 2},
    shadowOpacity: 0.3,
    }}>
    //CONTENT
</View>

Upvotes: 7

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

Wrap your Image inside View (for semantic clarity) and then define following style rules to the View:

shadow: {
  shadowColor: '#202020',
  shadowOffset: {width: 0, height: 0},
  shadowRadius: 5,
},

I made an example here: https://snack.expo.io/rJesdOgRZ. But atm "snack" is so freaking slow that it's difficult to check actual results. But at least the code is visible and works as a benchmark.

Upvotes: 10

Related Questions