In this tutorial I show how to manage and by building a simple app with and . navigation application state react-navigation redux : you should already be familiar with React Native, React Navigation, and Redux. If you’re just getting started with React Native, I highly recommend this course: Prerequisite The Complete React Native and Redux Course Application Overview We’re going to build an app made of two pages: : This shows a container view with a specific background color, and a button. When the button is pressed, the second page is presented. Main Page : This shows RED, GREEN and BLUE buttons. When a color is selected, the app returns to the main page and shows the updated background color. Choose Color Page By building this app, you will learn: How to navigate between different screens with . React Navigation How to use reducers and actions to update application state, so that . actions on one screen drive UI changes on another With this knowledge, you’ll be able to build more complex apps. Note: For the remainder of this tutorial, I will use the terms ‘page’ and ‘screen’ to mean the same thing. Project Setup (Expo) We’re going to build this app with the . Expo XDE You can download Expo for your OS from the . Expo XDE GitHub page Then head over to the on the Expo Docs. These will show you how to install the XDE on your desktop, and run apps within Expo on simulator/device. installation instructions As we’ll be running the app on the simulator, you’ll also need to download or . Xcode Android Studio Upon launching Expo, this page is presented: Select ‘Create new project…’ Choose the blank template, and name the project . redux-navigation The project will be created, then the React Native packager will start. To run the app in the simulator, select -> . Device Open in iOS Simulator Once the simulator is booted up, the following screen appears: As the project is now created, it can be opened with an editor of choice. I use with the . Visual Studio Code React Native Tools extension Building the app Before we can code our app, we need to install all the dependencies it needs. Open a terminal, move to the project folder you created in Expo, and type: npm install --save react-navigation redux react-redux npm install Then, . If you don’t do this, the new dependencies won’t be recognized and the simulator will throw a red error screen if you try to use them. make sure to hit the Restart button in Expo Time to build our app. I organized my project folders like this: /src /actions ColorChangedAction.js /components AppNavigator.js ChooseColorPage.js MainPage.js /reducers AppReducer.js ColorReducer.js NavReducer.js /state Colors.js Copy-paste the following code into the file: Colors.js <a href="https://medium.com/media/763d0e84353134bea1b88e619dfb02df/href">https://medium.com/media/763d0e84353134bea1b88e619dfb02df/href</a> Next, create the with a default background color and a button: MainPage <a href="https://medium.com/media/c5c96dee26ada83ffca1d2e5eb58b3fa/href">https://medium.com/media/c5c96dee26ada83ffca1d2e5eb58b3fa/href</a> A few notes: is a React component rather than a , because it will need to access application state. MainPage stateless functional component I use flex: 1, alignSelf: 'stretch' to make the container view extend to the whole screen. The color of the container view is defined in the method, which samples from our table, and returns the corresponding hex code. selectedColor() RED COLORS I have added an empty handler for the button press event. We will add the body of this method later. onChooseColor() Time to hook up our into our root file. Replace the old contents with this: MainPage App.js <a href="https://medium.com/media/601d89b015c895d9573e0d22e76555eb/href">https://medium.com/media/601d89b015c895d9573e0d22e76555eb/href</a> Refreshing the simulator yields this: Not pretty, but it shows the background color and our button as intended. If needed, here is a snapshot of what we’ve built so far: GitHub Code Snapshot 1 . Adding Navigation We are now ready to add some navigation to our app. To do this, open the file and add these contents: AppNavigator.js <a href="https://medium.com/media/8673ea2e651dc48b1952be89296de790/href">https://medium.com/media/8673ea2e651dc48b1952be89296de790/href</a> This code is borrowed from the in the project. Redux Example react-navigation It defines a , using our as its main screen. StackNavigator MainPage It also sets up , a top-level container holding the navigation state. If this seems unclear, don’t worry. This is standard boilerplate code in React Navigation and we’ll just use it for now to get things going. AppWithNavigationState Time to write the navigation reducer, which will hold the navigation state inside the Redux store. Open the file and add the following: NavReducer.js <a href="https://medium.com/media/28cab0b95ad06ee61cd972165b9f2246/href">https://medium.com/media/28cab0b95ad06ee61cd972165b9f2246/href</a> This reducer defines the initial navigation state of our app. Again, boilerplate code. Now, let’s open the file and add this: AppReducer.js <a href="https://medium.com/media/51e7b1b34a6a9efaaa18ee0b25d50b57/href">https://medium.com/media/51e7b1b34a6a9efaaa18ee0b25d50b57/href</a> As our application grows, we may need other reducers alongside our . So we can combine them all together inside . NavReducer AppReducer Finally, we’re able to update our to use all these new goodies: App.js <a href="https://medium.com/media/6187cf29991fa67a6d7985f00b98840a/href">https://medium.com/media/6187cf29991fa67a6d7985f00b98840a/href</a> The render method returns a provider with the created redux store, and holds our top-level component. Again, this is just boilerplate code needed to hook things up with Redux. If we refresh the simulator, we now see a navigation bar appearing on top: After all this code, you may get some errors on your simulator if anything is missing. If so, use this code snapshot to get back on track: GitHub Code Snapshot 2 . Show the Choose Color Page Now that we have a inside a , we’re ready to add the so we can navigate to it. MainPage StackNavigator ChooseColorPage Open the file and add the following code: ChooseColorPage.js <a href="https://medium.com/media/71277ec8de4cff03ca5a0b5f340f9aa6/href">https://medium.com/media/71277ec8de4cff03ca5a0b5f340f9aa6/href</a> A few notes: The code in the method iterates through each color, and maps it into a . The and properties are set. render() Button title color When the button is tapped, the handler is called with the appropriate color key. onSelectColor() The object is accessible via . In fact, it is injected into all the screens in our . navigation props AppNavigator Calling this.props.navigation.goBack() takes us back to the previous screen in the . AppNavigator At this stage, is not yet used to set any state. colorName Next, we have to make our aware of the new screen. Let’s update it in the file: AppNavigator ChooseColorPage AppNavigator.js <a href="https://medium.com/media/b1835506e75460259df37a83b56b1b65/href">https://medium.com/media/b1835506e75460259df37a83b56b1b65/href</a> Finally, add the code to navigate to the when the button is tapped on the . ChooseColorPage Choose Color MainPage <a href="https://medium.com/media/6234e2e5883d006bec6f6806e0390fa6/href">https://medium.com/media/6234e2e5883d006bec6f6806e0390fa6/href</a> If we refresh the simulator now and tap on , the app navigates to the new screen, which shows three buttons: Choose Color Note: Calling navigation.navigate('ChooseColor') works because we have named as one of the routes in our . ChooseColor AppNavigator Tapping on the back button or on any of the color buttons brings us back to the main page, but the background color doesn’t change according to our selection. Let’s fix that in the next section. Again, if something is not working, you can get my saved code snapshot to this point: GitHub Code Snapshot 3 . Managing application state We’ll use redux to set the background color of our as our application state. MainPage To do this, we need to define a Color Changed action, and a Color Reducer. Open the file and add the following: ColorChangedAction.js <a href="https://medium.com/media/1e61e790ffc15c3b299105d458c95fa8/href">https://medium.com/media/1e61e790ffc15c3b299105d458c95fa8/href</a> Then, open add add this: ColorReducer.js <a href="https://medium.com/media/5fe3ea16aa37626fd77345026cd2e2e4/href">https://medium.com/media/5fe3ea16aa37626fd77345026cd2e2e4/href</a> In order for this reducer to be used, we need to add it to the like so: AppReducer.js <a href="https://medium.com/media/21ca7f53b6fb2fb240adaf3f4edd7570/href">https://medium.com/media/21ca7f53b6fb2fb240adaf3f4edd7570/href</a> Now, we’re ready to call our action when the user selects a color in the . This is the updated file: colorChanged ChooseColorPage ChooseColorPage.js <a href="https://medium.com/media/6a4bdd53009556260baef4f6889387fa/href">https://medium.com/media/6a4bdd53009556260baef4f6889387fa/href</a> Note that we have made three changes: Imported the action at the top. colorChanged Connected it with and . connect() mapStateToProps Used it inside . onSelectColor(colorName) At this stage, we can refresh the simulator and run. If we choose a different color, the background color of the still doesn’t change. 🤔 MainPage This is because we haven’t told to use the new state. MainPage Easy to fix. Open and add the required code: MainPage.js <a href="https://medium.com/media/0fbae240657db52c7903e7c08c305e67/href">https://medium.com/media/0fbae240657db52c7903e7c08c305e67/href</a> A few notes: now sets the from the state in the . mapStateToProps colorName ColorReducer This is then accessible via the object and can be used inside . props selectedColor() Don’t forget to import { connect } from 'react-redux'; at the top. If we try the app again in the simulator, we are now able to change the background color. 😎 Updated snapshot: GitHub Code Snapshot 4 . Bonus: Presenting the Color Selection Page Modally When we tap the button in the , the slides in from the right. This is the default navigation animation inside . Choose Color MainPage ChooseColorPage StackNavigator What if we wanted to present the modally instead? ChooseColorPage This is easily done by changing the configuration of our like so: AppNavigator <a href="https://medium.com/media/60f6e613162ec0677c6513586beddf17/href">https://medium.com/media/60f6e613162ec0677c6513586beddf17/href</a> Note the addition of with a property inside , and the parameter. navigationOptions headerLeft: null ChooseColor mode: ‘modal’ If we try this on the simulator, the now slides in from the bottom. ChooseColorPage React Navigation is very customisable. I recommend spending some time reading the documentation , to learn all the things you can do with it. for the project Wrap Up We have learned how to: Setup and use Expo to run a mobile app on the simulator. Build an app with two different pages and navigate between them with React Navigation. Use actions and reducers to modify state from a screen, and use it to update the UI on another. You can find the complete source code . on GitHub here I also shared the project publicly . on Expo here I hope you enjoyed this tutorial. A good next step from here is to look at the official , as well as the other . React Navigation Examples tutorials from the community Comments and feedback are appreciated. 😊 And if you Clap Clap Clap, I may even do a step-by-step video tutorial. 😉
