Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native How to LazyLoad image

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

like image 872
Waleed Arshad Avatar asked Aug 03 '16 05:08

Waleed Arshad


1 Answers

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

like image 181
Overcomer Avatar answered Oct 21 '22 10:10

Overcomer