Your first React Native App using Expo boilerplate in 15 min 💨

3 min readDec 2, 2020

🎙 Introduction

You always wanted to create the revolutionary app, that will makes you richer than Larry Fink but you don’t have time or money to spend on dev ? You are in the right place, I will show you the fastest way to create mobile application with React Native (Who’s using React Native?) & Expo.

First thing first, this is what you can accomplish by following this tutorial :

https://play.google.com/store/apps/details?id=club.h2t.app (Android) / https://apps.apple.com/us/app/h2t/id1502288567?l=fr&ls=1 (iOS)

Ticket app based on boilerplate running on iPhone.

Requirements

You need to know how to code in JavaScript & how to use terminal, that’s it.

👨🏻‍💻 Step by step

1. Get boilerplate on Github.com

victorbalssa/expo-ticket-app

The project provides a lot of libraries you may reach for, all ready to go. It's designed to be a boilerplate to future…

github.com

checkout master branch with git.

> clone git@github.com:victorbalssa/expo-ticket-app.git

Open it with your prefered IDE.

Feel free to open Pull Request if anything doesn’t work as intended following guidelines.

2. Create Firebase project

https://console.firebase.google.com/u/0/?hl=en

Open the Firebase console.
Click `Add project`.
Enter your project name following information and click `continue`.
The start screen of the Firebase console opens.
In authentication side nav, add `Email/password` type of provider👇🏻

In realtime database side nav, create new database.

Always in realtime database, in Rules tab, Add following rules 📑 :

{
  "rules": {
    ".read": true,
    ".write": false,
    "users": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid","firstName": { ".validate": "newData.isString() && newData.val().length > 0" },
        "lastName": { ".validate": "newData.isString() && newData.val().length > 0" },
        "lastLoggedIn": { ".validate": "newData.val() <= now" },
        "signedUp": { ".validate": "newData.val() <= now" },
      }
    },
  }
}

3. Project Configuration & first data

Get your Project Id and your Web API Key in Firebase settings.

Go back to your IDE with expo-ticket-app open.
In src/constants/firebase.js replace with your Firebase informations.

export default {
  // replace with your Web API Key :
  apiKey: '**********',  // replace with your Project Id :
  authDomain: '*******.firebaseapp.com/',
  databaseURL: 'https://*******.firebaseio.com/',
  projectId: '*******',
}

[optional] if you want to add data to test your app you can import JSON file from https://raw.githubusercontent.com/victorbalssa/expo-ticket-app/master/events-export.json directly in Firebase realtime database. 👇🏻

4. Launch expo 🚀

Run this command in expo-ticket-app directory & follows instructions on terminal :

> yarn install> expo start

That’s it ! you can now : register & login new users, display events or data from newly created mobile application.
Feel free to improve this application by making your own design & add new features as is under MIT.