React Native Image Rendering

Hi, I am working on a demo app which allows users to upload pictures from their phone. What I have right now is an image picker that allows you to select multiple pictures at the same time. Every time you select a new picture, that picture will be displayed above the photo library.

Sometimes each photo has different size and ratio than the others. So I dynamically specify the size and uri to display the currently selected image.

The problem is that the image size will change first and the content of the image will change later. Now every time I selected a new image, there is always a flash, the previous image will shrink or stretch to the size of next picture first and then the image will change to next picture.

It is really frustrating and I don’t know what is causing this problem. If anyone has experience with this or have a solution, I would really appreciate that you can share with me.

Thanks!

Hi! Can you reproduce a small example of this behavior on https://snack.expo.io?

1 Like

Hi, yea of course, I just reproduced a small example of this behavior. Here is the link, https://snack.expo.io/HyrXrcIUW Would really appreciate your advice.

Thanks!

Thanks to @skevy for taking a look – he had a good suggestion for this. Looking at this bit of code:

        <View
          style={styles.photoPresent}
          onLayout={event => {
            var measuredWidth = event.nativeEvent.layout.width;
            if (!measuredWidth) {
              return;
            }

            this.setState({
              measuredSize: { width: measuredWidth, height: measuredWidth },
            });
          }}>
          {image && this.renderPicture(this.state.image)}

        </View>

        <View style={styles.library}>

          <CameraRollPicker
            callback={this.getSelectedImages.bind(this)}
            imagesPerRow={4}
          />

        </View>

I think that in your CameraRollPicker callback, you need to set the image to be invisible, and then set it back to being visible in the onLayout callback of the View at the top of the snippet I pasted.

Hi, thanks for the advice, so I set the image to be invisible and set it back to being visible in the onLayout callback of the view at the top. But I don’t see that function being executed except for the first time the page loaded. I am not familiar with this onLayout function callback and I’ve been searching for a couple of hours. Still could not figure this out. I reproduce the example with new changes. Any chance you can take a look and give me more advice? Thanks would really appreciate the help. This is the link https://snack.expo.io/SyIJTaUIb

onLayout is documented here: https://facebook.github.io/react-native/releases/0.46/docs/image.html#onlayout. It is invoked when the layout of the view changes. Since you never change the width and height of that view (look at its style), the onLayout callback is invoked only one time. You need to put onLayout on a view whose size will change.

Hi, I just wrapped the image within a view. So every time I pick a new image, the size for that view will be changed. In that case, onLayout would be invoked. But now I got this error Maximum call stack size exceeded. I am not sure how to handle this problem.

Would really appreciate your suggestion. Thanks for your time!

I reproduced a small example with new changes. Here is the link https://snack.expo.io/rJ9fnnwLb