Improve performance of Image when there are multiple

[ozgurrgul]

Environment

1. react-native -v: 0.46.4
2. node -v: v7.7.2
3. npm -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>
        )
    }

[hramos]

This issue looks like a question that would be best asked on StackOverflow.

StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on StackOverflow.