Before starting to build the React Native App we need to set up the development environment first. For this, we have two options available, which are
- Expo CLI
- React Native CLI
Now let see what’s the difference between these two and which we need to use. Let’s start with Expo CLI.
Expo CLI
Expo CLI is a third-party service which is completely free, and you don’t have to pay to publish the app to AppStore or Play Store. By using Expo CLI, we don’t need to configure much to set up the environment, i.e Expo gives you less complexity environment to start work on. Its also have the prebuilt modules available to access device camera or user locations. The downside of Expo is, we don’t have full control over how the App is working when compared to the React Native CLI. In other words, your control limited inside the Expo module.
React Native CLI
As the name suggests, React Native CLI is managed by React Native Team who developed the React Native. React Native CLI comes with a basic set up and you need to spend some time to configure it before start building a React Native App. Also, if you want to use device camera or any other features, you might need to include a third-party module and need to configure it manually.
The main advantage of React Native CLI is, full control over code and we can integrate the native code (Android, iOS) to our JavaScript code which is not possible in Expo.
So, I would say, if we are going to build a very complex app which requires lots of manual code go for React Native CLI. If you are a beginner and start to walk in the React Native world go for Expo CLI.
In this series, I am using Expo as its easy and gives everything you need to start up with.
How to step up a development environment?
1. Download NodeJS
Now Let’s start with setting our development environment. Visit https://expo.io/learn to download NodeJS and other components. Don’t worry about a New name NodeJS, you don’t need to learn NodeJS to work with React Native. We need to install this to run the JavaScript on our machine.
Once you completed the install of NodeJS proceed to step 2.
2. Install Expo-cli using the command line
Open your command prompt and run npm install expo-cli –global, Here global denote to install the expo-cli in your machine which can be accessed from anywhere in your system. The installation will take some time to complete installations and we don’t need to worry about any error or warning shows in between if the installation completed with the highlighted lines. You might need to use sudo if you are on Linux.
Now you can create your first React Native App. From command prompt navigate to your directory where we are going to create the App and run expo init first-App. When you hit enter it will ask for the template and we can choose blank. This will install all components and modules which we need to build the React Native App. Once the installation completed, go to the first-App and run npm start / expo start. This will start a browser window with the Expo development tool. The first-App is the app name and the folder will get created automatically.
From this window, we can run the program on simulators on in the actual device. To run the program in an actual device you need to install Expo client which is available in play store and Appstore.
If you choose to React Native CLI we need to follow some manual steps which can be found here https://reactnative.dev/docs/environment-setup.