Images not rendering on Android


#1

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


#2

hey @nethanelkohen , just to make sure that this is a performance issue – rendering with a couple images work on Android (ie) 1-2 images?

could you provide a snack with the code that doesnt work on android? (snack.expo.io)


#3

thanks for getting back to me, @quinlanj. It seems like it is a performance issue with the ListItem way I was rendering images. I’ve since got it to work.


#4

oh hm… what ended up being the fix, @nethanelkohen?


#5

sorry for the late reply! I believe it was the way I wrote my code. Didn’t use FlatList.


#6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.