DrawerNavigator, TabNavigator and StackNavigator with React Navigation

In this article, we will create a simple React Native (with Expo) application using React Navigation, for moving between screens/pages within our app. We will create an app which had a Stack Navigator nested in a Tab Navigator, nested within a Drawer Navigator. This might sound a bit complicated so let’s take a look gif below. We have three main pages in the Drawer Navigator Home (purple), Settings (red) and About (blue) pages. Inside the Home page, we have a Tab Navigator which has two pages, PageA (purple) and PageB (green). Within PageA we have a Stack Navigator with two pages Main (purple) and Secondary (yellow). ...

Theme your Expo/React Native App with Redux and React Navigation

Recently whilst developing a React Native app (with Expo), I built a simple tab navigator using React Navigation library. I wanted to theme the app so that the header would change colour depending on which page you’re on. For example on the primary page it would be red and on the secondary page, when you change tabs, the header would become blue. I ended up being able to do it using Redux. In this article, I will show you how you can theme your Expo app using Redux with React Navigation. ...