Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
April 7, 2017

React Navigation and Redux in React Native Applications

Front End Development, Hybrid, JavaScript, Native, React

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):

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 Front End Development, Hybrid, JavaScript, Native, React
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 pixabay Decorators are a popular bit of functionality currently in Stage 1…

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

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

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

SAVE & ACCEPT
Scroll To Top