react-native-better-image

A better image component for react-native with fallback images & progressive loading support

Stats

stars 🌟issues ⚠ī¸updated 🛠created đŸŖsize 🏋ī¸â€â™€ī¸
902Jan 17, 2021Aug 26, 2020Minified + gzip package size for react-native-better-image in KB

Readme

better-image-logo

React Native Better Image

A better image component for react-native with fallback images & progressive loading support

Built on top of View, Image & Animated components

Build Status Maintainability Test Coverage

Version Downloads Bundlephobia

Star on GitHub Watch on GitHub Twitter Follow

donate sponsor support

Storybook Chromatic

better-image-cover

Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨

Installation

yarn add react-native-better-image

#or

npm install react-native-better-image

Usage

import BetterImage from 'react-native-better-image';

// ...

<BetterImage
  viewStyle={style}
  source={{
    uri: // image uri
  }}
  thumbnailSource={{
    uri: // thumbnail uri - will be displayed till image is loaded
  }}
  fallbackSource={{
    uri: // fallback image if original image fails to load
  }}
  // ...all other react-native image props
/>

Motivation

React Native only includes a basic image component. I used to try solutions like react-native-fast-image but none actually worked for the two of my most important issues:

  • Lack of a fallback placeholder
  • Progressive image loading (especially for banners & cover images)

This library solves two of these important issues by providing a fallbackSource & a thumbnailSource prop. If you need more features, feel free to raise an issue or send a PR ✨ I'd be happy to help 👍

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT Š DaniAkash

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.