React-native scrollView - why aren't my images appearing?
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.
android react-native
add a comment |
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.
android react-native
Are the images very large? Are they all coming from the same source?
– mediaguru
Nov 12 at 22:51
add a comment |
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.
android react-native
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.
android react-native
android react-native
asked Nov 12 at 0:24
ygetarts
43111125
43111125
Are the images very large? Are they all coming from the same source?
– mediaguru
Nov 12 at 22:51
add a comment |
Are the images very large? Are they all coming from the same source?
– mediaguru
Nov 12 at 22:51
Are the images very large? Are they all coming from the same source?
– mediaguru
Nov 12 at 22:51
Are the images very large? Are they all coming from the same source?
– mediaguru
Nov 12 at 22:51
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254588%2freact-native-scrollview-why-arent-my-images-appearing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254588%2freact-native-scrollview-why-arent-my-images-appearing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are the images very large? Are they all coming from the same source?
– mediaguru
Nov 12 at 22:51