The real power of React Native lies in the way it renders the mobile components compared to the other hybrid mobile app development frameworks such as PhoneGap or Apache Cordova. React Native accesses the native components of the mobile platform through an asynchronous bridge which makes the apps developed using React Native a real native app and not a hybrid one which runs in a HTML5 container. This improves the performance of the mobile applications considerably in comparison with the apps developed using the hybrid frameworks. In this guide let us look on bootstrapping a basic React Native mobile app for the Android platform.
Installing React Native
There are two ways to kick-start a React Native app, one is using the create-react-native-app project hosted in GitHub to bootstrap the project with no build configuration and without installing the SDK and any other dependencies since we will be testing the app through the Expo client for projects generated through this method.
However, for beginners, I would suggest to take some time and proceed with the normal setup flow instead of using create-react-native-app method, since the normal flow will give a solid understanding how everything works and will let you to setup a perfect environment to utilize numerous other features provided by the native SDK as well. So let us get started with the setup.
Installing the dependencies
To build an app with React Native, you need to first install Node.js, React Native Command line interface, Java Development Kit, Python 2 and Android Studio (for SDK and Simulator).
- Visit https://nodejs.org/en/ and download the latest LTS version highlighted below and proceed with the installation.
- Visit https://www.oracle.com/technetwork/java/javase/downloads/index.html and download the latest JDK as shown below and complete the installation. Ensure that the JDK is not less than version 8. To verify the successful installation of JDK, open the command prompt and enter the command java -version. The response should displayed the installed version of Java and the path where it is installed.
- Visit https://www.python.org/downloads/release/python-2715/ and download Python 2.7.X. Ensure that you installed the version 2.7.X and not 3.X.X. By the time of writing this guide, the latest version on the line of 2.7.X was 2.7.15. Download and install the appropriate binaries for your operating system as per the architecture of your machine. To verify the successful installation of Python, open command prompt and type the command python –version to view the installed version.
- Finally, visit https://developer.android.com/studio/ and download the latest version of Android Studio and proceed with the installation.
- During the installation of Android Studio, ensure that you choose the ‘Custom‘ option and select Android SDK, Android SDK Platform, Performance (Intel HAXM) and Android Virtual Device for installation. Once the setup is complete, open Android Studio to view the Welcome screen. From the Welcome Screen, select the ‘Configure‘ button displayed in the bottom right corner as shown below and open the ‘SDK Manager‘.
- From the SDK Manager window, select the options Google APIs, Andrid SDK Platform, Intel x86 Atom System Image and Intel x86 Atom_64 System Image and click ‘OK’. The necessary files will be downloaded and installed in your PC.
- As the final step, configure the environment variable for Android SDK by opening the environment variables window by right clicking Computer -> Properties -> Advanced System Settings (from the left pane) -> Environment Variables and set the parameter ANDROID_HOME as C:\Users\Ronald\AppData\Local\Android\sdk where Ronald will be your user name in the PC.
Bootstrapping your first React Native App
Now that we have configured the working environment for building our app, let us go ahead and bootstrap a basic app with single screen. In-order to generate our project files, create a folder in your desired path and open the command promote and cd into the project folder that you created and enter the following command,
react-native init SampleProject
This will download all necessary dependencies and the project directory structure and files for us. This process will take few minutes depending on the speed of your network connection and the progress of the downloads will be displayed in the command line interface as shown below.
Note that the project folder will be created with the name you specify in the command. In the above example, we have provided the project name as SampleProject. So a directory will be created in that name and all files will be placed under that directory.
After successful completion of the download process, start the Android Simulator through the AVD manager window which can be opened from Android Studio options Tools -> Android -> AVD Manager and create a new Virtual Device selecting the version of android in which you would like to test/run your app and start the virtual device (simulator).
React Native Project Structure
Upon running the react-native init <ProjectName> command, the project files will be downloaded within the project directory in the structure shown below.
This will contain all necessary files and configurations to run our app successfully. The file App.js is the entry point of our application which contains the source code for the application. We will look in detail about making changes to the file and extending the functionalities in the upcoming tutorial since this guide focuses on kick-starting the environment and the basic app.
Running your React Native App
To start the sample react native app, open the command prompt and cd into the project path and enter the following command,
Ensure that the simulator is up and running already before executing the above command. The command will start the app in the simulator. It will take few minutes to start the app in the simulator and you should be able to see the following screen once it is started.
One of the striking features of React Native is that it comes with an hot reload option which will update the app running on the simulator automatically while you make changes to the code base. This drastically improves the development experience and productivity of the programmers since they will be able to view the changes taking place in near real-time. I will write separate tutorials on various components and core structures of React Native and building real word applications using the framework in the upcoming series.
Should you face any difficulties in setting up React Native and bootstrapping the sample application, please post your queries in the comments section below and do not forget to give a thumbs up by liking and sharing this guide in Facebook if it helped you. Stay tuned for more tutorials.