A better Image component for React Native

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
  containerStyle={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…

View on GitHub

I have also created a storybook with detailed docs at betterimage.netlify.app

What other features do you think are essential for the Image component? Share your ideas & I'll be happy to help 👍

Comments

[Antonio Sousa]

I like your idea. Pretty good!

[Dani Akash 🧪💥]

Thanks :D

[Usman Khalil]

That's a good idea Dani.

[Dani Akash 🧪💥]

Thanks. 😁