Memory leak when programmatically changing 'source' prop of Image

Description

If you use an Image component in render and use the parent component's state to manage the source prop, each time the source is changed the previous source is not deallocated. Even when the parent component is unmounted, the previous images still use memory.

Reproduction

I've made a simple ImageTest project that demonstrates the bug. (IMPORTANT: run app in release mode to experience the issue)

Code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  Dimensions,
} from 'react-native';

import image0 from './images/0.png'
import image1 from './images/1.png'
import image2 from './images/2.png'
import image3 from './images/3.png'
import image4 from './images/4.png'

const images = [
  image0,
  image1,
  image2,
  image3,
  image4,
]

export default class ImageTest extends Component {
  constructor() {
    super()

    this.state = ({
      counter: 0,
    })
  }

  increment = () => {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  render() {
    const imageSource = images[this.state.counter]

    return (
      <View>
        <Image
          source={imageSource}
          style={styles.image}
        />
        <TouchableHighlight onPress={this.increment} style={styles.highlight}>
          <Text style={styles.text}>NEXT IMAGE</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const window = Dimensions.get('window')

const styles = StyleSheet.create({
  highlight: {
    backgroundColor: 'yellow',
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
  text: {
    fontSize: 50,
  },
  image: {
    width: window.width,
    height: window.height,
  },
});

AppRegistry.registerComponent('ImageTest', () => ImageTest);

Solution

Presumably when the source is changed the underlying UIImage/UIImageView needs to be destroyed.

Additional Information

• React Native version: 0.41.0
• Platform: iOS
• Operating System: MacOS 10.12.3 / xcode 8.2

Beginne mit der verknüpften ImageTest-Reproduktion und führe sie im iOS release mode aus, wobei du die source prop der Image component änderst und den Speicher beobachtest. Verfolge die native iOS-Verarbeitung von Änderungen an source durch die Image component; als erledigt gilt die Aufgabe, wenn vorherige Bilder nach den Änderungen und nach dem Unmounten der parent component freigegeben werden.