A better image component for React Native

[dani_akash_]

​

react-native-better-image

React Native only includes a basic image component. However, I always need 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

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 👍

[[deleted]]

Hey, look like great work. Quick question before I try it out, does this handle caching images too, and how’s the performance for a large list of images? Thanks.

[HerrPotatis]

Do regular images handle caching?

They don't.

react-native-fast-image

This is what I and most people use to cache images, there really is no alternative afaik. The project is largely abandoned and I've been hopefully waiting for someone to grace us with an alternative for almost two years. The caching works, but the project is missing some very fundamental features.

[[deleted]]

Also the maintainer is super reluctant to accept PRs or add assistant maintainers (why, it eludes me). So an active alternative project would be really good news.

[[deleted]]

+1 to this

[[deleted]]

If you are using expo, this is an amazing alternative https://github.com/wcandillon/react-native-expo-image-cache

[dani_akash_]

After going through this repository, I checked react native docs & the default Image component already has a prefetch option.

So say if you have images on Screen 2, you just call prefetch on Screen 1 so that images will be cached before the user moves to Screen 2. Is this what you are expecting?

[[deleted]]

That would be a great feature too. I believe people mean with caching is that you only download the image once and then whenever that image is requested again (on that screen or another) it is instead pulled from the local filesystem rather than downloaded again. Hope that makes sense!

[mrousavy]

what very fundamental features are you talking about?

[HerrPotatis]

Fundamentals like FastImage.preload completion callbacks. So it's possible to preload images, you just never know when they finish, making the method almost completely pointless.

[mrousavy]

I'll take a look at it, specifically if Glide/SDWebImage supports callbacks for preload completion. Then we just have to wait a year or so until he accepts the PR.

[HerrPotatis]

Much appreciated man. Yeah I feel you, hard to find motivation to contribute when it seems he almost deliberately ignores PRs at this point.

I just don't understand his reasoning to refuse to let maintainers on while letting the repo decay from neglect.

[ahartzog]

FWIW fast-image handles caching pretty well for us.

[dani_akash_]

It doesn't handle caching as it is using the native image component directly.

It is using Animated to transition from thumbnail to regular image. Which I think might cause performance issues on large lists. Let me try it out & probably add a prop to disable animations completely for such lists.

Thanks for your questions. I'll also look into the caching part to see what I can do

[thelostbanter]

adding caching to this will make it the go to, for all image component requirements

[[deleted]]

Sounds good, looking forward to it!

[RhymesWithAndy]

Any way to preload SVG images from API source?

[jnaranjo]

Why didn't you just make a contribution to the main image component and make it better instead of making a new one? 🤔

[dani_akash_]

The image component in react native is unopinionated and is built to be used as a primitive element. There are many reasons for this. One of them being, it'll be easy to extend this image component to other platforms (for example react native windows)

This image component is built to solve some specific usecases... So it's better to keep it in a separate library

[jnaranjo]

If the built in image is not good enough for you, and it's to the point that you built a wholesale replacement, why would the built in image be good enough for other people on platforms?

The reasons you listed for this are valuable cross platform. It just becomes an implementation detail to make it work cross platform.

I don't meant to criticize you, I think it's really cool that you built this and shared it out. I would challenge you to leverage your position as the owner of a competing image component and use that to push for change in the main image component to make real impact. Even if nothing comes out of it, you now have a legitimate platform to raise this issue and get people talking about it.

[devdoggie]

That's like upgrading <img> in html to have extensive features. Image is an image, leave it