Image Loading Twice

[drewg233]

Hello, I am not sure if I am doing something wrong, but basically I noticed images are loading twice before being presented. So in my case I see a flash of white in between showing the placeholder and the actual image.

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoaded: false };
  }

  handleLoad(event) {
    console.log(event.nativeEvent.loaded === event.nativeEvent.total)
  }

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

    return (
      <View style={styles.container}>
      <ShimmerPlaceHolder
        width={200}
        height={200}
        style={{ width: 200, height: 200, borderRadius: 100 }}
        visible={isLoaded}
        backgroundColorBehindBorder={'white'}
      >
        <Image
          style={{ width: 200, height: 200, borderRadius: 100 }}
          source={{ uri: 'https://images.pexels.com/photos/2082087/pexels-photo-2082087.jpeg?cs=srgb&dl=apartment-bed-bedroom-2082087.jpg&fm=jpg' }}
          onLoad={() => { this.setState({ isLoaded: true }); }}
          onProgress={ this.handleLoad.bind(this) }
        />
      </ShimmerPlaceHolder>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

As you can see I added an onProgress on the image that only logs if the image is done loading. If you run the above code you can see false 266 times, then a true, then you see false again another 266 times and then another last true

[tomzaku]

@drewg233 Did you find the solution of this problem.

[tomzaku]

Has been fixed by this PR: https://github.com/tomzaku/react-native-shimmer-placeholder/releases/tag/v2.0.6