UniversalImage

An auto sizing image component with progressive loading for react native.

Image component that resizes itself to contain the image. Progressively loads image with blur effect and spinner overlay.

Note: For auto resize, please make sure your thumbnails are the same aspect ratio as the original image.

Installation

Since the library is a JS-based solution, to install the latest version of react-native-universal-image you only need to run:

yarn add react-native-universal-image

or

npm install --save react-native-universal-image

Use Cases

• Rendering remote images with variable dimensions.
• Building a feeds / timeline screen ?
• Leverage progressive loading for a performant UI.
• Looking for an instagram like animation for your images ?
• Default resize modes (cover / contain) don't provide what you are looking for?

Usage

import UniversalImage from 'react-native-universal-image';

<UniversalImage
    indicator
    indicatorColor="#1AD2EF"
    indicatorSize="large"
    defaultHeight={350}
    imageFadeDuration={3000}
    thumbnailFadeDuration={1000}
    thumbnailBlurRadius={1}
    imageSource={{ uri: IMAGE_URL }}
    thumbnailSource={{ uri: THUMBNAIL_URL }} />

Properties

| Prop | Description | Default | Required | |---|---|---|---| | indicator | Spinner overlay on image | false | | indicatorColor | Color of spinner component | None | | indicatorSize | Size of spinner component ('small', 'large') | None | | defaultHeight | Default height of the component while the thumbnail is being loaded | 350 | | thumbnailSource | Provide a low resolution version of the image used in imageSource. | None | Required | | imageSource | Original image uri| None | Required | | thumbnailBlurRadius | Blur radius for the low resolution thumbnail. | None | | imageFadeDuration | Fade-in duration for the image in ms. | None | | thumbnailFadeDuration | Fade-in duration for the thumbnail in ms. | None | | onLoadThumbnail | Callback function that gets called when the thumbnail is loaded. | noop | | onLoadImage | Callback function that gets called when the main image is loaded. | noop |

Contributing

Interested in contributing to this repo? Feel free to raise a pull request or report an issue at react-native-universal-image.