Creating our Mobile App in React Native

We decided that the Strong Sloth gym tracker really has two main functions which revolve around mobile and web.  We already have the web version for viewing data about the machines in a gym; however we lacked a streamlined way to check in and to check out of a machine.  This is where our mobile app comes in.

Our app is very simple.  It reads a QR code on a machine.  To check in you simply open the app and point the screen at the the QR code.  To later check out do the same thing.  The interface is very simple as it is just the camera screen which reads the code; however its simplicity makes it very usable as well.

React Native is nice as it allows one to develop for Android and iOS at the same time.  However, we have run into some issues with iOS. To test our app we really need to use an actual device because the whole point of the app is to read a QR code through a camera which is not possible on a simulator.  It is much harder to test on an actual device when using an iOS device compared to an android.  Why is iOS harder? You have to deal with xcode to deploy the app.  React Native is nice in that you can forget about xcode and android studio for the most part when developing, bringing in xcode seemed to create errors in deploying which simply weren’t there for android.

Currently our app is functional; however it is not perfect.  The QR code will scan too fast which results in multiple check-ins and check-outs when a user tries to do one or the other.  This is our priority bug to fix moving forward.  The code for the app is located in the /mobile_app/StrongSloth directory in our repo.  After installing all dependencies you should be able to run the app via ‘react-native run-android’  (we recommend you do this on an actual android device right now since we have not gotten iOS to work correctly yet).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s