Myujth

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.