animated-lazy-image

    1.0.1 • Public • Published
    Example usage of LazyImage component

    Lazy Image

    React Native image component with animated lazy loading. Demo 👉Expo Snack.

    Install

    npm i animated-lazy-image -S

    or,

    yarn add animated-lazy-image

    Usage

    Props:

    1. source - Image source
    2. placeholderColor - Placeholder background color, if it is not provided, it will fallback to #e3e3e3
    3. customPlaceholder - Custom placeholder component
    import LazyImage from 'animated-lazy-image';
     
      /**
       * Base example
       */
      <LazyImage
        source="https://images.unsplash.com/photo-1551148552-c19ee5b0c116?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2733&q=80"
      />
     
      /**
       * With custom placeholder background color
       */
      <LazyImage
        source="https://images.unsplash.com/photo-1551148552-c19ee5b0c116?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2733&q=80"
        placeholderColor="#f74b59"
      />
     
      /**
       * With custom placeholder component
       */
      <LazyImage
        source="https://images.unsplash.com/photo-1551148552-c19ee5b0c116?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2733&q=80"
        customPlaceholder={<CustomComponent />}
      />

    TODO

    • Provide tests
    • Improve loading performance (trigger image load when it arrives in the viewport)

    Suggestions?

    Shoot me an email, or submit an issue 🚀

    Install

    npm i animated-lazy-image

    DownloadsWeekly Downloads

    18

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    5.61 kB

    Total Files

    4

    Last publish

    Collaborators

    • danijel_grabez