/ Geeky stuff

How I build a data-driven cross-platform app super quickly: Getting started with Expo.io

This article is part of a series on building an MVP of a Data-driven cross-platform app with the following stack: React Native, Apollo GraphQL, and on the backend Node JS with Express and a MySQL Database.

I recommend Expo, because it gives you an edge compared to other ways to create apps. The expo edge 😎

You should really try it! Certainly if you're new to the app development world and you want to build a cross-platform MVP for your startup. Or maybe you just want to learn how to make apps. Expo is great for that...

The main reasons I use Expo:

  1. You save sooooo much time when learning React Native. Expo has the most crucial features built in and it automates building process so you don't have to go through this difficult stuff.

  2. You can show your app to friends or random people on THEIR PHONES without having to push it to the app stores yet. Expo makes it possible to have an app inside an app.

  3. You can be certain that things work. Expo's possibilities are limited compared to those of react-native. You can't just link new external components if they need new native bindings. However, at least you can be sure that the stuff that expo does have works, and it won't break. It's a safe environment.

  4. It's not just a sandbox to play and learn. You can actually make some real good app with this! Look at my app MasterCrimeZ. It's now in the appstore for Android and iOS! Booyah.

  5. Ok ok, you can't do everything with Expo. But it doesn't matter! If you need more functionality you can always detach your app. You loose the build automation and automatic uploading to the Expo CDN's, but you can keep all your code and continue with your app. At least you have had the 'expo-edge' for a long time while developing your app!

I will elaborate more on this later if you want. Let me know if you find this interesting. Otherwise, just google it. It's sick.

A: Tools

1) Expo initiation

exp init

2) Git setup

git init git remote add origin URL git add . git commit -m "hoi" git push origin master

3) Linter setup & Prettier setup

yarn add -D eslint eslint-config-expo prettier

5) Typescript setup [optional]

  1. yarn add -D typescript react-native-typescript-transformer
  2. yarn add tslib
  3. tsconfig.json > see docs expo and typescript
  4. app.json: expo.packageropts {
    sourceExts: ["ts",'tsx"],
    transformer: "node_modules/react-native-typescript-transformer/index.js",
    }
  5. yarn add -D @types/react @types/react-native @types/react-navigation
    6 create index.tsx in source and import/export it from App.js

Unfortunately, there aren't any expo types as far as I know so this will be some underlined phony errors.

Why not flow?

I tried flow, but it had a huge memory leak. My CPU usage often went to 99.9999% and then all other IDE functionalities stopped working and my mac becomes an airplane ready to take off. It's not nice.

Further options

There is a Babel Typescript plugin so that you don't have to setup Typescript if you use babel which is great, but it's pretty new so I didn't try it yet because I thought it may be buggy, especially in combination with Expo. However, it seems like a pretty nice alternative way.

6) Setup external RN Debugger& opener

B: Dependencies

Imports:

  • redux: persist, reducers, store, thunk, middleware, compose, devtools
  • apollo: client, provider, network
    (NB): apollo 2 changes a lot in the above two imports.
  • react-navigation
  • react
  • react-native
  • expo: notification, vector-icons
  • relative imports

FEEDBACK MOMENT 1:
yarn dev exp start
+

exp ios / android

or use QR code from packager on any phone!
or hit exp publish and find your app on your expo profile in the expo app. 😀 It's all soooo easy.

make sure it all works.

C: Index

  1. reducers: user reducer, nav&apollo reduver; combine all together

  2. store:

  • create network interface for apollo client
  • middleware: apollo,thunk,logger
  • create store: 3 args: second enhancer with redux compose is devtools or offline.
    (NB): state that creating the store with devtools and persistence and apollo and hot realoading and everything is quite tricky! It took me weeks before I had the solution.
  1. nav
  • choose navigation & this or docs
  • routes: screen, navigationOptions(headerTitle, tabBarIcon)
  • config: initial routename, tabbarOptions (showIcon, activeTintColor, inactiveTintColor, indicatorStyle (bgColor), tabelstyle(fontWeight), style(backgroundColor)), swipeEnabled, animationEnabled, lazy
    (NB): talk about last 3 options with regard to nested navigators in android & iOS!
  1. notification

  2. render apollo provider with client & store and nav+header as child

D: Screens

create a few simple screens

yarn dev + expo ios/android + debug = feedback moment 2

some extra commands:

  • exp logout, exp login
  • exp start, exp ios --offline
    when there are problems with expo
How I build a data-driven cross-platform app super quickly: Getting started with Expo.io
Share this

Subscribe to Karsens