Quickly Building a React Native App

Photo by Christina @ wocintechchat.com on Unsplash

Approach Taken

A purist method is adopted where we build the native app as would clasically be used to deploy in Google Play or Apple Store. There are alternative methods which use Expo. The relative differences shown below:

Here we use React Native approach not Expo.

Setup

Here we’re going to use React Native CLI, this is the process to follow when you want the freedom to be able to integrate into other parts of the application.

Dependencies

You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.

brew install node
brew install watchman
brew install --cask adoptopenjdk/openjdk/adoptopenjdk8
Photo by Austin Distel on Unsplash
  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
export ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-tools
echo $JAVA_HOME#if JAVA HOME is empty and does not have a line like the following corresponding to your installed version then you need to set this
/Library/Java/JavaVirtualMachines/jdk1.8.0_66.jdk/Contents/Home
#to check JAVA installed
java -version
#check your shell running
echo $SHELL
#If you get this /bin/zsh then you're running zsh shell
vi ~/.zshrc
# add the following anywhere
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_66.jdk/Contents/Home
Photo by UX Indonesia on Unsplash

Launch a New Mobile App

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. Let's create a new React Native project called "BadAssProject":

npx react-native init BadAssProject

Get a Virtual Device Ready

If you use Android Studio to open ./BadAssProject/android, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:

Start the App

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

npx react-native run-android

Making Changes

The BadAss project can be modified bu just editing App.js in the project folder.

Why Build an App?

If this is your first App and you want to go further down a startup route then have a think about what is the problem or pain point you want to fix? What value does your App provide? And then and only then think about your App and the solution you will build. When you do build the solution get the user stories correct, then wireframe and then code. I hope to write a further post soon detailing how to setup a simple API to provide content to the App. If you have questions please feel free to reach out. I build stuff at elbornlab.com.

--

--

I build stuff at elbornlab.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store