https://github.com/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.
https://github.com/virtualvivek/react-native-image-blur-shadow

android blurview component image image-blur-shadows image-component image-shadow ios javascript mobile react react-native react-native-component shadow

Last synced: 5 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/virtualvivek/react-native-image-blur-shadow
• Owner: virtualvivek
• License: mit
• Created: 2021-04-19T18:08:33.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-06-23T15:14:06.000Z (over 1 year ago)
• Last Synced: 2024-05-23T03:04:38.073Z (8 months ago)
• Topics: android, blurview, component, image, image-blur-shadows, image-component, image-shadow, ios, javascript, mobile, react, react-native, react-native-component, shadow
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-image-blur-shadow
• Size: 2.36 MB
• Stars: 89
• Watchers: 5
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
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

```ruby

$ npm install react-native-image-blur-shadow

```

## Import

```jsx

import ImageBlurShadow from "react-native-image-blur-shadow";

```

# Usage

```js

import ImageBlurShadow from "react-native-image-blur-shadow";

```

# 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](https://github.com/virtualvivek/react-native-image-blur-shadow/stargazers) for this repository. :star:

# License

**`react-native-image-blur-shadow`** is licensed under **`MIT license`**. View [license](https://github.com/virtualvivek/react-native-image-blur-shadow/blob/main/LICENSE). 


Copyright (c) 2021-24 [Vivek Verma](https://github.com/virtualvivek)