Implement Snapchat like swipe navigation declaratively in React Native
Bottom line on top
Implement a 4-way swipe navigation across views declaratively in under 20 lines, no Javascript!
Though I don’t use Snapchat, I’m a big fan of their swipe navigation. I personally think more apps should implement swipe navigation as its easier on the thumb. With screen size increasing every new release, its getting harder to reach the buttons in the top nav. I could write a full story on my frustrations with mobile navigation patterns, but, that’s for another day…
My initial approach to this problem was fairly complicated. I thought I might have to do something custom and complex with the Gesture Responder System and have the views listen to gesture events and slide animate in and out. Hmmm, that sounds complicated. Should I? The answer is NO. The ReactNative community is awesome and there is most likely a module that exists to do most things or at the very least, something close.
I’ve used the react-native-swiper component in a previous project and loved it! I figured I can tweak it a little bit to meet my requirements.
As you might have already guessed, I’m going to remove the pagination buttons and dots to make it look closer to what I want. What’s even more awesome — the component supports vertical navigation too. All I had to do was nest a couple of swipers and boom! I have fully functional 4-way swipe navigation between views.
There’s a lot of boiler plate code here — the essentials are less than 20 lines of pure declarative JSX!
Unfortunately, vertical navigation is not supported on Android yet. I might be taking a crack at it soonish.
Thanks for reading! Checkout my other post on progressive image loading in React Native too.
Feedback/comments below or tweet at @sharathprabhal
Hit the recommend button if you want others to read this.
Check out other interesting React Native articles at
