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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With