React Native Custom Deck Swiper

Sibtain Ali
2 min readFeb 17, 2019

--

Deck Swipe Effect in React Native

I was recently working on a small react native app that required card swiping effect in both horizontal and vertical direction. Initially, when I encountered this feature, I was like:
“Oh, that’s easy. There must be a lot of packages that can help.”
However, I was deeply mistaken. Some of the pre existing components that allowed this feature (eg native base deck swiper) simply lacked vertical swiping.
The problem with vertical swiping in react native becomes extremely pronounced when this effect is to be used in ScrollViews. In both android and iOS, there’s a weird sort of jerk that just destroys the user experience of the app. Countless days of search on different forums led me to the conclusion that this was a kind of bug in react native which is to this date (Very unfortunately) remains unaddressed.

So what’s the solution ?
Sadly, there isn’t any concrete solution to this except some workarounds.
I’ve implemented one myself and added it to the npm repository.
Here’s the link to that:

Final result.

--

--