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

React Navigation

Is a library that helps you simplify app navigation. The main reason for using this library is because it’s written purely in JavaScript so no native code (Swift/Android) is required to make it work. Also, it’s the recommended navigation library for Expo.

Structure

The project structure will look like this

├── src
│   ├── components
│   ├── views
|   └── MainApp.js
├── package.json
├── App.js

Drawer Navigator

import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { createAppContainer, createDrawerNavigator } from "react-navigation";

import CustomDrawerNavigator from "./components/CustomDrawerNavigator";
import Home from "./views/Home";
import Settings from "./views/Settings";
import About from "./views/About";

const MainNavigator = createDrawerNavigator(
  {
    Home: {
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Ionicons name="md-home" style={{ color: tintColor }} />
        ),
        drawerLabel: "Home"
      },
      screen: Home
    },

    Settings: {
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Ionicons name="md-settings" style={{ color: tintColor }} />
        ),
        drawerLabel: "Settings"
      },
      screen: Settings
    },

    About: {
      navigationOptions: {
        drawerIcon: ({ tintColor }) => (
          <Ionicons name="ios-person" style={{ color: tintColor }} />
        ),
        drawerLabel: "About"
      },
      screen: About
    }
  },
  {
    contentComponent: CustomDrawerNavigator
  }
);

const MainApp = createAppContainer(MainNavigator);
export default MainApp;

This is where we create our DrawerNavigator with our three main pages, let’s take a look at a particular page. Here we give it the key name Home, the drawerIcon relates to what Icon will be shown in the Drawer Navigator, the drawerLabel is the name of the page, as shown in the image below. Finally, the screen is the actual “jsx” the user sees when they click on the page. By default, the Home page will be the first page the user sees because it is the first page defined in the navigator.

Home: {
  navigationOptions: {
    drawerIcon: ({ tintColor }) => (
        <Ionicons name="md-home" style={{ color: tintColor }} />
    ),
    drawerLabel: "Home"
  },
  screen: Home
},

Custom Drawer Navigator

After we’ve defined our three pages we then define a custom Drawer Navigator contentComponent: CustomDrawerNavigator. This is a component we make ourselves and can style it however we wish.

import React from "react";
import { View } from "react-native";
import { DrawerItems } from "react-navigation";

import styles from "./styles";

const CustomDrawerNavigator = props => (
  <View style={[styles.container]}>
    <DrawerItems
      activeBackgroundColor={"black"}
      activeTintColor={"white"}
      iconContainerStyle={styles.icons}
      {...props}
    />
  </View>
);

export default CustomDrawerNavigator;

Here the DrawerItems are the three pages we’ve defined above. We give the active page, the page the user is currently on, a background of black and a colour of white (the text). The line {...props} is using the spread operator (…), so we don’t have to rewrite all the props passed by React Navigation. For example, we have props like onItemPress or navigation. This is the same Drawer Navigator shown in the image above.

Tab Navigator

So our Tab Navigator allow us to swap pages by changing tabs. The Tab Navigator will be on the home page, so Home.js has the following code.

import React, { Component } from "react";
import { View } from "react-native";

import CustomTabNavigator from "../components/CustomTabNavigator";
import CustomHeader from "../components/CustomHeader";

export default class Home extends Component {
  static router = CustomTabNavigator.router;

  render() {
    return (
      <View style={{ flex: 1 }}>
        <CustomHeader navigation={this.props.navigation} />
        <CustomTabNavigator navigation={this.props.navigation} />
      </View>
    );
  }
}

Custom Header

Where the custom header looks like so.

import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { View } from "react-native";

import styles from "./styles";

const CustomHeader = ({ navigation }) => (
  <View style={[styles.container]}>
    <Ionicons
      name="md-menu"
      size={32}
      color="black"
      onPress={() => navigation.openDrawer()}
    />
  </View>
);

export default CustomHeader;

This component is just a simple icon, which when pressed, opens the Drawer Navigator using the navigation props we passed to the component onPress={() => navigation.openDrawer()}.

Note: We could also swipe right to open the Drawer Navigator (from the left hand side of the screen).

In the parameters we use the following syntax ({ navigation }), this is called destructuring. We can use this with arrays or objects for example;

const temp = {
  a: 10,
  b: 20,
};

// We could do
const a = temp.a;
const b = temp.b;

// Or
const { a, b } = temp;

We do as similar thing with the props, rather then referring to navigation as props.navigation and passing a parameter props instead of ({ navigation }), this simplifies our code a little bit and makes it easier to follow.

Custom Tab Navigator

The custom Tab Navigator is similar to the MainApp.js’s Drawer Navigator.

import { createMaterialTopTabNavigator } from "react-navigation";

import PageA from "../../views/Home/PageA";
import PageB from "../../views/Home/PageB";

const CustomTabNavigator = createMaterialTopTabNavigator(
  {
    PageA: {
      navigationOptions: {
        tabBarLabel: "PageA"
      },
      screen: PageA
    },
    PageB: {
      navigationOptions: {
        tabBarLabel: "PageB"
      },
      screen: PageB
    }
  },
  {
    tabBarPosition: "bottom"
  }
);

export default CustomTabNavigator;

We give it the two pages we want to be “navigatable” via tabs in this case PageA and PageB, we then define the tab to be at the bottom (rather than the top) of the screen. By default PageA will be the page we visit when we go Home page because it’s the first page defined in the Tab Navigator.

Stack Navigator

In this example, PageB (second page on Tab Navigator) is just a simple page. The stack navigator exists on PageA.

import { createStackNavigator } from "react-navigation";

import Main from "./PageA/Main";
import Secondary from "./PageA/Secondary";

const PageANavigator = createStackNavigator({
  Main: {
    navigationOptions: {
      header: null
    },
    screen: Main
  },

  Secondary: {
    navigationOptions: {
      header: null
    },
    screen: Secondary
  }
});

PageANavigator.navigationOptions = ({ navigation }) => ({
  tabBarVisible: navigation.state.index === 0,
  swipeEnabled: navigation.state.index === 0
});

export default PageANavigator;

Again this is very similar to our other navigators we’ve defined. Here we define two pages that we can navigate between, like before the Main page is the page we visit by default. So the first page the user will see when you open the app is the Main page. This is because when the app is first opened we visit the Home page (first in the Drawer Navigator), which contains PageA (first in Tab Navigator), which contains Main (first in Stack Navigator).

In the code, we set header: null else part of the screen will be taken up by a navigation header, as shown in the image below.

PageANavigator.navigationOptions = ({ navigation }) => ({
  tabBarVisible: navigation.state.index === 0,
  swipeEnabled: navigation.state.index === 0,
});

The first page in the Stack Navigator (Main) has an index of 0, so navigation.state.index === 0 evaluates as true. So on the Main page we will see the tab bar and can swipe to change tabs but we cannot do this on the second page Secondary.

Main

So now we have a Stack Navigator but we have no obvious way to get from Main to Secondary. With the Drawer Navigator and Tab Navigator, we can press buttons to change.

import React, { Component } from "react";
import { Button, View } from "react-native";

export default class Main extends Component {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "purple" }}>
        <Button
          title="To Secondary"
          onPress={() => this.props.navigation.navigate("Secondary")}
        />
      </View>
    );
  }
}

We can do this by creating our button in Main which when pressed navigates us to Secondary page, onPress={() => this.props.navigation.navigate("Secondary")}. Where “Secondary” is the page name to change to.

Other Pages

All the other pages are very basic and look something like this, simple background and not much else.

import React, { Component } from "react";
import { View } from "react-native";

import CustomHeader from "../components/CustomHeader";

export default class Settings extends Component {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "red" }}>
        <CustomHeader navigation={this.props.navigation} />
      </View>
    );
  }
}

Appendix

• Example source code
• React Navigation
• Genymotion emulator
• GIFs created with screentogif

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.

This article is written in British English however, the code is written using American English to make it more consistent (colour vs color).

React Navigation

Is a library that helps you simplify app navigation. The main reason for using this library is because it’s written purely in JavaScript so no native code (Swift/Android) is required to make it work. Also, it’s the recommended navigation library for Expo.

Redux

Redux is used to manage global state across a React app, it can actually be used with both React and React Native. Of course, in this example, we will be using Redux with a React Native app.

The diagram above explains pretty well why you may need to use Redux. Passing state can be tricky in more complicated React Native apps, with lots of components and sub-components. Using redux we can change the state in one component and Redux will update the state in all the other components.

There are many great tutorials about Redux, I particularly liked this one. Here is brief summary how Redux will work with this app.

• Redux sets the initial (state) colour to red
• Change tabs from main to the secondary page
• This dispatches an action to the Redux store (action is called toggleTheme)
• The store then calls a reducer
• The reducer (also called toggleTheme) updates the old state to a new state, it changes the colour from red to blue
• Redux updates the state in all the components

Here is a GIF that might help clear up how it work.

Prerequisite

• An Expo/React Native app
• An Android emulator/device to test on
• Install the following dependencies

"react-navigation": "^2.18.0",
"react-redux": "^5.1.1",
"redux": "^4.0.1",

Solution

Now to the interesting part of this article let’s take a look at the code.

Structure

The project structure will look like this

├── src
│   ├── actions
│   ├── components
│   ├── containers
│   ├── reducers
│   ├── screens
│   ├── store
|   └── themes
├── package.json
├── App.js

themes

export const COLORS = {
  red: { name: "red", hexCode: "#DE5448" },
  blue: { name: "blue", hexCode: "#498AF4" },
};

Here we define our two colours that will be used as themes, red and blue. I have given each colour a name because it makes the toggle logic easier to follow.

reducers

import { COLORS } from '../themes';

const initialState = {
  colorData: COLORS.red,
};

const Theme = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      switch(action.payload.name) {
        case 'red':
          return { colorData: COLORS.blue };
        case 'blue':
          return { colorData: COLORS.red };
      }
    default:
      return state;
  }
};

export default Theme;

A reducer is a pure function which takes some state and returns a new state. In this example it gets passed the current theme colour and swaps it to the new theme colour.

In this example if the action is TOGGLE_THEME, we get the colour name from the payload and using a switch statement we swap the colours over. So if the current colour is red we update the state (colorData) to be blue.

import { combineReducers } from 'redux';
import Theme from './Theme';

export default combineReducers({
  Theme,
});

Here we combine all of our reducers, in this example, we are only using the one reducer but if we had multiple reducers, The combineReducers function to would be necessary to combine them together. In this example we can simply add new reducers to the function as and when we need them.

actions

export const TOGGLE_THEME = "TOGGLE_THEME";

This file defines all the actions we can dispatch to our store. In this example, we only need one action to toggle our theme.

import { TOGGLE_THEME } from './actionTypes';

export const toggleTheme = theme => ({
  type: TOGGLE_THEME,
  payload: theme,
});

In this file, we define our actions, so here we have a single action toggleTheme, which takes a theme as input and passes it as our payload, hence to access the name of the colour we use action.payload.name in our reducer.

store

import { createStore } from 'redux';
import rootReducer from '../reducers';


export default store = createStore(rootReducer);

The Redux store is used to store the current state for our app, we have to link our store with our reducers we can do this using the createStore function and import the reducers from reducers/index.js.

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';

import store from './src/store';
import CustomTabNavigator from './src/components/CustomTabNavigator';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <CustomTabNavigator />
      </Provider>
    );
  }
};

This acts as the main file for our app, to use Redux with our app we must wrap around Provider tags and set the store props to our store/index.js file. The <CustomTabNavigator> contains the logic for our two screens and the tab navigator.

components

import store from '../store';
import { createMaterialTopTabNavigator } from 'react-navigation';

import PageA from '../screens/PageA';
import PageB from '../screens/PageB';
import { COLORS } from '../themes';
import { toggleTheme } from '../actions';


const commonTabOptions = color => ({
  activeTintColor: 'white',
  pressColor: '#fff',
  inactiveTintColor: '#ddd',
  style: {
    backgroundColor: color,
  },
});


const CustomerTabNavigator = createMaterialTopTabNavigator({
  Encoding: {
    screen: PageA,
    navigationOptions: {
      tabBarLabel: 'A',
      tabBarOptions: commonTabOptions(COLORS.red.hexCode),
      tabBarOnPress: ({ _, defaultHandler }) => {
        store.dispatch(toggleTheme(COLORS.blue));
        defaultHandler();
      },
    },
  },
  Decoding: {
    screen: PageB,
    navigationOptions: {
      tabBarLabel: 'B',
      tabBarOptions: commonTabOptions(COLORS.blue.hexCode),
      tabBarOnPress: ({ _, defaultHandler }) => {
        store.dispatch(toggleTheme(COLORS.red));
        defaultHandler();
      },
    },
  },
}, {
    tabBarPosition: 'bottom',
});


export default CustomerTabNavigator;

Here is where we use react navigation to create our tab navigator. We define two screens called A and B, each screen has a different tab colour, red for A and blue for B. The main part of this file is the following

tabBarOnPress: ({ defaultHandler }) => {
    store.dispatch(toggleTheme(COLORS.red));
    defaultHandler();
},

On tab change (from A -> B), we detect the tab press and dispatch the toggleTheme action to the Redux store. So when we change tabs from A -> B the colour in the store will change from Red -> Blue and vice versa for B -> A.

One other thing to note is the tab colour is set using the following function. The colour is passed by the tabBarOptions.

const commonTabOptions = (color) => ({
  activeTintColor: "white",
  pressColor: "#fff",
  inactiveTintColor: "#ddd",
  style: {
    backgroundColor: color,
  },
});

tabBarOptions: commonTabOptions(COLORS.red.hexCode);

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { connect } from 'react-redux';

import { toggleTheme } from '../actions';


class ToggleTheme extends Component {
  render() {
    return (
      <View style={{marginTop: 25}}>
        <Button
          title="Toggle Color"
          color={this.props.color.hexCode}
          onPress={() => this.props.toggleTheme(this.props.color)}
        />
      </View>
    )
  }
}

const mapStateToProps = state => ({
  color: state.Theme.colorData,
});

const mapDispatchToProps = dispatch => ({
  toggleTheme: color => dispatch(toggleTheme(color)),
});

export default connect(mapStateToProps, mapDispatchToProps)(ToggleTheme);

This file does most of the heavy lifting for this app, this is where most of the logic sits. So, first of all, we have a button, which calls toggleTheme on a press of the and passes the current colour (state) as an argument.

<Button
  title="Toggle Color"
  color={this.props.color.hexCode}
  onPress={() => this.props.toggleTheme(this.props.color)}
/>

The colour of the button is also using the current (state) colour, so in this case, it will start off as red, this.props.color. We can access the current state using this.props.

const mapStateToProps = (state) => ({
  color: state.Theme.colorData,
});

This function is used to map the Redux store to the state of this component. We map state.Theme.colorData, where Theme is the name of our reducer and colorData is the item name. In this example, we’ve mapped the current colorData to color props in this component.

const mapDispatchToProps = (dispatch) => ({
  toggleTheme: (color) => dispatch(toggleTheme(color)),
});

This function maps a function to an action (and dispatches it), in this example when the toggleTheme function is called in the component it will dispatch the toggleTheme action to redux. So when the button is pressed it will dispatch an action to toggle the theme.

PageA

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import ToggleTheme from '../components/ToggleTheme';

export default class PageA extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ToggleTheme />
        <Text>PageA</Text>
      </View>
    );
  }
}

This is an example of one of our screens, it’s very simple just the page name and <ToggleTheme> component.

Example

Here is an example of the app running, as you can see there are two ways we can toggle the theme. We could use the button click, or change tabs.

Extra Task: If you want some practice, currently this won’t detect a swipe action to change tabs look at how you can do this. An example of it working can be found here.

Appendix

• Example source code
• React Navigation
• Redux Animation
• Redux Diagram
• Redux
• GIFs created with screentogif

Prerequisites

• Install Docker
• (optional) Install docker-compose
• Android device/emulator to test on

Docker

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "android": "expo-cli start --android",
    "ios": "expo-cli start --ios",
    "start": "expo-cli start"
  },
  "dependencies": {
    "expo": "30.0.0",
    "expo-cli": "2.2.4",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz"
  }
}

The package.json file I will be using the following example is a very barebones file, just including the minimum packages required to run Expo.

FROM node:latest
LABEL version=1.2.1

ENV ADB_IP="192.168.1.1"
ENV REACT_NATIVE_PACKAGER_HOSTNAME="192.255.255.255"

EXPOSE 19000
EXPOSE 19001

RUN apt-get update && \
    apt-get install android-tools-adb
WORKDIR /app

COPY package.json yarn.lock app.json ./
RUN yarn --network-timeout 100000
CMD adb connect $ADB_IP && \
        yarn run android

FROM node:latest

Tells us which Docker Image we are using as a base, in this case, the official node.js image. This is because it will have a lot of the dependencies we need already installed such as yarn and npm.

ENV ADB_IP="192.168.1.1"
ENV REACT_NATIVE_PACKAGER_HOSTNAME="192.255.255.255"

Sets an environment variable which can be accessed during runtime of the Docker container. Strictly speaking, these don’t need to be here because we can always inject into the Docker container at runtime, but I like to have the environment variables documented.

The ADB_IP is IP of the Android device 📱 to connect to. The REACT_NATIVE_PACKAGER_HOSTNAME environment variable is very important because it sets which IP address Expo (cli) is running on, this is the IP Address your phone will try to connect to. If this is not set correctly, you’ll get an error similar to Figure 1. You can work out the correct IP address on Linux by using the following command. The first one should host IP (192.168.27.128 on my machine).

hostname -I
192.168.27.128 192.168.130.128 172.17.0.1 172.19.0.1 172.18.0.1

The reason this environment variable needs to be set is because by default the React Native packager (which expo relies on) picks the first IP it sees on the machine, hence you can run expo on your host machine fine but when you run in a Docker container you cannot connect to it because it’s trying to use the Docker IP address (one of the ones starting with 172.xxx.xxx.xxx).

EXPOSE 19000
EXPOSE 19001

This is essentially meta data letting the user of the Docker container know that they can access data on those ports.

RUN apt-get update && \
    apt-get install android-tools-adb

Install Android Debugging Bridge (ADB), which is used to connect to an Android device and debug the application.

COPY package.json yarn.lock app.json ./
RUN yarn --network-timeout 100000

Copy some important files from host to Docker container. The package.json and yarn.lock are used to install the dependencies and app.json is required by expo as a bare minimum.

CMD adb connect $ADB_IP && \
    yarn run android
    # runs expo-cli start --android

Running Docker

This command runs when the Docker Image is first to run, every other command is used to build to the image itself. This uses an environment variable passed into the Docker container and connects to the Android device at $ADBIP. Then run the android command in _package.json. Then you can simply run the following commands to build and start your Docker container.

docker build -t expo-android .
docker run -e ADB_IP=192.168.112.101 \
            -e REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.1 \
            -p 19000:19000 \
            -p 19001:19001 \
            expo-android

• -t is used to name the image (expo-android)
• . tells Docker where the Dockerfile is (in the current directory)
• –env sets environment used by Docker container when it starts to run (REACT_NATIVE_PACKAGER_HOSTNAME andADB_IP are overwritten using these new values)
• -p publishes ports, in this example, it maps port 19000 on the host to port 19000 on the Docker container (and also 19001), as we need to access port 19000 and 19001 so that Expo (expo-cli) can connect to our Android device.

version: "3.5"

services:
  expo_android:
    container_name: expo_android
    build:
      context: .
      dockerfile: Dockerfile
    env_file: .env
    ports:
      - 19000:19000
      - 19001:19001
    volumes:
      - ${PWD}/:/app/

Since expo is being used to build mobile phone applications Docker isn’t going to be used in production. I prefer to use docker-compose to do the building and running, it means I can run one simple command and do the building and running in one step. Quick aside docker-compose is great for development, especially when you need to run multiple Docker container, but is not really built to be used in production. Look at using a container orchestration tool such as Kubernetes.

I also mount my current directory on the host machine to /app/ directory on the docker container, this is so that any files that change on my host machine will also change in the Docker container, rather than having to build the Docker container again.

docker-compose up --build -d

Environment Variables

ADB_IP="192.168.112.101"
REACT_NATIVE_PACKAGER_HOSTNAME="192.168.27.128"

An example .env file used to pass environment variables (using docker-compose) to the Docker container.

Appendix

• Example source code
• Docker explained
• GitHub issue around could not connect errors
• Genymotion emulator
• GIF overlay creator (Nyan Docker)
• React logo from here

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.
• You should see something similar to Figure 1. Now you explore the WebView like a normal web page.

Option 2: React Native Debugger

Alternatively you can access this page using the React Native Debugger page in chrome.

• Start your Expo/React Native app*
• Go to your React Native debugger on chrome, in my case since I’m using Expo my URL is http://192.168.27.128:19001/debugger-ui/
• Go to the three dots button (next to close button) > More tools > Remote devices
• At the bottom you’ll see another panel open up
• You should be able to see your Android device in the list
• Hit the Inspect button the first item (this will be the latest)
• Now you explore the WebView like a normal web page

Debugging

So to the closest way to debug the WebView I have found is to use console.log statements that will appear in the DevTools console. In the normal React Native debugger console you won’t be able to see any console.log statements from the WebView. You can only view them by exploring DevTools for Remote devices. As far as I can tell you cannot use breakpoints in WebViews but still this is better than nothing.

Appendix

Make sure to do this on the same machine/host that is running the emulator. For example, a Genymotion VM is running on my Windows machine but I can still see it’s WebViews on the chrome inspect URL. This can be seen in Figure 3.

Links

• With help from this StackOverflow post
• Genymotion
• GIFs created with screentogif

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.

• NAT: Allows your VMs so communicate with the outside world (outbound network), but your host machine (Windows)has no way to access this network

• Bridged: Allows your VMs to access a network using the host computer’s Ethernet adapter. However this adds a bit of complexity, as your VM needs it own identity on the network as essentially its treated like another physical machine.

• Host-only: Acts a hybrid between the other two options. It allows your VM to communicate with your host machine. So essentially all we need for multiple VMs to communicate with each is other is to turn on Host-only network (on all VMs). This allow them to communicate with the host machine which will act as a “bridge” (no pun intended).

Prerequisites

• VirtualBox Installed on the host machine
• An Expo app in the (Ubuntu) development VM
• Genymotion Installed and setup on the host machine

VirtualBox

• Open up VirtualBox
• Click on the development VM and open the “Settings”.
• Go to “Network” and Set the following two adapters, as shown in Figure 1
• Adapter 1: “Host-only Adapter”
• Adapter 2: “NAT”

NAT allows the Ubuntu VM to use the host machines internet access, it allows it to communicate with the outside world. The Host-only Adapter allows the Ubuntu VM to communicate with other VM, such as the Genymotion Android emulator.

Genymotion

Genymotion network settings are pretty much the same as the Ubuntu VM, as shown in Figure 2. Please note that the Host-only adapters can be the same (i.e. #7).

Expo

• Start your Genymotion Android emulator.
• Start your Ubuntu VM and open a terminal.
• Replace the IP Address with your own one, you can find your IP address on the Android emulator. As shown in Figure 3.

adb connect 192.168.112.101
exp start
exp android

That’s it you should see your app running on the Genymotion Android emulator now. You can see how to start the application below in Figure 4.

Appendix

• GIFs created with screentogif
• Detailed post about VirtualBox Networking
• Drawing made with draw.io