1

When I display my images in the horizontal scroll-view with paging enabled the performance of app decreases. I know it is due to high resolution of the image. I want a good way so that I can load image with out degrading it's quality. Thank you in advance.

Alish Manandhar
  • 110
  • 1
  • 11

1 Answers1

0

First, using a FlatList instead of a scroll view will probably improve performance, since off-screen images will not be rendered.

Second, using images with resolution that is greater than the screen is just wasteful, since they will get resized anyway. You can pre-compute several sizes and use the most appropriate one computing the actual screen resolution using PixelRatio

var image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />

See the PixelRatio documentation for more detailed on fetching an appropriate size image.

Kraylog
  • 7,383
  • 1
  • 24
  • 35