DEV Community

Dani Akash 🧪💥

Posted on Sep 5, 2020 • Edited on Sep 17, 2020

A better Image component for React Native

#showdev #reactnative #expo #react

Introducing a better image component for React Native!

React Native only includes a basic image component. However, I always needed two very important functionalities on the Image component:

A fallback image if the original source fails to load
Progressive image loading (especially for banners & cover images)

So I customized the existing <Image/> component and have been using this <BetterImage/> component in my projects. Today, I'm open-sourcing my component to receive feedbacks & ideas from the community.

Do try it out at react-native-toolkit/react-native-better-image

react-native-toolkit / react-native-better-image

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

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

Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨

📦 Installation
ℹ️ Usage
📃 Documentation
✨ Motivation
📱 Example App

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
/>