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.
...
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.
...
Running Expo/React Native in a Docker container can sometimes cause issues. In this example, I will be running Docker 🐳 within a guest VM (Ubuntu) which will run on my host machine (Windows). My host machine will also be running another VM as the Android emulator (Genymotion) for Expo to connect to. You can get a more detailed post about how to connect two VMs together here, #Plug 🔌🔌🔌. Since I’ve set up networking on those two VMs already as far as Expo is concerned it might as well be running on the host machine (Windows).
...
The core logic of my React Native app involves using WebViews because I need to access the HTML5 canvas. Whilst developing this code there are bound to be errors and issues with the WebView code. Figuring out how to debug code within the WebView isn’t so obvious.
Option 1: Chrome Inspect Start your Expo/React Native app*. Open and chrome and then go to the following URL, chrome://inspect. Then click on the inspect button, click the top link to open the latest WebView, you should see something similar to Figure 2.
...
My home PC runs Windows for various conveniences, such as gaming. However, for development, I run an Ubuntu virtual machine (VM) and Genymotion (on Windows) for testing my app. Genymotion also uses VirtualBox to run its Android emulators. So we work out how to let two VMs running on the same host communicate with each other (Ubuntu and Android Emulator).
Please Note: This will also work for VMWare Player.
Solution There are a few networking options we can choose from when setting up a VM.
...