DEV Community

Cover image for Image Blur Shadows for react-native app using react-native-image-blur-shadow
Vivek Verma
Vivek Verma

Posted on • Updated on

Image Blur Shadows for react-native app using react-native-image-blur-shadow

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

react-native-image-blur-shadow

Demo

snack.expo.io/@virtualvivek/image-blur-shadow

Repository

GitHub logo 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

License: MIT 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
Enter fullscreen mode Exit fullscreen mode

Import

import ImageBlurShadow from 'react-native-image-blur-shadow';
Enter fullscreen mode Exit fullscreen mode

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'}
  />
Enter fullscreen mode Exit fullscreen mode

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

Installation

$ npm install react-native-image-blur-shadow
Enter fullscreen mode Exit fullscreen mode

Import

import ImageBlurShadow from 'react-native-image-blur-shadow';
Enter fullscreen mode Exit fullscreen mode

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'}
  />
Enter fullscreen mode Exit fullscreen mode

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


npmJS

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐

Top comments (1)

Collapse
 
oladapodaniel profile image
Oladapo Daniel

Thank you for this post.
Very useful 🎉