React-native-fast-image: Image blinking when changing remote image source

[rudyryk]

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' },
      }}
    />);
  }
}

[roysG]

Me to.
But just only in android version 7.0

[DylanVann]

It may be the fade animation on android. There's an open issue for adding a feature for changing it / turning it off.

If that isn't it we can re-open this issue: https://github.com/DylanVann/react-native-fast-image/issues/170

[DylanVann]

Actually it seems like it probably isn't related, I'll try out the example, thank you

[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.