Have you heard about React native and Expo? Building desktop is great, but what about building mobile apps? What if you don’t have access to Android or Apple device. Or, you don’t want to learn Swift or Java. This is not a problem. React native and Expo allows you to build mobile apps on any platform for any platform. This tutorial will show you how to do it.

Get this starter template on GitHub.

Setting up the project Pt.1

Before you start working on the app itself, there are some things to do. You will need to create a couple of configuration files. These files are package.json, babel.config.js and app.json. Then, you should also create .gitignore, at least if you plan to use git. There are some files generated automatically every time you run the project. These files don’t need to be included in git. Let’s start with this file.

## ./.gitignore
node_modules/**/*
.expo/*
npm-debug.*
*.jks
*.p12
*.key
*.mobileprovision

Next, you will need to install some dependencies to get this project up and running. Now, in order to use these dependencies, and start this project, you will also need a few npm scripts. These scripts include script for development, ejecting and testing. There will be actually three scripts for development-“default”, one for Android and one for iOS.

Now, you will need need to specify the main, or the app entry. After that, you should also specify preset for jest. The answer for the second thing is jest-expo. And, for the first? You will use AppEntry.js from expo module. Now you are ready to install all dependencies with yarn or npm. So, npm install or yarn.

Aside to these, you will also probably need to install expo-cli. And, you should install this dependency globally.

// ./package.json
{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "jest": {
    "preset": "jest-expo"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "dependencies": {
    "expo": "^31.0.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-navigation": "^2.18.2"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "jest-expo": "^31.0.0"
  }
}

#react native #mobile app #expo #javascript #design development