Image blinking when changing remote image source

Consider the following case: display preview image from camera. Preview is refreshed every 2 seconds. We get image blinking every 2 seconds when replacing the image source:

class CameraPreview extends Component {
  constructor(props) {
    super(props);
    this.refreshInterval = null;
    this.state = {previewURL: 'http://via.placeholder.com/1280x720'};
  }

  componentDidMount() {
    this.refreshInterval = setInterval(() => {
      const timestamp = new Date().getTime();
      this.setState({previewURL: `http://via.placeholder.com/1280x720?t=${timestamp}`});  
    }, 2000);
  }

  componentDidUnmount() {
    clearInterval(this.refreshInterval);
    this.refreshInterval = null;
  }

  render() {
    return (<FastImage style={styles.previewImage}
      source={{
        uri: this.state.previewURL,
        headers:{ Authorization: 'someAuthToken' },
      }}
    />);
  }
}

[jpmazza]

+1

[alubeck]

Hi there,

just checked out this library here, to get rid of this blinking issue using the built-in <Image> component, but… no success 😦 . The problem issued here still appears… on iOS and anroid. Any advices, thoughts?

Thanks in advance.