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? :heart:

Support it by joining stargazers for this repository. :star:

License

react-native-image-blur-shadow is licensed under MIT license. View license. Copyright (c) 2021 Vivek Verma