facebook/react-native#17801 using React Native 0.52
<Image>
take up too much memory
git clone git@github.com:1c7/react-native-image-memory-problem-demo-app.git
cd react-native-image-memory-problem-demo-app
npm install
react-native run-android
by the way, you can just drag image into Android Emulator.
import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View, Button, FlatList, Image} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
export default class App extends Component<{}> {
constructor(props){
super(props);
this.state = {
img_list: []
}
}
chooseImage() {
ImagePicker.openPicker({
multiple: true,
mediaType: 'photo',
}).then(images => {
console.log(images);
for (var i = 0; i < images.length; i++) {
this.setState({ img_list: [images[i], ...this.state.img_list] })
}
}).catch((error)=>{
alert('something wrong');
})
};
_renderItem(item, index){
return (
<View key={index} style={styles.listItemContainer}>
<Image
style={{ height: 77, width: 77, borderRadius: 6 }}
source={{ isStatic: true, uri: item.item.path }}
resizeMode='cover'
/>
</View>
)
}
render() {
return (
<View style={styles.container}>
<Button uppercase={false} title='chose image' onPress={() => this.chooseImage()}></Button>
<Text>total {this.state.img_list.length} image</Text>
<FlatList data={this.state.img_list} renderItem={this._renderItem} style={{flex: 1}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
listItemContainer:{
justifyContent: 'center',
alignItems: 'center',
borderColor:'red',
borderBottomWidth: 1,
}
});
When App start, it take about 50MB memory
Let's select one image
now it take 64.5MB. What?
3 image == 79.75MB
Let's select 63 more image
growing..
now it take 375MB memory
let's crash this app by select more image
379MB
617MB
650mb
it Crash adround 700MB memory