React Native how replace image url on error?

Question

I have an app which displays multiple images which I load from the API. Now the problem is some of the images are expired which is causing a problem on Android, in Android the screen starts lagging as soon as the expired image loads on the screen.

I have tried replacing the image source with onError={() => this.imgRefs[img_unique_id].setNativeProps({src: [{uri: this.state.workingUri}]})} this method but its not working. I cannot use the local state as it is not saving the output in the local state.

I have tried the following code

  <Image  
      source={image.url} 
      progressiveRenderingEnabled={true}
      ref={item.id} 
      onError={(e) => this.refs[item.id].setNativeProps({source: [{uri: "working image URL"}]})} 
      resizeMethod={"scale"}>
   </Image>

The above code gives me an undefined setNativeProps error, and if I do not use the onError on android it shows me memory leak error.

just use `native-base` instead of raw react-native constructs, `native-base` `Image` has support for failed images by providing you prop `fallbackSource` or even `fallbackComponent` — Humoyun Ahmad, Nov 28 '21 at 13:10

akcoban · Answer 1 · 2019-04-17T12:45:25.287

Here is a complete example of that. To have own state for every FlatList item, I created a class.

import React, { Component, PureComponent } from 'react';
import { FlatList, Text, View, Image } from 'react-native';

class ItemClass extends PureComponent {
  state = {
    isImageExit: null
  }
  componentWillMount = () => {
    const { task } = this.props;
    Image.getSize(task.url, (width, height) => {
        if(width>0){
            this.setState({ isImageExit: true });
        }
        else{
            this.setState({ isImageExit: false });
        }
    }, () => {
      this.setState({ isImageExit: false });
    });
  }

  render() {
    const { isImageExit } = this.state;
    const { task } = this.props;
    const url = isImageExit ? task.url : 'https://dummyimage.com/600x400/000/fff';
    if (isImageExit === null) {
      return null;
    }
    return (
      <Image
        style={{ height: 200, width: 200 }}
        source={{ uri: url }}
      />
    );
  }
}

export default class App extends Component {
  render() {
    const data = [
      { url: 'url' },
      { url:'https://cdn.pixabay.com/photo/2017/08/05/18/53/mountain-2585069_1280.jpg' },
    ];
    return (
      <View style={{alignItems: 'center', top: 50}}>
          <FlatList
            data={data}
            renderItem={({ item }) => <ItemClass task={item} />}
          />
      </View>
    );
  }
}

your code worked perfectly, still the problem is same as soon as the error image comes into the view the app becomes slow. — Tushar Cheulkar, Apr 17 '19 at 12:39
Instead of waiting for the image to go into error state how can I use getSize for preload the image ? — Tushar Cheulkar, Apr 17 '19 at 12:41
Updated, maybe that's better? Firstly image.getSize will try to download and get the size of the image. While this working, nothing will render or you can render loading component or what you want. When getSize is finished, image will render too. — akcoban, Apr 17 '19 at 12:47
I implemented the change it is still slow it think the images are making the FlatList slow after load more. I tried without the images it works fine. — Tushar Cheulkar, Apr 17 '19 at 15:40

abhinandan sharma · Answer 2 · 2019-04-17T08:06:11.753

0

I think you should use data received from Api and set state accordingly inside componentWillReceiveProps because I think setting state is the best way to achieve this result. .

 this.setState = { image: { uri: 'image_uri_from_api' } }

Inside <Image> add -

 <Image style={ your_custom_style }
       source={ this.state.image }
       onError={ this.onError.bind(this) }
 />

Inside onError add this -

onError(error){
   this.setState({ image: require('your_local_image.path')})
 }

Hope it works now !

edited Apr 17 '19 at 08:06

answered Apr 17 '19 at 07:49

abhinandan sharma

853
6
12

It's react native not react web – gbalduzzi Apr 17 '19 at 07:50
thank you from letting me know. I have updated the answer accordingly. – abhinandan sharma Apr 17 '19 at 08:06
There are multiple images loading dynamically, how do I handle for that situation? – Tushar Cheulkar Apr 17 '19 at 08:48
yes I am using flatlist. On iOS it handled on the OS end on Android it creates a memory leak. – Tushar Cheulkar Apr 17 '19 at 09:05
Is there a way that I can pass a function in source which fetch the image first and according to size I can return the image or the your_local_image ?. – Tushar Cheulkar Apr 17 '19 at 09:26
you can try one thing if possible .inside render item method check for the width if its greater than 0 return else return – abhinandan sharma Apr 17 '19 at 09:52

React Native how replace image url on error?

2 Answers2