{"id":7159,"date":"2023-09-27T07:31:02","date_gmt":"2023-09-27T07:31:02","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=7159"},"modified":"2024-02-23T05:57:33","modified_gmt":"2024-02-23T05:57:33","slug":"react-native-development-services-in-australia-setting-up-the-development-environment","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/","title":{"rendered":"React Native development services in Australia | Setting up the development environment"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">If you ask us which element is the core of building a React Native application, we would say\u2013Setting up the development environment.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Just like traditional business, finding a location and constructing the building is the base to accelerate the operation of your business. Setting the development environment works just the same way.\u00a0<\/span><\/p>\n<p>React Native app development<span style=\"font-weight: 400;\"> framework is said to be evergreen as it implies everything that is required to build a full-fledged application. And to prove this statement, this blog post has a lot to offer.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">React Native development services in Australia are the most dependable country for this framework. According to statistics, the use of the React Native framework in Australia is approximately 805 which will reflect higher in the coming years.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s understand the need for an environment setup first!\u00a0<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Why-do-we-need-a-Development-Environment\"><\/span><span style=\"font-weight: 400;\">Why do we need a Development Environment?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Before deploying our applications, we need to construct and edit them locally in a development environment. This gives programmers a significant degree of freedom and flexibility.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Simply said, a development environment is a work area where we do development. A development environment is often said to be a number of tools and services that help us create the code or write the code for the application we want.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This help takes many different forms and often includes everything we would want while writing code for your React Native development services in Australia projects.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The majority of development environments provide built-in debugging and patching capabilities.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">They frequently help with activities related to maintaining and updating our codes.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Integrated Development Environments, or IDEs, provide us with a synchronized interface to inspect our programs as we build them. This is how we typically work nowadays.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For developers, the entire development process\u2014writing, testing, and packaging\u2014is greatly simplified.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Development environments can be toolkit environments (which support various programming languages) or single-language-oriented environments. Given that React Native is a framework that supports several different languages, it should come as no surprise that we choose toolkit environments for our <\/span>React Native app development services<span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s start setting up your React Native app now!<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"React-Native-Development-Environment-Setup\"><\/span><span style=\"font-weight: 400;\">React Native Development Environment Setup<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When developing for React Native, we often utilize the <\/span><i><span style=\"font-weight: 400;\">Expo CLI<\/span><\/i><span style=\"font-weight: 400;\"> or <\/span><i><span style=\"font-weight: 400;\">React Native CLI<\/span><\/i><span style=\"font-weight: 400;\"> in conjunction with Android Studio or XCode. You are free to utilize either for your project, but if you&#8217;re unsure which is best for you, this blog may be able to help.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Snack\"><\/span><span style=\"font-weight: 400;\">Snack<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Snack is a browser-based programming environment for React Native programming, or as its creators prefer to refer to it, a playground. That&#8217;s true, you don&#8217;t need to set up any IDEs, customize them, install CLIs, or start out totally committed to React Native.\u00a0 Start developing your React Native project by going to the Snack browser environment.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You heard it right, you don&#8217;t need to set up any IDEs, customize them, install CLIs, or start out totally committed to React Native. You may easily start developing your React Native project by going to the Snack browser environment. It is ideal for both novices and senior citizens who wish to experiment a bit. You can easily develop, test, and package your codes thanks to it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But we&#8217;re here on a more serious adventure. We&#8217;ll talk about how to set up a React Native development environment on your machine. There are two options, one of which is simpler. Let&#8217;s investigate them!<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Expo-Go\"><\/span><span style=\"font-weight: 400;\">Expo Go\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">This is the simple route.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you are new to mobile programming, you should choose Expo Go for setting up a React Native development environment for creating mobile user interfaces. As we shall see in a moment, setting up Expo Go is pretty simple. A number of helpful features on React Native come along with Expo Go. An emulator and the most recent version of Node.js are all that are required to set up Expo Go.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s make a &#8220;MyfirstProject&#8221; React Native project in Expo Go!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can quickly launch a development server if you&#8217;re using<\/span><b><i> npm<\/i><\/b><span style=\"font-weight: 400;\"> by:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">npx create-expo-app MyfirstProject\r\n\r\ncd MyfirstProject\u00a0\r\n\r\nnpm start\u00a0\r\n\r\n# you can also use: npx expo\u00a0\r\n\r\nstart<\/pre>\n<p><span style=\"font-weight: 400;\">To implement it in a similar development server in yarn use the following code set up:\u00a0<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">cd MyfirstProject\u00a0\r\n\r\nyarn start\u00a0\r\n\r\n# you can also use: yarn expo\u00a0\r\n\r\nstart<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Problems-with-Expo-Go\"><\/span><span style=\"font-weight: 400;\">Problems with Expo Go<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Expo Go makes it simple to begin working on a new React Native project, but it comes with a number of limitations that will ultimately limit your ability to code in React Native app development.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It forbids the use of native codes.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In Expo Go<\/span><a href=\"https:\/\/dianapps.com\/blog\/integrating-apis-in-react-native-for-enhanced-functionality\/\"><span style=\"font-weight: 400;\">, integrating APIs in React Native<\/span><\/a><span style=\"font-weight: 400;\"> devices for efficient Android and iOS APIs is not available.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Not always appropriate if you want to create minimal apps.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Your free constructions may occasionally become queued in Expo Go.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In light of this, it would be great to learn how to set up React Native development services in Australia with the environment in your system using the React Native CLI. So let&#8217;s do it.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"React-Native-CLI\"><\/span><span style=\"font-weight: 400;\">React Native CLI<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Compared to Expo, setting up React Native CLI is just slightly more difficult because it needs XCode or Android Studio. If you have experience with mobile programming, setting up and using React Native CLI should be a breeze for you. If you are a novice and do not already have XCode or Android Studio installed, it would take some time to install and set up either of the IDEs. It might be a little overwhelming at first, particularly if you&#8217;re just getting started.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, do not worry!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This comprehensive guide will show you how to configure your project in React Native CLI. As we will be building up a development environment for a project targeted at Android OS, we will be using Android Studio for these examples.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It&#8217;s crucial to remember that the setup procedures vary slightly depending on the Development OS. We will discuss the procedures for Windows, macOS, and Linux in this blog.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Development-Environment-with-React-Native-CLI-on-macOS\"><\/span><span style=\"font-weight: 400;\">Development Environment with React Native CLI on macOS<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><span style=\"font-weight: 400;\">Prerequisites:\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You would also need Node.js, Watchman, JDK, and Android Studio installed on macOS in addition to React Native CLI. Facebook created Watchman, a program that only &#8220;watches&#8221; changes to your filesystems. This utility is suggested since it significantly improves the <\/span><a href=\"https:\/\/dianapps.com\/blog\/how-to-improve-the-performance-of-a-react-native-app\/\"><span style=\"font-weight: 400;\">React Native app performance<\/span><\/a><span style=\"font-weight: 400;\"> of your code. Using Homebrew, you may install both Watchman and Node. Install Node 14 or above, if possible. Enter the following in a Terminal to install Watchman and Node using Homebrew:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true \">brew installnode\u00a0\r\n\r\nbrew install\u00a0\r\n\r\nwatchman<\/pre>\n<p><span style=\"font-weight: 400;\">You need JDK 11 or later in order to function with React Native. Once more using Homebrew, install the OpenJDK package Azul Zulu to install your JDK by running the following commands:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">brew tap homebrew\/cask-versions\u00a0\r\n\r\nbrew install --cask zulu11<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Setting-up-the-Development-Environment\"><\/span><span style=\"font-weight: 400;\">Setting up the Development Environment<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We can now set up the Android Development Environment as we have all the tools required to build up our development environment. Before setting up the development environment, Android Studio must first be installed and configured, just as on Windows. To make the stages simpler to follow, let&#8217;s go over them one at a time.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"1-Install-Android-Studio\"><\/span><span style=\"font-weight: 400;\">1. Install Android Studio<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The following boxes must be ticked in the installation wizard during the download and installation of Android Studio in order to install these<\/span><a href=\"https:\/\/dianapps.com\/blog\/a-deep-dive-into-the-react-native-component-lifecycle\/\"><span style=\"font-weight: 400;\"> component lifecycle<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android SDK<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Platform for Android SDK<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android Virtual Device<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Complete the setting so that the Welcome Screen will appear.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"2-Download-the-Android-SDK\"><\/span><span style=\"font-weight: 400;\">2. Download the Android SDK<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The Android 12 (S) SDK is required for React Native. To set up that:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">By selecting the &#8220;More Actions&#8221; button, select the &#8220;SDK Manager&#8221; option.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select the &#8220;SDK Platforms&#8221; tab in SDK Manager.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\" wp-image-7162 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/f76465262dde3f9beced943ff66f39da8ae0567a-786x593-1.png\" alt=\"\" width=\"687\" height=\"518\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Expand the Android 12 (S) option and choose the &#8220;Show Package Details&#8221; checkbox in this tab. You must check the following boxes in this situation:<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Platform SDK for Android 31<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Google APIs\/Intel x86 Atom_64 System Image x86 Atom System Image from Intel<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Chrome APIs System Image for ARM 64 v8a (just for Apple M1 Silicon)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Additionally, make sure that &#8220;Android SDK Build-tools&#8221; is set to 31.0.0 under the &#8220;SDK Tools&#8221; tab.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As soon as you click the &#8220;Apply&#8221; button on the Android Studio Welcome Screen, your Android SDK and other necessary tools will be installed.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"3-Setting-up-ANDROID-SDK-ROOT\"><\/span><span style=\"font-weight: 400;\">3. Setting up ANDROID_SDK_ROOT<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Similar to ANDROID_HOME, you need to insatll ANDROID_SDK_ROOT an environment variable that create native code apps.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Add the following commands to $HOME\/.bash_profile or $HOME\/.bashrc to do this:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">export ANDROID_SDK_ROOT=$HOME\/Library\/Android\/sdk\u00a0\r\n\r\nexport PATH=$PATH:$ANDROID_SDK_ROOT\/emulator\u00a0\r\n\r\nexport PATH=$PATH:$ANDROID_SDK_ROOT\/platform-tools<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Next, use source $HOME\/.bash_profile to load the configuration into bash.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Or, you may use source $HOME\/.zprofile to add it to the current shell.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To make sure ANDROID_SDK_ROOT is correctly configured, you must now execute echo $ANDROID_SDK_ROOT.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Run echo $PATH to confirm that the appropriate folders have been added to the path on your macOS machine, which is now completely set up for Android Studio.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Run React Native CLI to finish setting up your development environment by using:<\/span><\/p>\n<p><b>npx react-native &lt;command&gt;<\/b><\/p>\n<p><span style=\"font-weight: 400;\">From macOS, you can now start a new React Native project with:<\/span><\/p>\n<p><b>npx react-native init MyfirstProject<\/b><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Development-Environment-with-React-Native-CLI-on-Windows\"><\/span><span style=\"font-weight: 400;\">Development Environment with React Native CLI on Windows<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Prerequisites-2\"><\/span><span style=\"font-weight: 400;\">Prerequisites\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You would also require Node.js, the Java SE Development Kit (JDK), and Android Studio to be installed in addition to React Native CLI. Using the well-known Windows package manager Chocolatey, you should install an LTS version of Node.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, it would be preferable to install Node using the Node version of Windows Manager, nvm-windows, if you need to transition between LTS and other versions of Node. Again, Chocolatey may be used to install JDK:<\/span><\/p>\n<p><b>choco install -y nodejs-lts openjdk11<\/b><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Setting-up-the-Development-Environment-2\"><\/span><span style=\"font-weight: 400;\">Setting up the Development Environment<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Given the number of stages, setting up the development environment may seem a little challenging. Installing and configuring Android Studio is required prior to setting up the development environment. To make the stages simpler to follow, let&#8217;s go over them one at a time.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"1-Install-Android-Studio-2\"><\/span><span style=\"font-weight: 400;\">1. Install Android Studio<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The following boxes must be ticked in the installation wizard during the download and installation of Android Studio in order to install these components:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android Virtual Device\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Performance (Intel \u00ae HAXM)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android SDK\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android SDK Platform<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Complete the configuration in order to access the Welcome Screen.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"2-Install-the-Android-SDK\"><\/span><span style=\"font-weight: 400;\">2. Install the Android SDK<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The Android 12 (S) SDK is required to install the Android SDK React Native. To set up, follow the below-given steps:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">By selecting the &#8220;More Actions&#8221; button, select the &#8220;SDK Manager&#8221; option.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select the &#8220;SDK Platforms&#8221; tab in SDK Manager.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\" wp-image-7162 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/f76465262dde3f9beced943ff66f39da8ae0567a-786x593-1.png\" alt=\"\" width=\"747\" height=\"564\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Expand the Android 12 (S) option and choose the &#8220;Show Package Details&#8221; checkbox in this tab. You must check the following boxes in this situation:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Platform SDK for Android 31<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Google APIs with Intel x86 Atom_64 System Image x86 Atom System Image from Intel<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Additionally, make sure that &#8220;Android SDK Build-tools&#8221; is set to 31.0.0 under the &#8220;SDK Tools&#8221; tab.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As soon as you click the &#8220;Apply&#8221; button on the Android Studio Welcome Screen, your Android SDK and other necessary tools will be installed.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"3-Setting-up-ANDROID-HOME\"><\/span><span style=\"font-weight: 400;\">3. Setting up ANDROID_HOME<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">An environment variable called ANDROID_HOME is required to use React Native. To set this up:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go to &#8220;Windows Control Panel&#8221; first.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">From there, choose &#8220;User Accounts&#8221; and then &#8220;User Accounts&#8221; once again.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click &#8220;Change my environment variable&#8221; to continue.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click &#8220;New&#8221; to establish a new user variable called ANDROID_HOME that points to your Android SDK path.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"size-full wp-image-7163 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/07019d293cb03a3b20ccc0341f243e5002d2bfd8-653x165-1.png\" alt=\"\" width=\"653\" height=\"165\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This would automatically install the SDK in the following location: %LOCALAPPDATA%\\Android\\Sdk<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Open Powershell from a new Command Prompt window to confirm that the new environment variable has been installed correctly. Type &#8220;Get-ChildItem -Path Env:&#8221; into Powershell to see if ADROID_HOME has been inserted.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"4-Adding-platform-tools-to-the-Path\"><\/span><span style=\"font-weight: 400;\">4. Adding platform tools to the Path\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">First, as we did in the preceding step, navigate to &#8220;Change my environment variable&#8221; from User Accounts in the Windows Control Panel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select &#8220;Edit&#8221; after clicking &#8220;Path&#8221; right now.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">After that, choose &#8220;New&#8221; to include this Path in platform tools.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The platform-tools folder would be generated automatically at %LOCALAPPDATA%AndroidSdk.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Your Android Studio is ready. Run React Native CLI to finish setting up your development environment by using:<\/span><\/p>\n<p><b>npx react-native &lt;command&gt;<\/b><\/p>\n<p><span style=\"font-weight: 400;\">So you are ready to launch your React Native development services in Australia with our environment development setup. Let\u2019s explore setting up the environment for Linux now!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also read the state of<\/span><a href=\"https:\/\/dianapps.com\/blog\/the-state-of-react-native-for-web-windows-and-macos-in-2023\/\"><span style=\"font-weight: 400;\"> React Native for Web, Windows, and macOS<\/span><\/a><span style=\"font-weight: 400;\"> to understand each of the device\u2019s environment setup more efficiently.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Development-Environment-with-React-Native-CLI-on-Linux\"><\/span><span style=\"font-weight: 400;\">Development Environment with React Native CLI on Linux<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Prerequisites-3\"><\/span><span style=\"font-weight: 400;\">Prerequisites<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If you&#8217;re using Linux, you&#8217;ll also need to have Node.js, Watchman, a JDK, and Android Studio installed on your machine in addition to React Native CLI. Use the installation instructions for Linux to install Node 14 or later versions of Node. You require JDK version 8 or above for your JDK. AdoptOpenJDK or your system packager can be used to install OpenJDK. If you choose, you may also decide to install Oracle JDK 14.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Setting-up-the-Development-Environment-3\"><\/span><span style=\"font-weight: 400;\">Setting up the Development Environment<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Even though the method is quite similar to that used in Windows or macOS, setting up the development environment takes a little while. Before we set up the development environment, Android Studio must be installed and configured, just like we did before. The detailed instructions for setting up the Android Development Environment for React Native on Linux are provided here:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But before that, read along how to build steller<\/span><a href=\"https:\/\/dianapps.com\/blog\/how-to-develop-stellar-android-apps-in-linux\/\"><span style=\"font-weight: 400;\"> Android apps in Linux<\/span><\/a><span style=\"font-weight: 400;\"> for an insightful grasp upon creating one easily. And then come back here for more information.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"1-Install-Android-Studio-3\"><\/span><span style=\"font-weight: 400;\">1. Install Android Studio<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Here are the checklists you need for the installation wizard when the download and installation of Android Studio in order to install these components:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android Virtual Device\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Performance (Intel \u00ae HAXM)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android SDK\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android SDK Platform<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Complete the configuration in order to access the Welcome Screen.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"2-Install-the-Android-SDK-2\"><\/span><span style=\"font-weight: 400;\">2. Install the Android SDK<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">You need to install The Android 12 (S) SDK from the Android SDK React Native. To set up, follow the below-given steps:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">By selecting the &#8220;More Actions&#8221; button, select the &#8220;SDK Manager&#8221; option.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select the &#8220;SDK Platforms&#8221; tab in SDK Manager.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Expand the Android 12 (S) option and choose the &#8220;Show Package Details&#8221; checkbox in this tab. You must check the following boxes in this situation:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Platform SDK for Android 31<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Google APIs with Intel x86 Atom_64 System Image x86 Atom System Image from Intel<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Additionally, make sure that &#8220;Android SDK Build-tools&#8221; is set to 31.0.0 under the &#8220;SDK Tools&#8221; tab.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As soon as you click the &#8220;Apply&#8221; button on the Android Studio Welcome Screen, your Android SDK and other necessary tools gets available. In case you face any problems, ask your hired React Native app development company to concisely look into the error.\u00a0<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"3-Setting-up-ANDROID-SDK-ROOT-2\"><\/span><span style=\"font-weight: 400;\">3. Setting up ANDROID_SDK_ROOT<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Similar to ANDROID_HOME, ANDROID_SDK_ROOT is an environment variable that must be set up in order to create native code apps.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Add the following commands to $HOME\/.bash_profile or $HOME\/.bashrc to do this:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">export ANDROID_SDK_ROOT=$HOME\/Library\/Android\/sdk\u00a0\r\n\r\nexport PATH=$PATH:$ANDROID_SDK_ROOT\/emulator\u00a0\r\n\r\nexport PATH=$PATH:$ANDROID_SDK_ROOT\/platform-tools<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Next, use source $HOME\/.bash_profile to load the configuration into bash.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Or, you may use source $HOME\/.zprofile to add it to the current shell.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Make sure ANDROID_SDK_ROOT is set properly, and execute echo $ANDROID_SDK_ROOT in the next step.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Run echo $PATH to confirm that the appropriate folders adds to the path on your macOS machine, which is now completely set up for Android Studio.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Once again, your Android Studio is ready to push forward, but this time on a Linux machine. Run React Native CLI to finish setting up your development environment by using:<\/span><\/p>\n<p><b>npx react-native &lt;command&gt;<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Add the following to start developing your first React Native development services in Australia projects in Linux:<\/span><\/p>\n<p><b>npx react-native init MyfirstProject<\/b><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><span style=\"font-weight: 400;\">Conclusion<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you&#8217;ve hopefully successfully installed your React Native Development Environment and even launched your first React Native Project for your business.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Run my first project is all that remains!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To execute apps, React Native leverages Metro, a JavaScript bundler that comes with it. To learn how to launch and execute your React Native apps using the Metro Bundler, refer to the Metro Docs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, the React Native Team&#8217;s Integration Guide may be useful to you if you wish to integrate your freshly created React Native code into an already existing application. If not, feel free to reach out to a <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native app development company in Australia<\/b><\/a><span style=\"font-weight: 400;\"> or return here for another in-depth discussion of these!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Until then, keep exploring all the norms of React Native for efficient and round-the-clock development experience. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you ask us which element is the core of building a React Native application, we would say\u2013Setting up the development environment.\u00a0 Just like traditional business, finding a location and constructing the building is the base to accelerate the operation of your business. Setting the development environment works just the same way.\u00a0 React Native app [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7164,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[104,369],"class_list":["post-7159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native","tag-react-native-app-development-company-in-australia"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/React-Native.png",791,445,false],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/React-Native.png",463,260,false],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/React-Native.png",300,169,false],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/React-Native.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Native development services in Australia<\/title>\n<meta name=\"description\" content=\"How to set up the React Native development environment in Australia? Read this guide in detail.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native development services in Australia\" \/>\n<meta property=\"og:description\" content=\"How to set up the React Native development environment in Australia? Read this guide in detail.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-27T07:31:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-23T05:57:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/React-Native.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native development services in Australia","description":"How to set up the React Native development environment in Australia? Read this guide in detail.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/","og_locale":"en_US","og_type":"article","og_title":"React Native development services in Australia","og_description":"How to set up the React Native development environment in Australia? Read this guide in detail.","og_url":"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-09-27T07:31:02+00:00","article_modified_time":"2024-02-23T05:57:33+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/09\/React-Native.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/","url":"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/","name":"React Native development services in Australia","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-09-27T07:31:02+00:00","dateModified":"2024-02-23T05:57:33+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"How to set up the React Native development environment in Australia? Read this guide in detail.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/react-native-development-services-in-australia-setting-up-the-development-environment\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Native development services in Australia | Setting up the development environment"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=7159"}],"version-history":[{"count":7,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7159\/revisions"}],"predecessor-version":[{"id":8549,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7159\/revisions\/8549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/7164"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=7159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=7159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=7159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}