Android not showing all local images in carousel

Is this a bug report, a feature request, or a question?

Bug Report/Question

Have you followed the required steps before opening a bug report?

(Check the step you’ve followed - replace the space character between the square brackets ([]) by an x.)

• [ x] I have read the guidelines regarding bug report.
• [ x] I have reviewed the documentation in its entirety.
• [ x] I have searched for existing issues and made sure that the problem hasn’t already been reported.
• [ x] I am using the latest plugin version.
• [ x] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn’t a React Native bug?

Yes, unsure.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Android, any version. Release or Debug build reproducible

Is the bug reproductible in a production environment (not a debug one)?

Both.

Environment

react-native-cli: 2.0.1 react-native: 0.55.3 react-native-snap-carousel 4.6.1

Expected Behavior

Show all images in the carousel

Actual Behavior

The issue occurs for items further down the carousel. The first 20 items might show fine, then random ones will not show the image.

Steps to Reproduce

This is an example of our Carousel setup. Please note, I have tried different options with the removeClippedSubviews and the initialNumToRender and useScrollView props to no avail.

export default class GameTypeCarousel extends React.Component<*> {
  render() {
    return (
      <Carousel
        ref={this.props.reference}
        data={ENTRIES}
        renderItem={this.renderItem}
        sliderWidth={viewportWidth}
        itemWidth={itemWidth}
        removeClippedSubviews={false}
        enableMomentum
        initialNumToRender={1}
      />
    );
  }

  renderItem({ item, index }) {
    return (
      <GameTypeEntry data={item} index={index} />
    );
  }
}

The actual entry is simple text and image. `export default class GameTypeEntry extends Component { static propTypes = { data: PropTypes.object.isRequired, };

renderImage () {
  if (this.props.data.title === "Default") {
    return (
      <Image source={DefaultImage} style={styles.imageStyle} resizeMode="contain" resizeMethod="resize" />
    );
  }
  if (this.props.data.title === "Baseball") {
    return (
      <Image source={BaseballImage} style={styles.imageStyle} resizeMode="contain" resizeMethod="resize" />
    );
  }
  return (
    <Image source={DefaultImage} style={styles.imageStyle} resizeMode="contain" resizeMethod="resize" />
  );
}

render () {
  return (
    <View style={styles.slide}>
      { this.renderImage() }
      <Text style={styles.title}>{ this.props.data.title }</Text>
    </View>
  );
}

}`

What we find is that random indexed items in the carousel will not show the image. Even though with the above setup most will be using the same default image. So we know the image is there and it works for other slides (so to speak). It just doesn’t show for all.

I’ve read the performance notes on Android. I’m not sure about the note on ‘Implement shouldComponentUpdate’ wether that would help or where that even needs to be implemented. Checking the examples I cannot see it anywhere.

[StuartMorris0]

I was able to resolve the issue in the end.

I used a flatlist and was able to reproduce the issue. The issue seemed to be because we were using large images at 1600x1600. The issue only occurred on Android devices and not emulators.

We tried the large heap change too to no avail. Making the images smaller worked out the issue for us with flatlist, so at a guess it will be the same issue here. We moved away from this package in the end, but it might help someone in the future.

Using the scrolllist variable for this package made no difference in our issue either. Thanks

[bd-arc]

Thanks a lot for the feedback @StuartMorris0