Question: show shimmer while scrolling fast

[ydv0121]

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

[marcocesarato]

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:

test.mp4

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

[ydv0121]

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

[marcocesarato]

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]

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

[ydv0121]

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

[marcocesarato]

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]

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]

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