DEV Community

loading...
Cover image for Image Blur Shadows for react-native app using this library

Image Blur Shadows for react-native app using this library

Vivek Verma
Programmer, Artist, Beautifying UI World.
Updated on ・2 min read

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 library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

react-native-image-blur-shadow

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

License: MIT Platform Javascript Version 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
shadowOffset number 38

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. ⭐

Discussion (0)

Forem Open with the Forem app