Lazy loading

[emilstepanian]

Hi,

Thank you for this repo.

I wanted to ask whether you had plans to implement lazy loading or recycling of items?

I really liked the component, but I am planning to have +200 scrollable cards in the carousel, and right now its not performing very well, because all items are rendered in memory

[dohooo]

Can you tell me about the scene？Why are there two hundred

[emilstepanian]

Yes of course. Basically, It's going to be an app that shows a question to the users, and they will be able to scroll through the questions. I am of course not sure with the 200, but I just made a test with 100 items and the performancehit was noticeable unfortunately.

Big fan of your carousel and the animations as well and that you use reanimated. Unfortunately its kind of a show stopper for us, and we are considering using react-native-snap-carousel instead because of this 😔

https://user-images.githubusercontent.com/16006899/144759705-6758fbb4-825f-4251-b561-1d1f2c177aa6.mp4

on

[dohooo]

This is a good suggestion, we are trying to find a solution, if you would like to give us some help, we would appreciate it. 🍺!~ hhhh

[dohooo]

now you can use windowSize props~! 🍺 thanks for @gxxgcn !!!~ Optimizing

[emilstepanian]

Whoa that's amazing, guys! Thanks for being so quick about it! We are sticking to your package! 🙌 Sorry for not responding, I mostly only have time in the weekends, as this is a project in my free time, so I didn't see this until now. It could have had been awesome to helped out, but I wouldn't have had been able to come up with such a great solution anyways! 😄

[iaminarush]

Thanks for all the hard work, I have a slightly different situation where I have around 20-30 items, but are slightly more complex. The animations are smooth but the initial render takes longer than other packages which uses flatlist/lazy rendering. Thanks again.

[dohooo]

Can you send me a specific example? It could be a video @iaminarush

[dohooo]

ok, Let's think of a way

[iaminarush]

I'm pretty new to react so probably not of much help, but from what I've seen what other libraries do is to accept a prop for max render distance. If I set this prop to 5 it loads +/-5 items from the current position so the items further back are not being rendered. If the user scrolls too fast just return a null or a simple screen with a loading icon. Thanks for the fast response regardless.

[dohooo]

I'm pretty new to react so probably not of much help, but from what I've seen what other libraries do is to accept a prop for max render distance. If I set this prop to 5 it loads +/-5 items from the current position so the items further back are not being rendered. If the user scrolls too fast just return a null or a simple screen with a loading icon. Thanks for the fast response regardless.

Yeah, we had plans like that, but we're still looking for a better one.

[dohooo]

I'm pretty new to react so probably not of much help, but from what I've seen what other libraries do is to accept a prop for max render distance. If I set this prop to 5 it loads +/-5 items from the current position so the items further back are not being rendered. If the user scrolls too fast just return a null or a simple screen with a loading icon. Thanks for the fast response regardless.

Because the animation logic is entirely dependent on the native UI, how to combine it with react state is a problem. Frequent updates to React may cause performance problems

[dohooo]

@iaminarush fixed it with 1.0.10

Now you can set windowSize props to get the best performance.

[hotaryuzaki]

@iaminarush fixed it with 1.0.10

Now you can set windowSize props to get the best performance.

thanks for your works, its amazing. but i want to ask about the number of windowSize we have to set, what is all about? i have found that when i set 10 or 20 the image change to white after i scroll (it's like view with white background), but when i set to 5 or 50 that bug is gone. so how to pick an ideal number for windowSize?

[dohooo]

@iaminarush fixed it with 1.0.10 Now you can set windowSize props to get the best performance.

thanks for your works, its amazing. but i want to ask about the number of windowSize we have to set, what is all about? i have found that when i set 10 or 20 the image change to white after i scroll (it's like view with white background), but when i set to 5 or 50 that bug is gone. so how to pick an ideal number for windowSize?

What is the length of your data?

[hotaryuzaki]

@iaminarush fixed it with 1.0.10 Now you can set windowSize props to get the best performance.

thanks for your works, its amazing. but i want to ask about the number of windowSize we have to set, what is all about? i have found that when i set 10 or 20 the image change to white after i scroll (it's like view with white background), but when i set to 5 or 50 that bug is gone. so how to pick an ideal number for windowSize?

What is the length of your data?

it's for slider banner i tried below 10, in production maybe it could be 20. that is why i tried set it to 10, but i think there is a bug.

[dohooo]

If true it will render layout and children. If false it will to only render layout(only view with white background)

[hotaryuzaki]

If true it will render layout and children. If false it will to only render layout(only view with white background)

Oooh, maybe that is why my images just showing white background. But it just 6 images and I set windowSize to 10 or 20, the images for number 2-5 is just white background.

[dohooo]

If true it will render layout and children. If false it will to only render layout(only view with white background)

Oooh, maybe that is why my images just showing white background. But it just 6 images and I set windowSize to 10 or 20, the images for number 2-5 is just white background.

I reproduced it. It was a bug. Thank you

[dohooo]

If true it will render layout and children. If false it will to only render layout(only view with white background)

Oooh, maybe that is why my images just showing white background. But it just 6 images and I set windowSize to 10 or 20, the images for number 2-5 is just white background.

It fixed. v1.1.1

[dohooo]

Now you can set any size you think is safe

@iaminarush fixed it with 1.0.10 Now you can set windowSize props to get the best performance.

thanks for your works, its amazing. but i want to ask about the number of windowSize we have to set, what is all about? i have found that when i set 10 or 20 the image change to white after i scroll (it's like view with white background), but when i set to 5 or 50 that bug is gone. so how to pick an ideal number for windowSize?

Now you can set any size you think is safe

[hotaryuzaki]

Now you can set any size you think is safe

@iaminarush fixed it with 1.0.10 Now you can set windowSize props to get the best performance.

thanks for your works, its amazing. but i want to ask about the number of windowSize we have to set, what is all about? i have found that when i set 10 or 20 the image change to white after i scroll (it's like view with white background), but when i set to 5 or 50 that bug is gone. so how to pick an ideal number for windowSize?

Now you can set any size you think is safe

great it works. thanks

[iaminarush]

@dohooo Forgot to mention this bug since I solved it by setting the windowSize to a small value and everything still worked, thanks and happy new year!

[dohooo]

@dohooo Forgot to mention this bug since I solved it by setting the windowSize to a small value and everything still worked, thanks and happy new year!

哈哈 新年快乐！

[aleksandarbos]

i'm still experiencing the issue, even when i set windowSize={3} which should make sure the previous and the next item is preloaded.

 const carouselItems = [
    {
      text: "text1",
      SvgImage: <SvgImg1 width="100%" height="100%" />,
    },
    {
      text: "text2",
      SvgImage: <SvgImg2 width="100%" height="100%" />,
    },
    {
      text: "text3",
      SvgImage: <SvgImg3 width="100%" height="100%" />,
    },
]

no matter what i try, it always loads the svg once the slide is active. the thing which is interesting is that it doesn't do this with the text. text is always preloaded, any ideas?

Edit: The issue is with svg and Carousel. It's not optimized to work with svg. Change Pic format to png or any other similar format.

[hovo96]

I have the same issue, I need to work it like flatlist so like lazy loading, to load each item when it focused(actived), so how I can achieve this? @dohooo can you help me with this? is there any way to make it?