A React Native <Image/> component with Blur Drop Shadows, 100% JavaScript, 0 Dependency component.
Supports Android, iOS and Web.
https://snack.expo.io/@virtualvivek/image-blur-shadow
$ npm install react-native-image-blur-shadowimport ImageBlurShadow from "react-native-image-blur-shadow";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'} />| 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 |
| 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 |
Support it by joining stargazers for this repository. ⭐
react-native-image-blur-shadow is licensed under MIT license. View license.
Copyright (c) 2021-24 Vivek Verma
