Bottom line on top

Sharath Prabhal
Feb 24, 2016 · 3 min read

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…

dashone.app

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.

https://github.com/leecade/react-native-swiper

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.

https://gist.github.com/sharathprabhal/80912e29edc85904b93d

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

The React Native Log

All things React Native — tutorials, experiments, tips & tricks, snippets

Sharath Prabhal

Written by

Entrepreneur/Engineer/Dreamer

The React Native Log

All things React Native — tutorials, experiments, tips & tricks, snippets

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade