A package that handles lazy image loading for React Native projects.

Usage no npm install needed!

<script type="module">
  import rnProgressiveImage from 'https://cdn.skypack.dev/rn-progressive-image';



An easy to use, stylistically customizable lazy-loader/progressive image display for react-natives image component.

Built with 🖤  by Quinton Chester.

Table of Contents

  • Install
  • Usage
  • Props
  • Animation Type Information
  • Contributing
  • Code Guidelines
  • License
  • Installation

    $ npm install patch-package rn-progressive-image

    Note: If you are going to use the default animation_type of reanimated, you must also follow these additonal installation instructions. Reanimated Installation Instructions for Android Reanimated Installation Instructions for iOS


    At the top of your file:

    import ProgressiveImage from 'rn-progressive-image'

    At the core, this is the simplest form of usage:

            small_source={{ uri: your_image_path_here }}
            large_source={{ uri: your_image_path_here }}


    Prop Default Required Description
    animation_library reanimated false The animation library that you would like to choose. At the moment, we make use of Reanimated and the built-in Animated API
    small_source true The source for the smallest image that will initially be blurred and animated out
    large_source true The source for the larger image that we will be lazily loading
    initial_blur_radius 3 false The initial blur amount for the small image. Only present until the large image has been loaded and animates in.
    use_native_driver true false Specify whether you would like to use the native driver for animations. Recommended to leave this untouched as true is the default value. This is only applicable if and when animation_library is animated
    style false The style of the image container. Images use StyleSheet.absoluteFillObject, so define your desired style here.
    animation_duration 350 false The transition duration. Only applicable when using reanimated or animated with type prop equal to timing.
    type timing false The type of animation to use. Either spring or timing.
    timing_config false The configuration for the Animated.timing (Animated API) animation.
    spring_config false The configuration for the Animated.spring (Animated API) animation.
    in_easing false Only applicable when using reanimated for animation_library, this is the easing that is applied as the small image fades out.
    out_easing false Only applicable when using reanimated for animation_library, this is the easing that is applied as the large image fades in.

    Animation Type Information

    If you're not familiar with either Reanimated no worries. I'm here to break down the benefits of either if you'd like. By default we use Reanimated. Reanimated is great because in React Native applications, all execution happens outside of the application's main thread. This helps prevent frame drops. However, event driven interactions are usually at least a single frame behind (sometimes more) since all of the updates are happening on a separate thread. Depending on how clean and well-structured your code is, this could mean that the animations are even further behind. Your JavaScript plays many roles, animation should be the last one we have to worry about (after all, we want the animations to happen immediately and feel super smooth). Reanimated takes care of all of that for us. Reanimated offloads animation and event handling logic off of the JavaScript thread and moves them onto the UI thread. Want to learn more about Reanimated? Visit their official docs here.


    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    Please follow the issue format outlined at the beginning of issue creation when creating a new issue. Additionally, please search through issues to see if your specific issue has already been mentioned, is currently being addressed, or has been fixed in an upcoming release.

    To contribute properly please use gitflow and semver standards as well as the code guidelines.

    1. Fork it.
    2. Create your feature branch: git checkout -b feature/feature-name
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin feature/feature-name
    5. Test code thoroughly.
    6. ????
    7. Submit a pull request

    Or open up an issue.

    Code Guidelines


    // React
    import { useEffect, useState, ... } from 'react';
    // Packages
    import PackageName from 'npm-package-name';
    // Custom Components
    import MyComponent from 'components/MyComponent/MyComponent'; 
    // Props
    import props from './props';
    // Style 
    import style from './style';
    // Utility Functions
    import performRequest from 'utility/performRequest';
    // App Constants
    import { APP_NAME } from 'constants/constants';

    Naming Conventions


    const myCustomFunction = () => {


    const myCustomFunction = () => {
      let this_is_a_variable;


    const myCustomFunction = (_this_is_a_parameter) => {


    Licensed under the MIT License.