Error while updating property 'source' of a view managed by: FastImageView

[WrathChaos]

Describe the bug

This is the duplication of #27. After almost 3 years and so many RN versions. This issue stuck with me... I really want to use FastImage on my every project but this source issue stays with me. Not only my own device, but every of the other developers also suffers from this bug.

To Reproduce
Steps to reproduce the behavior if possible, or a link to a reproduction repo:
Simply install this library, with autolinking or even with manual linking both Android has this issue.

Expected behavior
Just works

Screenshots

Android Studio

React Native Device

Dependency versions

• React Native version: 0.61.5
• React version: 16.12.0
• React Native Fast Image version: 7.0.2

Please at least help me to fix this issue. Thank you @DylanVann

[WrathChaos]

Still could not use this lib :(

[Prakosa]

is there any update for this issue?

[akhatriST]

I was facing the same problem, the fix that I use is simple. Atleast it worked for me.

Images from web:

You need to make sure that the url that you are setting in source is a valid url i.e. it starts with http or https

Images from local:

You need to make sure that it is a valid uri of the local image that you want to display.

Hope it helps.

[WrathChaos]

@akhatriST unfortunately, this part should check into the library itself.

[AbanoubNassem]

this issue still persisted even in the latest version on android!!!

[cr0ybot]

I'm having a similar issue, except I've made sure that the URLs are valid. I get a slightly more descriptive error, You must not call setTag() on a view Glide is targeting:

I'm trying to figure out if this is happening because of list items being re-rendered or if it's something else.

[WrathChaos]

I'm still having this issue with 8.3.2 version of FastImage. @DylanVann Can you help us?

[WrathChaos]

I got the solution:

Solution

normalisedSource = () => {
    const { source } = this.props;
    const normalisedSource =
      source && typeof source.uri === "string" && !source.uri.split("http")[1]
        ? null
        : source;
    return this.props.source && this.props.source.uri
      ? normalisedSource
      : source;
  };

Usage

<FastImage
     source={this.normalisedSource()}
/>

I still believe that this solution should be handled by the library itself but Dylan did not even answer us :) Anyway, here is the solution.

I used this solution on a big project and a library:
https://github.com/WrathChaos/react-native-progressive-fast-image

[wmonecke]

I think this bug deserves to be pinned.

[EliseiNicolae]

You can try like this:
// ❗ this const must be global (outside of export default function)

const heartIcon = require('assets/icons/heart-outline.png');

        <FastImage
          style={{ width: 200, height: 200 }}
          source={heartIcon}
          resizeMode={FastImage.resizeMode.contain}
        />

[arahisman]

If you encounter this error and your source is a uri, you most likely made a mistake in the link: Check that it opens in a browser and (!!!)begins with hhtp:// or https://
I can assume that "null" in this case means failure to open the image from the source (import returns null)

[KishorJena]

only local images are not being shown. https and require works fine but the 'file:///' does not work. (eg.:file:///storage/emulated/0/Pictures/Screenshots/Screenshot_20231208-192601.png)

log

ReactImageView: Image source "null" doesn't exist