Show loader until live link image does not load completely React native 0.58

Question

I am receiving a JSON array from an api where images have a live link. So, after the success I am rendering the data, problem is I want to show an gif until the images load completely.

The array is:-

[{
    "category": "Loose Flower",
    "id": "7",
    "product_name": "Drb,Tls,Blpt,Nlknt",
    "unit_price": "0",
    "img_path": "http://prabhujionline.com/bo/upload/product_img/[email protected]",
    "count": 0,
    "is_loaded": true
  },
  {
    "category": "Loose Flower",
    "id": "1",
    "product_name": "Genda",
    "unit_price": "0.5",
    "img_path": "http://prabhujionline.com/bo/upload/product_img/1513947159genda.png",
    "count": 0,
    "is_loaded": true
  }]

<Image
 style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
 source={(this.state.singlepack.is_loaded) ? { uri: 
 this.state.singlepack.img_path } : 
 require('../../../../assets/flower-loader.gif')}
  onLoadStart={(e) => { 
     this.changeImageLoadStatusOnStart(this.props.singleData.id) }}
  onLoadEnd={(e) => 
  this.changeImageLoadStatusOnEnd(this.props.singleData.id) }
 />


changeImageLoadStatusOnStart = (id)=>{
        this.setState({
            singlepack: {
                ...this.state.singlepack,
                is_loaded : false
            }
        })
    }

    changeImageLoadStatusOnEnd = (id) => {
        this.setState({
            singlepack: {
                ...this.state.singlepack,
                is_loaded: true
            }
        })
    }

I have tried the onLoadStart and onLoadEnd but I am unable to make the logic, can I have some help?

Loaning

I am still hoping for a solution to this. Since defaultSorce and loadingIndicatorSource is not working properly. – Purchasable

Answer 1

defaultSource and loadingIndicatorSource is not working properly. I found a solution

const loaderImage = require('./../assets/img/spinner.png');
var {width} = Dimensions.get('window');

this.state = {
  imageloading: true,
};

_renderItemFood(item) {
    return (
      <TouchableOpacity
        style={styles.divFood}>
        <Image
          style={styles.imageFood}
          resizeMode="contain"
          source={{uri: 'https://api.example.com/images/' + item.image}}
          onLoadEnd={e => this.setState({imageloading: false})}
        />
        {this.state.imageloading && (
          <Image
            style={styles.imageFood}
            resizeMode="contain"
            source={loaderImage}
          />
        )}
        <Text>Some Product name</Text>
      </TouchableOpacity>
    );
  }

  const styles = StyleSheet.create({
    imageFood: {
      width: width / 2.5 - 20 - 10,
      height: width / 2.5 - 20 - 30,
      backgroundColor: 'transparent',
      position: 'absolute',
      top: -45,
    },
    divFood: {
      width: width / 2 - 20,
      padding: 10,
      borderRadius: 10,
      marginTop: 55,
      marginBottom: 5,
      marginLeft: 10,
      alignItems: 'center',
      elevation: 8,
      shadowOpacity: 0.3,
      shadowRadius: 50,
      backgroundColor: 'white',
    },
  });

Out

Answer 2

Try this:

class YourComponent extends React.Component {
  render() {
    return data.map(({ img_path }) => (
      <Image
        style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
        source={{ uri: img_path }}
        loadingIndicatorSource={{
          uri: require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}

}

OR THIS

class YourComponent extends React.Component {
  state = {
    imgsLoaded: data.map(() => false),
  };

  componentDidMount() {
    for (let i = 0; i < data.length; i++) {
      Image.prefetch(data[i].img_path, () => {
        const { imgsLoaded } = this.state;
        const imgsLoadedUpdated = imgsLoaded.slice();
        imgsLoadedUpdated[i] = true;
        this.setState({ imgsLoaded: imgsLoadedUpdated });
      });
    }
  }

  render() {
    const { imgsLoaded } = this.state;

    return data.map(({ img_path }, index) => (
      <Image
        source={{
          uri: imgsLoaded[index]
            ? img_path
            : require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}

Jarv