DEV Community

Dani Akash πŸ§ͺπŸ’₯
Dani Akash πŸ§ͺπŸ’₯

Posted on • Updated on

A better Image component for React Native

Introducing a better image component for React Native!

Alt Text

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

GitHub logo react-native-toolkit / react-native-better-image

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

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

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 πŸ‘

Discussion (4)

Collapse
developerantoniosousa profile image
Antonio Sousa

I like your idea. Pretty good!

Collapse
dani_akash_ profile image
Dani Akash πŸ§ͺπŸ’₯ Author

Thanks :D

Collapse
monfernape profile image
Usman Khalil

That's a good idea Dani.

Collapse
dani_akash_ profile image
Dani Akash πŸ§ͺπŸ’₯ Author

Thanks. 😁