React Native 101
June 8, 2020
I'll make a small disclaimer, that this tutorial is macOS oriented. In fact, the only way you have to create an iOS build is from a Mac computer.
The first thing you need to install is Node.js. Use the method you feel more comfortable with. One option is to directly install it with homebrew:
brew install node
Alternatively, you can use Node Version Manager (nvm https://github.com/nvm-sh/nvm) if you want to handle different Node versions.
nvm install node
This is a service Facebook provides which is basically a file watching service. It will constantly watch for changes in your project files and refresh the work-in-progress application.
brew install watchman
The following are the steps you'll need to follow to configure your iOS environment.
It's a dependency manager that handles iOS dependencies. It's built with Ruby, so you'll need to make sure Ruby is working on your computer (it comes installed with your OSx).
sudo gem install cocoapods
Go to the App Store, and download the latest version of Xcode. When done, open it and go to "Preferences..." from the Xcode menu. Go to the Locations panel and install the Command Line Tools:
Setting up the Android environment is a little trickier. Please follow the instructions to make sure everything is working properly.
Java Development Kit
There can be several ways to install it,o but homebrew is one of the easiest:
brew cask install adoptopenjdk/openjdk/adoptopenjdk8
Just download it from its source (https://developer.android.com/studio/index.html). Make sure these options are selected during the installation: - Android SDK - Android SDK Platform - Performance (Intel ® HAXM) - Android Virtual Device
When the installation is done, open Android Studio, and go to the SDK Manager like this:
Once you are there, click the checkbox on the bottom right corner that says "Show Package Details". You need to install at least Android 9.0 SDK, but you can also install higher versions. Check the following and click Apply to download and install them:
ANDROID_HOME Environment variable:
Depending on the shell you're using, add the following lines to your
$HOME/.zshrc, $HOME/.bash_profile or $HOME/.bashrc:
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools
Finally, we've successfully configured both iOS and Android development environments and we're ready to start creating our first pure React Native app. We'll make use of its built-in command-line interface. We can get access to it without even installing it by using npx that comes with our Node.js installation. Just run the following command, choosing the project name you want:
npx react-native init PureReactNative
This will automatically create a new project based on their boilerplate. You can now open the created folder with the code editor of your preference.
Running the app
To start running the app we just created, the first step is to start the code watcher. The boilerplate comes with several script commands set up in the package.json file. You can run it with npm run, but the boilerplate comes configured by default to use yarn. Run this command on a Terminal:
Let's see how to run it on both platforms.
For iOS, it's pretty straightforward. We'll make use of the Xcode simulators. Please open a new Terminal instance. The simulator will automatically pop up by running:
You'll see the following:
For Android, you need to set up and open previously an Android emulator. To create one, open the subfolder /android inside your project directory with Android Studio. Open the AVD Manager, like this:
And then Click on "Create Virtual Device..." and follow the steps to set up a device. It's important to select at least the API Level 28. When done, you'll see your new device and you can click on the play button to start it.
After the emulator pops up, run this on a new Terminal instance:
And you'll see it running, like this:
This is a really useful tool that comes with React Native. Thanks to the watcher we started, you'll be able to see any implemented changes instantly on the devices. Take a look at the example below:
This is the basic starting point to begin with your React Native development experience. Thanks for reading, and start rocking with it!