I recreated the iOS list view with React Aria Components and Framer Motion! It has fluid swipe gestures, layout animations, multiple selection mode, and even keyboard support. The code is remarkably small for that much functionality too. Check it out! 🤩

Direct demo link (try it on your phone): And check out GridList from React Aria Components. Aside from the features shown here, it has a bunch more including row actions (e.g. to navigate to detail view) and drag and drop! 🙂

This demo also uses a pretty neat technique IMO: it stores the framer motion value that's controlled by the drag gesture in a CSS variable. Then, other things can be calculated in pure CSS, like the delete button's width.

Getting the text alignment of the delete button to animate when you cross the 80% threshold was also challenging. It swaps justify-content, and then does a keyframe animation using transform to calculate the opposite position. So much simpler than the imperative version I had!

you are the only person who gives me hope about this godforsaken platform

Very nice work! First thing I checked was whether you could still vertically scroll while tapped on an item. Seems it sometimes locks it but sometimes not (i.e. sometimes you can still scroll the list while an item is being touched). I'm guessing this might be some iOS behavior that's beyond our reach?

I think framer motion is supposed to lock vertical scrolling while the drag gesture is active. That seems to work ok for me. I wish the gesture was a bit less sensitive while you are scrolling though, sometimes a bit of red peeks out. Hard stuff!

i had also tried building something like this couple of weeks back

Amazing work, got inspired after seeing all the features and such smooth animations

you're killing it, react-aria is the next big thing

Damn 😍