I want to render around 1200 items with images carousel in react native like shown on the screen below
FlatList works works so slow. Surprisingly, in case with images, ScrollView works better, but when it goes up 1200 elements, it works slow as hell.
Does somebody know how is that possible to render such amount of elements. Thanks.
Try these few props that help control the amount of items rendered like windowSize, maxToRenderPerBatch , and initialNumToRender .
It might helps with the performance
Related
Basically title. I want to wait for the cells that are going to visible to be rendered before scrolling to the position because right now i am getting a lot of blank area when scrolling fast.
Can you try to optimize your cell list rendering first? FlashList has this performance issue when the app renders heavier content (videos, high-resolution images,...).
Replacing FlatList with Shopify's FlashList should fix the problem - https://shopify.github.io/flash-list/
I would like to create React app where you import, move and resize images on the screen and then export their positions. My idea was that I would have image as a component that would have its own attributes like positions, width, height and source. The problem is that I don't want to render new image element every time the component change its state (position, size, etc.) since it can be slow to load the image. I just want to change its style. Is there some React fashion approach how to do it? Thank you!
Maybe for your problem might be usefull to look life cycle update component...because it gives you some certain pattern to re-render a component in your own way..try to read something on "componentShouldUpdate()" this method give you a way to re-render the component only certain condition.
maybe here might be right for you: https://www.toptal.com/react/optimizing-react-performance
My best
I have been using the swipeout library in my app for couple of months now. I was aware it will be much slower on simulators but kept it. Now that I have released the signed APK version I can see an extreme difference between performance of this library on say iPhone X versus Samsung S6. What could I do to make this work less laggy? The structure is like this:
I have a flatlist, which has a nested flatlist. The nested flatlist has swipeout rows. It has 2 buttons both on left and right. I am blocking the scroll of the parent flatlist whenever buttons are in view (after onOpen).
To anyone experiencing this problem, here is the cause and the solution:
Cause: Extra renders that were caused by updating flat list scroll prop (I was locking the vertical scroll in the onOpen from swipeout).
Fix: Get rid of extra renders eliminating them in the shouldComponentUpdate. To prevent full list re-render when setting the scroll prop you can use the setNativeProps function.
Good luck to all!
I'm building a React Native app which has a screen containing a list of several items the user can see. I wrapped up the elements by using a ScrollView component and it works fine as shown below:
However, I'd like to have the vertical scrollbar always visible just to let the user know he can see more items than the ones shown in the first place. I've read the ScrollView documentation but it seems that there is not an option to make it happen.
Does anyone know if there is a way to achieve that or perhaps a workaround to make it intuitive to the user that there is a scroll on the list?
Try this ,Its working for me
persistentScrollbar={true}
https://facebook.github.io/react-native/docs/scrollview#flashscrollindicators
The closest thing to showing the scroll indicator constantly that is available in React Native is flashing the indicator. You can obtain a reference to the scrollview and call the flashScrollIndicators() method. There is no known way to disable hiding the indicator without writing native code. If you want to go down that path, you could try something like this for iOS.
I have face complex loading example with React.
This is what I want to do how it looks visually
Basically I need to load this in multiple stages.
It is not really good to do with css like elements on the bottom.
Basically I need render, get element width height, render all others.
Just spinning my head how I can do that.
It should be like render->render somehow