DEV Community 👩‍💻👨‍💻

Cover image for Setting Up Android Environment for Your First React Native Project
MTA Team
MTA Team

Posted on • Updated on

Setting Up Android Environment for Your First React Native Project


If you are interested in developing mobile apps with React Native but have no experience, this guide will let you start.

Prerequisites :

Android Studio :

Just download and install android studio from the link below.

https://developer.android.com/studio

JAVA SE Development Kit:

Again, download and install jdk that matches your system from the link below.

Java SE 13 - Downloads
Adding Environment Variables

After you installed jdk add “C:\Program Files\Java\jdk-13.0.2\bin” at the end of your “Path” variable in environment variables.

Create another variable in environment variables named “JAVA_HOME” with the path “C:\Program Files\Java\jdk-13.0.2

Your address may differ depending on your installed JDK version.

Check if path variables contain this folder and if not, add following with your username.

C:\Users\Your_Username\AppData\Local\Android\Sdk\platform-tools

Installing React Native

Install react-native with the command below

npm i -g react-native
Creating React Native Project

Go to the directory you want to create project in and create project with the command below

react-native init Example

When we type react-native init Example to command line it will create a folder named Example and create the project inside it. Open your project after it is created.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

This is our folder structure. App.js is our initial rendered file. So we are going to start from there.

Building Project in Android Studio

Before we try to run our application in our emulator, we need our npm modules and javascript code to be built so android can run it.

Open android studio and select the android folder in your project, open it.

Click make project button or press Ctrl + F9

If you don’t want to use emulator but your android phone,you can follow our article about connecting over usb debugging with cable or wifi without cable here.

Creating Virtual Device
Click tools from the menu in android studio and click AVD Manager
Click create virtual device button

Pick any device and click next

Download any image then click next.

You can create device with the default configurations by clicking finish.

You can start your virtual device by pressing the first icon.

Open your project directory in terminal and run this command

react-native run-android

If you get any of these errors change directory into android and run clean command

cd android
./gradlew clean

If you run this command in android studio terminal, just run

gradlew clean

After cleaning project if you still get these errors, just re run the react-native run-android command and it will work eventually.

* Task :app:packageDebug FAILED

java.io.IOException: Unable to delete directory ……

* What went wrong:

Execution failed for task ‘:app:compileDebugJavaWithJavac’

Our app started.

Thank you for reading. You can follow us to learn more about react & react native development.

Feel free to ask anything about this article if you get any errors. You can contact any of us on linkedin.

MTA Team:

Ali Gümüş Tosun - Semih Sevincli - Aslancan Yılmaz - Burak Arıcı

LinkedIn Accounts:

Ali Gümüş Tosun - Semih Sevinçli - Aslancan Yılmaz - Burak Arıcı

By MTA Team on .

Canonical link

Exported from Medium on June 23, 2020.

Top comments (1)

Collapse
kiransiluveru profile image
kirankumar

What is the difference between Layout and View in React Native?
find links for their APIs
Layout: reactnative.dev/docs/layout-props
View: reactnative.dev/docs/view-style-props

Thanks in advance

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.