CODEWITHSUNDEEP
reactjsreact-native
nicholas
nicholas

Reputation: 14593

React Native Images disappearing when returning from background

The title kind of says it all. When returning to my React Native app after it's been running in the background for a while, all (or at least some) Image element pointing to external uris will go blank.

Thinking that's it might be iOS taking the app's memory away, I've tried to make the app rerender - and reload those images - when it becomes active with:

React.AppStateIOS.addEventListener('change', (newState) => {
    if(newState === "active") {
        this.forceUpdate();
    }
});

But while it does rerender, it doesn't reload the images.

What's going on here?

Upvotes: 5

Views: 4601

Answers (1)

jawang35
jawang35

Reputation: 197

I had this same issue specifically with GIFs. It looks like this is a bug with React Native as reported here:

https://github.com/facebook/react-native/issues/4606

I hacked up a workaround where I am storing the AppState:

constructor(props) {
  super(props);
  this.state = {
    appState: 'active'
  };
  AppState.addEventListener('change', newState => this.setState({ appState: newState }));
}

And then I only render the image with the correct source when the AppState is active so that when it goes into inactive or background the Image is blank and is forced to rerender when moving back into active:

render() {
  return <Image source={{ uri: this.state.appState === 'active' ? this.props.imageUrl : '' }} />;
}

The actual code I'm using is a bit different since I'm using redux to handle my app state but this should work the same.

Upvotes: 5

Related Questions