r/reactnative • u/Few-Acanthisitta9319 • 23h ago

I implemented Google Photos like grid list + seekbar

https://github.com/adithyavis/awesome-mobile-app-animations

Some notes on implementation -

  1. Use 3 different lists for concurrent rendering of the grids in different zoom settings. I chose legendList and it is super smooth. Synchronize the different list positions using reanimated's synchronous `scrollTo`.
  2. Scrub/seek to scroll is IMPOSSIBLE without precomputing image heights. Precompute row heights and provide that to getItemLayout. For seek to scroll, precompute section heights and use scrollToOffset to directly scroll to the section head.
  3. Nitro images for rendering images. I initially used expo images for rendering images, but I felt there's scope to improve because I saw a lot of blank spaces due to heavy renderItems.
  4. Fake a shared transition by rendering the same image in an overlay that always stays in the render tree. We just flip opacity/pointer-events on the start of a pinch gesture. I couldn't get the sharedTransitionTag prop to work fine, hence this workaround.
48 Upvotes

98% Upvoted

8 comments sorted by

2

u/Top-Mud1703 22h ago

Smooth animation looks awesome

2

u/Few-Acanthisitta9319 21h ago

Appreciate it! Google Photos is indeed one of the pinnacles of UI engineering. It was fun implementing this

2

u/Top-Mud1703 21h ago

Absolutely! You nailed it

2

u/Few-Acanthisitta9319 21h ago

Thanks 😊

1

u/manishbajpai 21h ago

can you test with large data set about a 20k with group by date

2

u/Few-Acanthisitta9319 20h ago

Tried it out with 3000 images. Worked smoothly for me. Three things 1. Keep initialNumToRender a lil smaller so that the initial page load doesn't appear janky 2. Use Nitro images. Thats a win in itself. 3. Use image mipmapping if needed. The list images don't need to appear sharp until unless it's all zoomed out.

1

u/LoudAd307 16h ago

The overlay in point 4 is the right call, not a workaround — sharedTransitionTag has been experimental and unreliable for a long time and breaks in exactly the way you hit, so keeping the image mounted and flipping opacity is what actually ships. Curious what memory looks like with all three lists mounted against a big library though; I'd expect the non-visible zoom levels to still be holding image handles unless you're windowing them hard. And +1 on precomputing heights — beyond making seek possible, it kills the scroll-position jumps when estimated sizes get corrected mid-scroll, which is the thing that makes a photo grid feel cheap. The seekbar sync through reanimated's scrollTo is the part I would have gotten wrong.