React Native How to LazyLoad image

Question

I have a listview where i want to show image on each row and I don't want to show whole 25 images at once. I just wanted to load image which come in viewport.

I am getting url in props

<Image source={{uri: this.props.media.image_url}} 
       style={{ width:this.props.media.width,
       height: this.props.media.height}}
/>

How can I achieve this in react native. Note: I have tried these library but none working for me. Probably the version issue that it has written for old version of react Plus some of it does not work with dynamic props

react-native-lazyload

react-lazy-load

Lina

Answer 1

You can use react native elements.

Add to project: npm install --save react-native-elements

Usage:

import { ActivityIndicator } from 'react-native';
import { Image } from 'react-native-elements';

// Standard Image
<Image
  source={{ uri: image }}
  style={{ width: 200, height: 200 }}
/>


// Image with custom placeholder content
<Image
  source={{ uri: image }}
  style={{ width: 200, height: 200 }}
  PlaceholderContent={<ActivityIndicator />}
/>

Source: react native elements

Hire

I know this is an old post but literally the only simple solution I found after many attempts to placeholder an image with FastImage from a uri source. Thanks! – Pretension

Answer 2

I use this plugin. It is very comprehensive https://github.com/magicismight/react-native-lazyload

Plunk