How to setup react navigation and redux with react native

https://medium.com/@rocksinghajay

In this article, I will tell you how we can setup react navigation and redux with react native, simple and easy steps. So, let’s start.

Initialization of the react native project

Run the following commands in the terminal :

react-native init nativeReduxNavigation
cd nativeReduxNavigation
yarn install

Now, we will be adding the main libraries redux, react navigation, react-redux, redux-logger.

Run the following commands in the terminal :

yarn add redux && yarn add react-redux && yarn add redux-logger && yarn add react-navigation && yarn add react-native-gesture-handler@~1.0.14 && react-native link react-native-gesture-handler

After installing all of the required libraries, now move on to the setup react navigation, open the project in IDE like visual studio, sublime. And run the project by running the following command in terminal and make sure you have Xcode for ios development, installed and already set up. And Android studio for android development also installed and already set up and connect your device with the USB cable to the computer and enabled the developer mode of your device.

Run the following command to start the project in terminal:

react-native run-ios // for ios
react-native run-android // for android

Setuping react navigation first

In App.js file add the below code :

App.js

And then create the Router.js file in the root folder of your project :

Router.js

Now, we set up the react navigation with our project you can see in the below screen video :

Now Setuping redux at last

1. STORE

Create file store.js see in the app and see the below code :

In the above code, we just created our store, inside our store we have our dummyReducer in the reducers folder of the app, we didn't create any reducers folder and dummyReducer file yet.

2. Connect store with our App.js file update the App.js file like this sees the above code :

3. Now let’s create an action type file in the types folder

4. let’s create an action file in the action folder named dummyAction

5. let’s create dummyReducer in the reducers folder you remembered when we created a store inside the store we imported the dummyReducer file from reducers folder now let’s create it.

That’s it we initialised the basic redux setup with react native and react navigation. Now, we can use our redux with react native component, see the above code.

Now let’s create a components folder and add two components that we are using in the router file and update the router file also.

This is our updated router file see the below code :

Now let’s create both two components in a folder component, see the below two component code :

In this updated HomeScreen component we connect the react-redux with our HomeScreen component for dispatching the action at the time of when we are clicking on the ‘Go to details’ button as you can see in the above code. And after connecting the react-redux with the component then now we have access to dispatch the action. And for dispatching the function we need to have dispatch function in the component props. Now you can check by consoling the ‘this.props’ in the component for better understanding.

And in the DetailsScreen component, we got the dummyAction data from the dummyReducer as you can see. And in the above code, we created action types so for dummyReducer and dummyAction both have the same type. So when we are dispatched the dummyAction at that time the data we sent it in the dummyAction parameter, then that will be saved in the dummyReducer initial state, for example, “text”. And you can see in the above DetailsScreen component we are getting text data from the dummyReducer from the component props after connecting react-redux with the component.

That’s it we completed the all steps of setup react navigation and redux with react native. See the above example:

final demo

I hope you enjoyed and learned from my article on How to setup react navigation and redux with react native.

Clap 👏 for this article if you find it useful 😃

Feel free to comment and like this article so that others can find it easily on Medium!

Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.

Want to learn more about JavaScript, Reactjs, React-native? Check out my other articles:

How to add a splash screen to react native(Android)

PAYPAL INTEGRATION IN REACT-NATIVE

A discrete way to write reactjs components

And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript, react.js, stay connected with me.