Vfrdtyky

I'm having this weird problem with a ScrollView where some images are appearing, some are not, and it appears to be at random. I'm using android emulator for testing.

I have this very large list of profiles with images attached. I'm showing those in a FlatList like this:

    ......

    renderItem = ({ item }) => (   

    item == null || item.person == null || item.person.name == null

    ?     

    <Text/>

    :

    <ListItem

        title={item.person.name }

        subtitle={ this.getAge(item.person.birth_date)}            

        avatar={<Avatar

            medium

            rounded                

            source={ {uri: item.person.photos[0].url}}

            onPress={() => this.props.navigation.navigate('MatchImageList',

                {

                    images: item.person.photos

                }

            )}

            title={item.person.name}

          />}            

        hideChevron

    />

)



keyExtractor = (item, index) => index.toString();



render(){                

    const matches = this.state.matchArray;                

    return(            

        <FlatList

            keyExtractor={this.keyExtractor}

            data={matches}

            renderItem={this.renderItem}

        />                      

    )  

}

When you click the Avatar, we pass in some photo data to our component:

export default class MatchImageList extends React.Component {

constructor(props){

    super(props);              

    const imageObjects = this.props.navigation.state.params.images

    const imageUrls = imageObjects.map(x=> x.processedFiles[0])



    this.state = {imageUrls: imageUrls}

}



renderImages(image, key){

    console.log("rendering image = " + image.url)

    return (                        

        <Image key={key} source={{uri: image.url, width: 320, height: 400}} />

    )

}



render() {

  const images = this.state.imageUrls;

  return (

    <ScrollView>

        {images.map((imageUrl, i) =>

            this.renderImages(imageUrl, i)            

        )}

    </ScrollView>

  );

 }

}

The issue occurs here. At most there are 8 images to show, but usually fewer. It seems like the images appear if I click on a profile (from the first screen with the avatars) from high up in the list, but if I scroll down and click on one, it's random as to whether or not the scroll view will show the images.

When I debug, I'm getting this message:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {dt: 13247, prevDt: 1980, contentLength: 8023}

I'm not sure if that has anything to do with this, if it's a memory issue, etc. It also appears to be "grouped" - like a big group of profiles, if cliked on, will show images correctly. But, then, if you scroll down a bunch and click on one that doesn't work, then the one under that one doesn't work, and the one under that, etc, until you find one that does work, and then a few will work until you find one that doesn't...you get the idea.