As Drop Shadows and animations are the new trend for the apps, iOS native already give their Image Component a bunch of customization which looks great, the similar feature needs to implement in the react-native platform so that the boundaries can be filled.
This library react-native-image-blur-shadow gives the same iOS like image blur shadow effect for react-native environment.
This is how it look's like
Demo
snack.expo.io/@virtualvivek/image-blur-shadow
Repository
virtualvivek
/
react-native-image-blur-shadow
A React Native <Image/> component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight Image component for your react native project.
react-native-image-blur-shadow
A React Native <Image/> component with Blur Drop Shadows, 100% JavaScript, 0 Dependency component.
Supports Android, iOS and Web
Demo
https://snack.expo.io/@virtualvivek/image-blur-shadow
Installation
$ npm install react-native-image-blur-shadow
Import
import ImageBlurShadow from "react-native-image-blur-shadow";
Usage
import ImageBlurShadow from "react-native-image-blur-shadow";
<ImageBlurShadow
style={styles.img}
source={require('./src/assets/spiderman.jpg')}
imageWidth={220}
imageHeight={220}
imageBorderRadius={22}
shadowOffset={38}
shadowBlurRadius={48}
shadowBackgroundColor={'#ffffff'}
/>
Props
Property
Type
Default
Description
style
object
{}
set the style of component container
source
string
null
set the image source
imageWidth
number
default
set image width
imageHeight
number
default
set image height
imageBorderRadius
number
0
set image border radius
imageFadeDuration
number
300
set image fade animation duration in
Installation
$ npm install react-native-image-blur-shadow
Import
import ImageBlurShadow from 'react-native-image-blur-shadow';
Usage
import ImageBlurShadow from 'react-native-image-blur-shadow'
<ImageBlurShadow
style={styles.img}
source={require('./src/assets/spiderman.jpg')}
imageWidth={220}
imageHeight={220}
imageBorderRadius={22}
shadowOffset={38}
shadowBlurRadius={48}
shadowBackgroundColor={'#ffffff'}
/>
Props
| Property | Type | Default | Description |
|---|---|---|---|
| style | object | {} |
set the style of component container |
| source | string | null | set the image source |
| imageWidth | number | default | set image width |
| imageHeight | number | default | set image height |
| imageBorderRadius | number | 0 | set image border radius |
| imageFadeDuration | number | 300 | set image fade animation duration in ms |
| shadowOffset | number | 38 | set/override shadow offset |
| shadowBlurRadius | number | 34 | set/override shadow blurRadius |
| shadowBackgroundColor | HexColor | #ffffff |
set/override shadow background color |
| shadowFadeDuration | number | 300 | set shadow fade animation duration in ms |
Find this library useful? ❤️
Support it by joining stargazers for this repository. ⭐
Top comments (1)
Thank you for this post.
Very useful 🎉