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.
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 Github branch Readme
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,
nvmare both really great at managing that.
Install the packages using
yarn. Run this command at the root location of the project:
npm if you prefer:
To install Yarn, run command:
npm i -g yarn
Start the Metro Bundler:
For iOS development, a Mac machine is required.
First complete the steps in the Setup section above.
pod dependencies of the project. This is a one-time step. Pods are dependency managers, similar to
Move to the
iosfolder and install pods:
You can now either launch the app from XCode or the terminal.
Open the boilerplate project from the path:
Launch the application from XCode using the
⌘ + Rkeys.
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).
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:
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:
Go to File -> Project Settings (or
Workspace Settings). Change Build System to Legacy Build System
Clean pods and install again:
Clean project using
⌘ + Shift + Kkeys
⌘ + ,and then under
Locationstab, click small arrow beside
DerivedData. Delete this folder.
Build again using
⌘ + Bkeys
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.
You can download the latest Android Studio from here.
Launch Android Studio
File -> Open, locate the
androidfolder at the root location of the boilerplate project
Run the application from Run -> Run menu or the
Shift + F10keys. This will automatically build the project and run it. Doing this for the first time will take longer.
If you know the
deviceId of the android simulator on your system, you can run:
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:
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.
If you cannot find AVD Manager (android virtual device), it can also be found on the toolbar:
The 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.
Thank you! See you in the next module.