CODEWITHSUNDEEP
imagereactjsreact-nativelazy-loadingreactjs-flux
Waleed Arshad
Waleed Arshad

Reputation: 1099

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

Upvotes: 12

Views: 26653

Answers (3)

Ambreen Zubari
Ambreen Zubari

Reputation: 77

Alternatively, you can use defaultSource props to show the deafult image until the url loads it is provided by react-native image itself. You can use it that way

    <Image
    defaultSource={DefaultImage}
    source={{
    uri: `${item.image_url}`,
    }}
    style={tw`w-full h-full rounded-xl`}
    />

Upvotes: 0

Overcomer
Overcomer

Reputation: 464

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

Upvotes: 4

Shivam Sinha
Shivam Sinha

Reputation: 5150

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

Upvotes: -1

Related Questions