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.
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
- 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?
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 }} />
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 |
Interested in contributing to this repo? Feel free to raise a pull request or report an issue at react-native-universal-image.