README.md

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 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 component 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-24 Vivek Verma