react-native-image-blur-shadow

    1.0.2 • Public • Published

    react-native-image-blur-shadow

    A RN 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

    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 library 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

    Install

    npm i react-native-image-blur-shadow

    DownloadsWeekly Downloads

    9

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    42.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • virtualvivek