Adding Application Tabs with Redux and React Native

Before brushing your teeth this morning, you probably tabbed your way through a piece of navigation on your phone.

When React Native came out of private beta, there wasn’t a clear way to manage routes in your application. Working with Redux helps with the management of application state. Even within the Flux paradigm, routing is a topic that’s heavily debated.

Fortunately, thanks to the work of the React Native team, a pattern is starting to emerge that relies on a unidirectional paradigm. Early versions of React Native’s NavigationExperimental were heavily reliant on Redux as a state management mechanism, meaning that you didn’t have to treat routes any different from other kinds of global state reductions in your application.

Eric Vicenti’s excellent talk at React Europe this year was a great introduction of what’s to come with this new navigation library. I appreciated the candour with which he described the technical challenges that come from building a cross-platform, native and scalable form of app navigation.

It just so happened that I was about to start working on a React Native iOS application at during React Europe and was about to tackle questions around routing.

Thanks to Nader Dabit and The Bakery and the RFC I was able to put together something that supported modal interfaces, deep linking, animations and tabbing without too much extra work.

The two videos here are a simplification of my navigation implementation. They don’t rely too heavily on NavigationExperimental yet; nevertheless, I hope they can serve as the bedrock for adding modals and other forms of navigation to the peckish project.

Take a look at the implementation on GitHub.

Part 1:

Part 2: