react-native-image-blur-shadow

1.0.4 • Public • Published

react-native-image-blur-shadow

A React Native <Image/> component with Blur Drop Shadows, 100% JavaScript, 0 Dependency component.
Supports Android, iOS and Web.

Platform Javascript
Version GitHub code size in bytes NPMJS

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

Dependents (0)

Package Sidebar

Install

npm i react-native-image-blur-shadow

Weekly Downloads

3

Version

1.0.4

License

MIT

Unpacked Size

41.5 kB

Total Files

5

Last publish

Collaborators

  • virtualvivek