React Native: Create a Swipe Panel

InstructorJoe Maddalone

Share this video with your friends

Send Tweet

In this lesson we'll use PanResponder and LayoutAnimation to create a smoothly animated Swipe Panel commonly implemented in iOS and Android applications.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Nathan
Nathan
~ 5 years ago

Hey Joe -

Fantastic lesson! I've been trying to make what you showed at the very end - the list of swipe components. I (nearly) have it perfected in one form but the other, I'm trying to get it to where when you swipe right, you get one option, and left, you get another. The issue I'm having is when I swipe right and have left closed/right closed, it opens the left side (ok). When I then swipe left to close the left side, it opens the right side (in state, though I can't get it styled to open like the left side). Any idea how this could be happening?

My code is here: https://github.com/natdm/PanResponderApp/blob/master/SwipableBoth.ios.js

Thank you again for the lessons. Well worth the subscription!