Improve performance of Image when there are multiple #15599
Description
Environment
react-native -v: 0.46.4node -v: v7.7.2npm -v: 4.1.2
Then, specify:
-
Target Platform: Android
-
Development Operating System: macOs
-
Build tools: Android SDK
Problem
I'm rendering multiple images (3-4) horizontally picked from gallery using react-native-image-picker. And putting them to <Image /> using base64 string. But after picking third photo, UI is not responding correctly and lagging so much. My android device has 4GB ram.
How can I improve this?
Reproducible Demo
constructor(props) {
super(props)
this.state = {
Photos: [null, null, null]
}
this.renderPhotosView = this.renderPhotosView.bind(this)
this.onPhotoSelect = this.onPhotoSelect.bind(this)
}
renderPhotosView() {
var self = this
var Photos = self.state.Photos
return (
<View style={{ flexDirection: 'row'}} >
{
Photos.map(function (photoBase64Data, i) {
return (
<TouchableOpacity
key={i}
onPress={() => {
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
return
}
self.onPhotoSelect(i, response.data)
})
}}
style={{
flex: 30,
backgroundColor: '#CCCCCC',
height: 100,
alignItems: 'center',
justifyContent: 'center',
margin: 5
}}
>
<View>
{
(photoBase64Data == null) ?
<Icon name="ios-add" /> :
<Image
source={{ uri: "data:image/jpeg;base64," + photoBase64Data }}
style={{ height: 100, width: 100 }}
/>
}
</View>
</TouchableOpacity>
)
})
}
</View>
)
}