loading...

A better Image component for React Native

dani_akash_ profile image Dani Akash πŸ§ͺπŸ’₯ Updated on ・1 min read

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

Posted on by:

dani_akash_ profile

Dani Akash πŸ§ͺπŸ’₯

@dani_akash_

A React Developer who builds open source libraries for fun. You might actually like them! πŸ˜‰

Discussion

pic
Editor guide
 

I like your idea. Pretty good!

 
 

That's a good idea Dani.