Setting Up the React Native Development Environment
You’ll need the use of specific tools for the development environment setup like Windows, NPM (Node Package Manager), Node.js (Version 8 or newer), React Native Command-line interface (React Native CLI), Java Development Kit (JDK 8 or newer), Android Studio, Visual Studio Code, and Built-in Emulator in the Studio. The blog will help you with different methods to set up the React Native Development environment for easy app creation.
Are you new to React Native mobile app development? Get started with Expo CLI in such cases. It is a tool built around React Native and has many features to make the development simple. The relevant features of the tool are ensuring the writing of React Native app within minutes. In case you’re familiar with app development, then you can start with React Native CLI. It needs Xcode or Android Studio to start the development process. If you already have the tools installed in the system, then start with the app development procedure instantly. Or else, install the tools to get the procedure running in minutes.
Table of Contents
- Why Choose React Native Development?
- Steps to Set-Up React Native Development Environment
- Final Thoughts!
Why Choose React Native Development?
Steps to Set-Up React Native Development Environment
To set up the React Native development environment, you need to install some of the tools initially. Follow the steps carefully and you’ll be able to set up the environment on your own. First, install the NodeJS and NPM in your system. Then follow the steps –
Installation of Create-React-Native-App
Proceed with the installation of create-react-native-app, once the NodeJS & NPM installation is successful.
C:\Users\Tutorialspoint> npm install –g create-react-native-app
Creation of Project
The next step in the setup will be to create a project by browsing the necessary folder. It is time to create a new React Native project as follows –
C:\Users\Tutorialspoint>cd Desktop C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative
Once the codes or commands mentioned above are implemented the specified way, a folder with specified names is created with different contents.
Install NodeJS Python and Jdk8
The installation of NodeJS and Jdk8 in your system is important to set up the development environment in a superior way. It is also recommended to install the latest version of yarn to avoid any kind of trouble.
Installation of React Native CLI
Use the install –g react-native-cli command for the installation of React Native commands line interface on npm.
npm install –g react-native-cli
Start React Native
Browser through the project folder to verify the installation and use the start command to move forward with the project –
C: \Users\Tutorialspoint\Desktop>cd MyReactNative C: \Users\Tutorialspoint\Desktop\MyReactNative>npm start
You’ll now get a QR code, once the above commands are implemented correctly. Use expo to run the react native apps on the Android version. Do the installation of the expo client on the Android device and scan the QR code that appears.
Ejection of the Project
Are you looking to use android studio for running the Android emulator? Press ctrl+c to come out of the current command line. Now, it is time to execute the run ‘eject command’ as
npm run eject
It is a prompting option for ejection and thus select the first option with arrows and then press ‘Enter’.
Now, suggest the name of the app on the home screen and the project name on the Android studio & Xcode projects.
If there is any error reflecting on the screen, ignore it and run React Native for android using the command –
Installation of Android Studio
Visit the office page and download the latest Android version. Once the installation file is downloaded, double-click on the option and proceed further with the installation process.
Configuration of AVD Manager
Click on the necessary icon in the menu option for configuring the AVD Manager.
Now choose a device definition and click on the ‘Next’ button. A System Image window appears in front of you and thus selects the ‘x86 Images’ tab.
Select ‘Marshmallow’ and then click on ‘Next’.
Finally, press the ‘Finish’ button to end the AVD configuration. Once the configuration of the virtual device is done, click on the play option under the ‘Actions’ column to get started with the Android emulator.
Open the Command Prompt option, and browse through the project folder. Next, execute the ‘react native run-android’ command.
Now as the app execution begins, you can see the status in the next prompt.
Go to the project folder ‘SampleReactNative/android’ and click on the ‘Android’ option. It is time to create a file as ‘local.properties ’and then add the necessary path –
Skd.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk Use your name in place of ‘Tutorialspoint’ and press Ok.
It is Time for Hot Reloading
For building the application, modify App.js and changes get incorporated or update automatically on the android emulator.
Now click on the android emulator and then select the option ‘Enable Hot Reloading’.
React Native is one of the reliable mobile app development platforms to build functional apps. Setting a React Native app development environment can be challenging for the first-timers and thus the above-mentioned steps will surely help. Contact React Native app developers who can assist you in the development environment setup. A quick conversation with the React Native app development experts will assist in the simple setup of the app development environment.