Hi all, my apologies if this question is redundant or too novice but I wasn’t able to find an answer here or on SO. Thank you in advance for your guidance.
I’m rendering about 30 images using ListItem from react-native-elements but the images don’t show up on Android, however, they render fine on iOS). I know that memory is handled differently on Android, so I changed all images to a 1kb tester image which fixed the issue. Right now, I’ve been able to compress my images to ~20kb each on average but they still don’t display on Android. I’m not sure I’ll be able to compress lower than that, so I was hoping to change my code or gain some insight here.
Code is below. Just to reiterate – this renders w/o an issue on iOS.
_renderContent = () =>
this.props.dressing.map(top => {
const { checkboxes } = this.state;
return (
<ListItem
key={top.id}
avatar={
<Image
source={{ uri: top.url }}
style={styles.listitemimage}
resizeMode="contain"
/>
}
subtitle={
<CheckBox
title={
checkboxes && checkboxes.includes(top.id)
? 'Added'
: 'Click to Add'
}
onPress={() => {
this.handlePress(top);
}}
checked={checkboxes && checkboxes.includes(top.id) ? true : false}
/>
}
chevronColor="white"
/>
);
});
I’m mapping through json data which holds the image url.
Example url: https://i.imgur.com/bkEjyTg.jpg
