search

marcocesarato / react-native-big-list

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.
https://marcocesarato.github.io/react-native-big-list-docs/
Apache License 2.0
528 stars 42 forks source link

Question: show shimmer while scrolling fast #7

Open ydv0121 opened 3 years ago

ydv0121 commented 3 years ago

is it possible to show shimmer in whitespace when scrolling fast in big list?

marcocesarato commented 3 years ago

Hi @ydv0121 , this isn't possibile because the blank space is a space from the last item to the end of the scrollview (not visibile) and if we sobstitute it with items the performance drops but there is a possible workaround to make an illusion of a shimmer. This workaround is to add a Image as repeated background. So in the end users should choice the image to repeat (like an image with a single stripe) or a component similar (like a react-native-svg that do the same thing)

Here and example with a repeated image:

https://user-images.githubusercontent.com/36447518/122114731-e967c000-ce23-11eb-87e4-f399f86e6250.mp4

If this is a good solution for you I can implement it.

ydv0121 commented 3 years ago

@marcocesarato yes it's great instead of white spaces in big list. Thanks

marcocesarato commented 3 years ago

Added on 1.3.8 as experimental feature. I have encountered problems with screen resolutions and image resolution so this feature needs to be refined.

Using placeholder={true} you will see the default placeholder. Using placeholderImage={require('./assets/yourImage.png')} you can set your pattern of image to repeat. Using placeholderComponent you can set a component like an svg.

Let me know if you run into any issues and how this feature can be improved.

marcocesarato commented 3 years ago

I saw some bugs on android, so it need some improvements.

ydv0121 commented 3 years ago

yes there is also UI glitch. so it's not good idea to show shimmer in white space?

marcocesarato commented 3 years ago

yes there is also UI glitch. so it's not good idea to show shimmer in white space?

Probably the best solution is to use and SVG pattern or find a similar solution, but at the moment it's better don't implement an SVG pattern as default (because need a to add a new dependency) until found a new solution.

dougg0k commented 3 years ago

You could give the option and recommend the svg library to whoever is using and want shimmer. Maybe even restrict and make it required so no glitchs appear.

ydv0121 commented 3 years ago

i am trying to integrate this module with biglist https://github.com/tomzaku/react-native-shimmer-placeholder