Jumpstart App - Build and Run

Set up, build and run the boilerplate code, with a battle-hardened template and all the necessary tools already integrated.

Prerequisites#

It is highly recommended that you go through the following lessons, in this order, before moving ahead with this one:


We will be building an ecommerce app which will sit on top of the boilerplate code, which has been developed for the purpose of this course. In this section, we will set up and run the code on our machine, and look into the base setup that is in place to help jumpstart building apps using React Native.

Everything that we build through this course is in the Newline branch of the boilerplate repo.

We will clone the master branch and build on top of it. The newline branch has all the code discussed in this course, in case students need to refer it.

Newline Branch

newline Github branch Readme

Setup#

This section is common for iOS and Android.

  • Clone the open source boilerplate code from this repository link or by running the following command in your terminal:

  • Move into the project directory

  • Make sure the Node version installed on your system is greater than 12.x.x. If not, you can download the latest version here. If you want to use multiple Node versions on your system, n and nvm are both really great at managing that.

  • Install the packages using yarn. Run this command at the root location of the project:

or npm if you prefer:

To install Yarn, run command: npm i -g yarn

  • Start the Metro Bundler:

iOS#

For iOS development, a Mac machine is required.

First complete the steps in the Setup section above.

Install the pod dependencies of the project. This is a one-time step. Pods are dependency managers, similar to node_modules for a JavaScript application.

  • Move to the ios folder and install pods:

  • You can now either launch the app from XCode or the terminal.

XCode#

  • Open the boilerplate project from the path: ios/FridayApp.xcworkspace.

  • Launch the application from XCode using the ⌘ + R keys.

This will automatically build the project and run it. This will take a few minutes the first time, or after a clean build (⌘ + Shift + K).

XCode

Terminal#

To launch it from the terminal, run the following command:

This runs the run-ios command supported by React Native and selects iPhone 11 as the simulator.

Or, in the boilerplate code, run the following script:

To find simulators installed in the system:

Common Errors#

Command not found: pod#

You need to have Ruby installed on your system, and then install CocoaPods by running the following command in the terminal:

Invalid 'Podfile' file: cannot load such file - ..../react_native_pods#

Carry out the steps in the Setup section first.

Undefined symbol: ___darwin_check_fd_set_overflow#

This error means there was no architecture found for arm64. To fix this:

Make sure you opened the project in XCode using the *.xcworkspace extension file and NOT the *.xcodeproject file. And then:

  1. Go to File -> Project Settings (or Workspace Settings). Change Build System to Legacy Build System

  2. Clean pods and install again:

  3. Clean project using ⌘ + Shift + K keys

  4. Press ⌘ + , and then under Locations tab, click small arrow beside DerivedData. Delete this folder.

  5. Build again using ⌘ + B keys

Android#

First complete the steps in the Setup section above.

Android development is not dependent on a Mac and can equally be done on a Windows or Linux machine. Launch the app from Android Studio or the terminal.

Android Studio#

You can download the latest Android Studio from here.

  • Launch Android Studio

  • File -> Open, locate the android folder at the root location of the boilerplate project

  • Run the application from Run -> Run menu or the Shift + F10 keys. This will automatically build the project and run it. Doing this for the first time will take longer.

Android Studio

Terminal#

If you know the deviceId of the android simulator on your system, you can run:

replace DEVICE_ID with your device's id, eg. Pixel_2_API_28

To find the emulators in the system:

Run the simulator:

For the boilerplate code, run the following script:

Common Errors#

Module: 'app' platform 'android-29' not found#
  • In Android Studio, Tools -> SDK Manager -> Install API Level 29

  • Then restart Android Studio

If you cannot find SDK Manager, try Ctrl + Shift + A (⌘ + Shift + A for Mac) and then search for it.

SDK Manager#

If you cannot find AVD Manager (android virtual device), it can also be found on the toolbar:

Splash

The jumpstart app#

Jumpstart App

At this point, you should have your boilerplate app ready. You can find its features in the Project Structure section of this course.

It already has the tools you'll need to make a robust app, along with a code structure that will scale well as your project grows in size to production, where you may have hundreds or thousands of files.

Next Step: Through the rest of the course, we will build an ecommerce app and learn about the different parts of the React Native ecosystem and how they come together. It is important to understand how these pieces fit together, and our goal is to provide you with the holistic view of this you will need to build comprehensive apps using React Native. You should have a clear understanding of the what and how of React Native and should be able to make sound decisions about your choice of tools, design, navigations, etc.

We will also show you the right way (or at least, one of the right ways!) to make API calls, where and how to integrate services, and how to optimally manage the application state... all in all, how to go about building an app all the way from storyboarding through to production.

At the end of the course, we hope to see developers and entrepreneurs who are confident of building apps without investing a ton of money and time, able to extend their JavaScript expertise to not just web and backend, but mobile apps too.

Thank you! See you in the next module.

Start a new discussion. All notification go to the author.