[Image] Old images on Movies example app listings

[jchris]

To reproduce, search for a movie and browse into it, then back out of the movie view to the search, then delete your search terms by holding down the delete key (on your laptop while running in simulator). It seems to be timing dependent but with a few tries I was able to generate the screenshots below.

Maybe this is throttling from the data API? Maybe caching would help?

[vjeux]

(There's probably a bug here but let me digress a bit with a general problem here. cc @a2)

When you have <Image source={a} /> and then render <Image source={b} />, while the new source is being loaded, what should we do.

• Blank: The "correct" response is to blank out the image, then when b is loaded and decoded update the image. The big issue with this solution is that your UI is going to flash all the time leading to a very ugly end user experience.
• Keep a: The better user experience is to keep a around for the few milliseconds and when b is ready then display b. This avoids the flash and is fine as long as it doesn't take too long.

What's interesting is that on the web, there's actually both behaviors implemented. <img> tag keeps a while background-image blanks out.

We haven't made a concrete decision on this one yet and I'm unsure what's the current behavior, but this behavior is worth thinking about.

[jchris]

Maybe keep a around to make a smooth transition to b, but with a timeout where it transitions to a loading / can't load indicator if it hangs around too long?

[vjeux]

Good idea :)

[sophiebits]

The "keep a" experience is probably better at an infrastructural level because you can always get the "blank" way by adding a key to the Image equal to the src.

@vjeux I've tried using <Image defaultSource=... /> to show some kind of a loading placeholder image, but it shows the old image indefinitely. I'll get a minimal repro set up for you.

Meanwhile is there workaround we can use to blank the image and force loading the correct one?

workaround

/* @flow */
'use strict';

var React = require('react-native');
var { Image } = React;

// Hack to work around https://github.com/facebook/react-native/issues/89
//
// Render an <Image /> normally.
// When react reuses the component with a new url, force react to render a
// blank image once before rendering the correct url later.

var DelayedImage = React.createClass({
  propTypes: Image.propTypes,
  getInitialState(): { showImage: boolean } {
    return { showImage: true };
  },
  componentWillReceiveProps: function(nextProps: any) {
    if(this.props.source.uri != nextProps.source.uri) {
      this.setState({ showImage: false });
      setTimeout(() => this.setState({ showImage: true }), 0);
    }
  },
  render: function(): React.Component {
    return <Image {...this.props} source={{uri: this.state.showImage ? this.props.source.uri : null}} />
  },
});

module.exports = DelayedImage;

[brentvatne]

The issue here now is that the images change but the text does not

@vjeux - who is the owner of ListView?

[sophiebits]

Probably an Image issue; I can't imagine it being specific to ListView.