Search code examples
imagereact-nativeshadowblur

React Native Image Shadow Color

I'm working on a mobile app with React-Native and I need to implement a new component.

The exemple :

enter image description here

So, my question is, how can i add this shadow / blur image on my component ?

I know how to make a blur on an image but how can i do this effect?

Thanks

Solution

  • so,basically you work with two images, opacity, blurRadius and position absolute.

    try :

    <View style={{elevation:12, position:'absolute', left:100, top:100, elevation:12, borderRadius:50, borderWidth: 1, borderColor:'rgba(255, 255, 2555, 0.4)',  overflow: 'hidden',  opacity:0.3}}>
    <Image blurRadius={10} style={{width:300, height:150}} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>            
<View style={{position:'absolute', left:95, top:90, borderRadius:50, borderWidth: 0, borderColor:'rgba(255, 255, 2555, 0.4)',   overflow: 'hidden'}}>
    <Image style={{width:300, height:150, }} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>