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-shadowImport
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 |
Advance Props
| Property | Type | Default | Description |
|---|---|---|---|
| defaultSource | object | {} |
set the default image source iOS |
| onLoad | object | {} |
on Image Load Callback |
| onError | object | {} |
on Image Error Callback |
| onLoadStart | object | {} |
on Image Load Start Callback |
| onLoadEnd | object | {} |
on Image Load End Callback |
| onProgress | object | {} |
on Image Load Progress Callback |
| onPartialLoad | object | {} |
on Image Partial Load Callback |
| imageBorderTopLeftRadius | number | 0 | set image top left border radius |
| imageBorderTopRightRadius | number | 0 | set image top right border radius |
| imageBorderBottomLeftRadius | number | 0 | set image bottom left border radius |
| imageBorderBottomRightRadius | number | 0 | set image bottom right border radius |
Find this library useful? ❤️
Support it by joining stargazers for this repository.
License
react-native-image-blur-shadow is licensed under MIT license. View license.
Copyright (c) 2021 Vivek Verma