Ufdjrw

New passport but visa is in old (lost) passport

Custom alignment for GeoMarkers

Why one should not leave fingerprints on bulbs and plugs?

Math equation in non italic font

Fastest way to pop N items from a large dict

What exactly is this small puffer fish doing and how did it manage to accomplish such a feat?

I got the following comment from a reputed math journal. What does it mean?

Do the common programs (for example: "ls", "cat") in Linux and BSD come from the same source code?

Is there a symmetric-key algorithm which we can use for creating a signature?

How do you talk to someone whose loved one is dying?

Is honey really a supersaturated solution? Does heating to un-crystalize redissolve it or melt it?

Are Roman Catholic priests ever addressed as pastor

et qui - how do you really understand that kind of phraseology?

Happy pi day, everyone!

Have the tides ever turned twice on any open problem?

Why Choose Less Effective Armour Types?

What options are left, if Britain cannot decide?

Is it normal that my co-workers at a fitness company criticize my food choices?

I am confused as to how the inverse of a certain function is found.

What is a ^ b and (a & b) << 1?

If I can solve Sudoku, can I solve the Travelling Salesman Problem (TSP)? If so, how?

What is the relationship between relativity and the Doppler effect?

Why does overlay work only on the first tcolorbox?

How to write cleanly even if my character uses expletive language?

React Native lazy loading 250 images in a Scroll View

1

I have 250 objects in state, that I'm trying to load in a scroll view with an image for each one. I'm using react-native-lazyload, and it works for about the first 75 images, then the scrolling starts slowing down to a halt, almost at the same spot every time.

Is there a different way I can load these images? It seems like a Flatlist would be a better option than a Scrollview, but I have no function I can call onEndReach

reactjs react-native react-native-flatlist

share|improve this question

asked Mar 6 at 21:01

peter176peter176

8810

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Where are the images stored on the device or on the internet?
  
  – Andrew
  Mar 6 at 22:21
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I prefer recycler list view. Although, it is not as easy to use as FlatList, but does the job pretty well
  
  – Murtaza Raja
  Mar 7 at 2:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Andrew on the internet
  
  – peter176
  Mar 7 at 9:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you considered using react-native-fast-image?
  
  – Andrew
  Mar 7 at 9:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Andrew I tried using it but ran into 'Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.' I'm using crna 2.0.2. I'm not sure if I can use this without ejecting.
  
  – peter176
  Mar 7 at 11:55
  

  
  
  
  

 | 
show 4 more comments

1

I have 250 objects in state, that I'm trying to load in a scroll view with an image for each one. I'm using react-native-lazyload, and it works for about the first 75 images, then the scrolling starts slowing down to a halt, almost at the same spot every time.

Is there a different way I can load these images? It seems like a Flatlist would be a better option than a Scrollview, but I have no function I can call onEndReach

reactjs react-native react-native-flatlist

share|improve this question

asked Mar 6 at 21:01

peter176peter176

8810

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Where are the images stored on the device or on the internet?
  
  – Andrew
  Mar 6 at 22:21
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I prefer recycler list view. Although, it is not as easy to use as FlatList, but does the job pretty well
  
  – Murtaza Raja
  Mar 7 at 2:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Andrew on the internet
  
  – peter176
  Mar 7 at 9:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you considered using react-native-fast-image?
  
  – Andrew
  Mar 7 at 9:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Andrew I tried using it but ran into 'Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.' I'm using crna 2.0.2. I'm not sure if I can use this without ejecting.
  
  – peter176
  Mar 7 at 11:55
  

  
  
  
  

 | 
show 4 more comments

I have 250 objects in state, that I'm trying to load in a scroll view with an image for each one. I'm using react-native-lazyload, and it works for about the first 75 images, then the scrolling starts slowing down to a halt, almost at the same spot every time.

Is there a different way I can load these images? It seems like a Flatlist would be a better option than a Scrollview, but I have no function I can call onEndReach

reactjs react-native react-native-flatlist

share|improve this question

asked Mar 6 at 21:01

peter176peter176

8810

share|improve this question

asked Mar 6 at 21:01

peter176peter176

8810

share|improve this question

asked Mar 6 at 21:01

peter176peter176

8810

asked Mar 6 at 21:01

peter176peter176

8810

asked Mar 6 at 21:01

peter176peter176

8810

1 Answer
1

active

oldest

votes

1

I found a really good write-up on improving performance of Flatlists here. I ended up using a Flatlist with these setting:

 <FlatList
 containerContentStyle=styles.container
 data=countries
 renderItem=( item ) => (
 <View style=styles.results>
 <Results 
 ...this.props 
 country=item 
 handleUpdate=this.handleUpdate
 pendingCountry=pendingCountry
 />
 </View>
 )
 keyExtractor=item => item.alpha2code
 ListHeaderComponent=() => this.renderHeader()

 // Performance settings
 removeClippedSubviews=true // Unmount components when outside of window 
 initialNumToRender=2 // Reduce initial render amount
 maxToRenderPerBatch=1 // Reduce number in each render batch
 maxToRenderPerBatch=100 // Increase time between renders
 windowSize=7 // Reduce the window size
 />

I can now scroll through my entire list of 250 images at a reasonable pace with no issues. When I start scrolling back up from the bottom, the screen gets a little jerky, but this is the best solution I've gotten to work.

share|improve this answer

answered Mar 7 at 13:45

peter176peter176

8810

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55032060%2freact-native-lazy-loading-250-images-in-a-scroll-view%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

I found a really good write-up on improving performance of Flatlists here. I ended up using a Flatlist with these setting:

 <FlatList
 containerContentStyle=styles.container
 data=countries
 renderItem=( item ) => (
 <View style=styles.results>
 <Results 
 ...this.props 
 country=item 
 handleUpdate=this.handleUpdate
 pendingCountry=pendingCountry
 />
 </View>
 )
 keyExtractor=item => item.alpha2code
 ListHeaderComponent=() => this.renderHeader()

 // Performance settings
 removeClippedSubviews=true // Unmount components when outside of window 
 initialNumToRender=2 // Reduce initial render amount
 maxToRenderPerBatch=1 // Reduce number in each render batch
 maxToRenderPerBatch=100 // Increase time between renders
 windowSize=7 // Reduce the window size
 />

I can now scroll through my entire list of 250 images at a reasonable pace with no issues. When I start scrolling back up from the bottom, the screen gets a little jerky, but this is the best solution I've gotten to work.

share|improve this answer

answered Mar 7 at 13:45

peter176peter176

8810

add a comment | 

1

I found a really good write-up on improving performance of Flatlists here. I ended up using a Flatlist with these setting:

 <FlatList
 containerContentStyle=styles.container
 data=countries
 renderItem=( item ) => (
 <View style=styles.results>
 <Results 
 ...this.props 
 country=item 
 handleUpdate=this.handleUpdate
 pendingCountry=pendingCountry
 />
 </View>
 )
 keyExtractor=item => item.alpha2code
 ListHeaderComponent=() => this.renderHeader()

 // Performance settings
 removeClippedSubviews=true // Unmount components when outside of window 
 initialNumToRender=2 // Reduce initial render amount
 maxToRenderPerBatch=1 // Reduce number in each render batch
 maxToRenderPerBatch=100 // Increase time between renders
 windowSize=7 // Reduce the window size
 />

I can now scroll through my entire list of 250 images at a reasonable pace with no issues. When I start scrolling back up from the bottom, the screen gets a little jerky, but this is the best solution I've gotten to work.

share|improve this answer

answered Mar 7 at 13:45

peter176peter176

8810

add a comment | 

I found a really good write-up on improving performance of Flatlists here. I ended up using a Flatlist with these setting:

 <FlatList
 containerContentStyle=styles.container
 data=countries
 renderItem=( item ) => (
 <View style=styles.results>
 <Results 
 ...this.props 
 country=item 
 handleUpdate=this.handleUpdate
 pendingCountry=pendingCountry
 />
 </View>
 )
 keyExtractor=item => item.alpha2code
 ListHeaderComponent=() => this.renderHeader()

 // Performance settings
 removeClippedSubviews=true // Unmount components when outside of window 
 initialNumToRender=2 // Reduce initial render amount
 maxToRenderPerBatch=1 // Reduce number in each render batch
 maxToRenderPerBatch=100 // Increase time between renders
 windowSize=7 // Reduce the window size
 />

I can now scroll through my entire list of 250 images at a reasonable pace with no issues. When I start scrolling back up from the bottom, the screen gets a little jerky, but this is the best solution I've gotten to work.

share|improve this answer

answered Mar 7 at 13:45

peter176peter176

8810

 <FlatList
 containerContentStyle=styles.container
 data=countries
 renderItem=( item ) => (
 <View style=styles.results>
 <Results 
 ...this.props 
 country=item 
 handleUpdate=this.handleUpdate
 pendingCountry=pendingCountry
 />
 </View>
 )
 keyExtractor=item => item.alpha2code
 ListHeaderComponent=() => this.renderHeader()

 // Performance settings
 removeClippedSubviews=true // Unmount components when outside of window 
 initialNumToRender=2 // Reduce initial render amount
 maxToRenderPerBatch=1 // Reduce number in each render batch
 maxToRenderPerBatch=100 // Increase time between renders
 windowSize=7 // Reduce the window size
 />

share|improve this answer

answered Mar 7 at 13:45

peter176peter176

8810

answered Mar 7 at 13:45

peter176peter176

8810

answered Mar 7 at 13:45

peter176peter176

8810