Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

In React Native, the question of “how am I going to navigate from one screen to the next?” has been pondered since day one. There have been several attempts at tackling application navigation from both the community and Facebook. Fortunately, it looks there is finally an implementation that shines brighter than the rest.

React Navigation

React Navigation was the result of lessons learned from Navigator, NavigationExperimental, and a few of the community-built React Native navigation libraries. React Navigation makes a strong effort to be entirely flexible, and work on iOS, Android and web platforms. It is based on a concept of Routers that can be composed and nested to define your application’s navigation flow inside of Navigators. There are three built-in Navigators that will solve most basic application needs: StackNavigator, TabNavigator, and DrawerNavigator. Most importantly, React Navigation also leverages the Animated API with native driver support (where applicable) to achieve 60fps for scene transitions. Here’s a basic use-case of React Navigation (please make sure you have installed the react-navigation package through npm):


NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.

Get Report


Using Redux with React Navigation

It’s safe to say that Redux has been the flavor of the year when it comes to data binding or Flux implementations in React applications. Many React Native applications written today are using Redux. Some for very valid reasons, others because of its growing popularity. Fortunately, the React Navigation team kept that in mind and provided an excellent solution for integrating Redux. With React Navigation, you simply need to create a navigation reducer that holds your navigation state inside the store. Then, you declare your navigation state in your top-level container component and it will be passed down as a prop like anything else in your redux store’s state. Here’s a snippet of how to set up Redux and React Navigation in your app container:

You can see a full working implementation of a simple React Native application that uses React Navigation, Redux and a remote API in the following repo:

https://github.com/ModusCreateOrg/react-navigation-redux-sample

Conclusion

React Navigation is the result of the community’s many hours of frustration dealing with Navigator, NavigationExperimental and their numerous abstractions. It’s time to implement routing and navigation to its simplest form, and allow developers to extend and build upon a strong foundation. With React Navigation’s modular approach, each of the core parts can adjust to any target platform and implementation.

Posted in Application Development
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • Using ES2016 Decorators in React Native
    Using ES2016 Decorators in React Native

    *picture courtesy of pixabayDecorators are a popular bit of functionality currently in Stage 1 of…

  • Using ES2016 Decorators in React Native
    Using ES2016 Decorators in React Native

    *picture courtesy of pixabayDecorators are a popular bit of functionality currently in Stage 1 of…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
Modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Our story
    • Careers
  • Let’s talk
  • EN
  • FR