Installation of Xcode for React Native IOS Development

This post will show the process of Installation of Xcode for React Native IOS Development. For those who are new in the IOS development, Xcode is an integrated development environment for macOS(only) containing a suite of software development tools developed by Apple for developing software for macOS, iOS, watchOS, and tvOS as similar as of Android Studio for Android development. So let’s get started with the installation process.

If you also want to install Android Studio the here is How to Setting up Android Development Environment & Android Studio in Mac OS.

1. Create a Developer Account (Apple ID)

First of all, you need to create a developer account here on the official developer site of the Apple. Open the link (https://developer.apple.com) and click onto the Account menu. This will redirect you to the login page where you can log in from your Apple ID(User ID) and Password or if you have no Apple ID then you can generate one using signup option.

There are no charges to make an Apple ID / Apple Account. It is completely free.

After login/signup you can see the following screen

Here You can click on the Downloads to see the latest version of Xcode available. We did this just to make our Apple ID which we will require while installing the Xcode.

2. Installation of Xcode

After creating the developer account you can see App Store in Dock with the Icon like alphabet “A”. 

Click on the icon and You will see App Store window will open. Now in search bar search for Xcode. and you will see the result similar to below image. Now click on GET and after that Install.

After Clicking on the install option you will be asked for the Apple ID and password. Please insert the Apple ID and password you have generated in the first step.

Now sit back and relax it will automatically download and install the Xcode in your Mac.

You can also see the process in launchpad.

This was the Installation of Xcode for React Native IOS Development. you don’t need to install any external simulator to run your app after installing Xcode. Everything needed for the IOS development will come along with the Xcode package.

If you are facing any problem or if you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂

 

2 Steps to Create and Launch the Android Virtual Device

Here are the 2 Steps to Create and Launch the Android Virtual Device. This post contains the way to create Android Virtual Device / Emulator and Different ways to launch the Emulator.

To run your React Native Android app you will need an Android device. There are two ways to have an Android environment to test your app:

  1. A Physical Android Device.
  2. An Android Virtual Device, which allows you to emulate an Android device on your computer.

Before preparing the virtual device you should set up the Android development environment for that if you already did that then you can proceed to the next step but if haven’t done that then you can see Installation of Android Studio and Setting up Android Development Environment which will help you to do so.

1. Using a Physical Device

If you have a physical Android device, you can use it for development in place of an AVD by plugging it into your computer using a USB cable and following the instructions here.

2. Using a Virtual Device

You can see the list of available Android Virtual Devices (AVDs) by opening the “AVD Manager” from within Android Studio. Look for an icon that looks like this: If you have just installed Android Studio, you will likely need to create a new AVD. Select “Create Virtual Device”, then pick any Phone from the list and click “Next”.

Select the “x86 Images” tab -> then look for the Marshmallow API Level 23, x86_64 ABI image with an Android 6.0 (Google APIs) target.

If you don’t have HAXM installed, click on “Install HAXM” or follow these instructions to set it up, then go back to the AVD Manager.

Click “Next” then “Finish” to create your AVD. Now click on the green triangle button next to your AVD to launch it.

Launch Virtual Device from the terminal

To launch the virtual device from the terminal without opening the android studio, again and again, you need to go to the SDK directory and then to Sdk\tools\bin default path is here C:\Users\Admin\AppData\Local\Android\Sdk\tools\bin after that run following command

This will take you to SDK > tool > bin directory

Lists all the AVD devices that you have created in the above post.

Will take you to the parent directory

You can see the AVD opening.

This is how you can Create and Launch the Android Virtual Device.

If you are facing any problem or if you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂

Setting up Android Development Environment & Android Studio in Mac OS

To run and test your React Native application on the android device you need to set up the Android Environment. Setting up your development environment in Mac OS is easy but can be somewhat tedious if you’re new to Android development. So let’s get started with the installation of Android Studio and Setting up Android Development Environment in Mac OS. If you want to install the same on Windows or Linux platform you can visit 3 Steps to Setting up Android Development Environment & Android Studio in Windows and Linux.

If you want to install Xcode also then here is the process of Installation of Xcode for React Native IOS Development.

1. Download Android Studio

To install Android Studio in your Mac you need to Download Android Studio first.  Please visit the official website of Android Developers using this link and download the Studio.

2. Install Android Studio

After finishing the downloading you will see an auto-generated popup window or if not then you can find the downloaded file in your download directory. You can double click the file and can see the dialog.

For those who are new users for the mac please remember you need to add any new application to the Application of Mac. So to do that just click on the Android studio logo and drag it to the application logo side which will move Android Studio in Applications and install it.


3. Installation of SDK

After installation of the Android Studio, you need to install SDK and other dependencies to set up the Android Development Environment which is very simple. You just need to follow the instruction to install the SDK.




And Here you go.. Installation is done.

This is how you can install the Android Studio and can set up the Android Development Environment in your Mac OS. Next, You will need an Android device to run your React Native Android app. This can be either a physical Android device or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. To create an Android Virtual Device you can follow how to create an Android Virtual Device and different ways to launch the Emulator.

If you are facing any problem or if you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂

3 Steps to Setting up Android Development Environment & Android Studio

To run and test your React Native application on the android device you need to set up the Android Environment. Setting up your development environment can be somewhat tedious if you’re new to Android development. If you’re already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps. Here are 3 Steps to Setting up Android Development Environment & Android Studio. If you want to install the same on Mac OS then you can visit Setting up Android Development Environment & Android Studio in Mac OS.

1. Install Android Studio

Download and install Android Studio. Choose a “Custom” setup when prompted to select an installation type. Make sure the boxes next to all of the following are checked:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

Then, click “Next” to install all of these components.

Once setup has finalized and you’re presented with the Welcome screen, proceed to the next step.

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 9 (Pie) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

The SDK Manager can be accessed from the “Welcome to Android Studio” screen. Click on “Configure”, then select “SDK Manager”.

The SDK Manager can also be found within the Android Studio “Preferences” dialog, under Appearance & Behavior → System Settings → Android SDK.

Select the “SDK Platforms” tab from within the SDK Manager, then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 9 (Pie) entry, then make sure the following items are all checked:

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the “SDK Tools” tab and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build-Tools” entry, then make sure that 28.0.3 is selected.

Finally, click “Apply” to download and install the Android SDK and related build tools.

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

3.1. For Windows User

Open the System pane under System and Security in the Windows Control Panel, then click on Change settings. Open the Advanced tab and click on Environment Variables. Click on New to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

The SDK is installed, by default, at the following location:

You can find the actual location of the SDK in the Android Studio “Preferences” dialog, under Appearance & Behavior → System Settings → Android SDK. Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.

Add platform-tools to Path

Open the System pane under System and Security in the Windows Control Panel, then click on Change settings…. Open the Advanced tab and click on Environment Variables…. Select the Path variable, then click Edit. Click New and add the path to platform-tools to the list.

The default location for this folder is:

3.2. For Linux Users

Assuming you have the SDK extracted at ~/Android/Sdk

Add the following lines to your $HOME/.bash_profile(If you unable to find then try for $HOME/.bashrc ) config file:

To test if you have set it up correctly run the below commands on a terminal window

  1. Run

    //will print the path to your SDK /home/Android/Sdk
  2. Run

    //will print /home/<user>/Android/Sdk/tools/android
  3. Run

    //If it opens up Android SDK Manager, you are good to go.

This is how you can install the Android Studio and can set up the Android Development Environment. Next, You will need an Android device to run your React Native Android app. This can be either a physical Android device or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. To create an Android Virtual Device you can follow how to create an Android Virtual Device and different ways to launch the Emulator.

If you are facing any problem or if you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂

Latest Guide to Install npm and node js in Mac OS

Just like other JavaScript frameworks React Native also requires npm to manage the dependency so here is the Latest Guide to Install npm and node js in Mac OS.

For those who are new in the Javascript framework world

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.

We can say that npm is a package manager for Node.js with hundreds of thousands of packages.

Although it does create some of your directory structure/organization, this is not the main purpose. The main goal, as you touched upon, is the automated dependency and package management.

Whenever you work with npm/node you can see it manages a file called package.json in which it stores all the dependency you have used in your project under the dependency section. Which means you can specify your project’s dependencies in the package.json file and any time you or anyone else needs to get started with your project they can just need to run npm install which will install all the dependencies in the node_module directory. On top of this, it is also possible to specify what versions your project depends upon to prevent updates from breaking your project.

In this example, we will show you how to install npm and node js in Mac OS, If you have a Linux or Windows machine then please visit Latest Guide to Install npm and node js for Ubuntu and Windows.

Prerequisites

Before you can install Node, you’ll need to install two other applications. Fortunately, once you’ve got these on your machine, installing Node takes just a few minutes.

  1. XCode. Apple’s XCode development software is used to build Mac and iOS apps, but it also includes the tools you need to compile software for use on your Mac. XCode is free and you can find it in the Apple App Store.
  2. Homebrew. Homebrew is a package manager for the Mac — it makes installing most open source sofware (like Node) as simple as writing brew install node. You can learn more about Homebrew at the Homebrew website. To install Homebrew just open Terminal and type ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)". You’ll see messages in the Terminal explaining what you need to do to complete the installation process.

Install npm and node js in Mac OS

1. First of all, you need to check whether Homebrew is installed in your Mac or not? To check this run

If you already have Homebrew installed it will show you the installed version of Homebrew

else will show brew: command not found

2. If you have Homebrew installed then you can skip this step else install Homebrew using

3. Now after installing brew you can run the following command to install node and npm in your Mac. This will completely install node into your Mac.

4. After installation of node. You can check using

This will show the installed version of node and npm in your Mac.

How to Update Node and NPM

New versions of node and npm come out frequently. You can use Homebrew to update the software it installs.
1. Make sure Homebrew has the latest version of the Node package

2. Upgrade Node

How to Uninstall Node and NPM

You can use Homebrew to uninstall packages

This was the best way to install the nodejs and npm in Mac OS. If you are facing any problem or if you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂

Latest Guide to Install npm and node js for Ubuntu and Windows

Just like other JavaScript frameworks React Native also requires npm to manage the dependency so here is the Latest Guide to Install npm and node js for Ubuntu and Windows.

For those who are new in the Javascript framework world

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.

We can say that npm is a package manager for Node.js with hundreds of thousands of packages.

Although it does create some of your directory structure/organization, this is not the main purpose. The main goal, as you touched upon, is the automated dependency and package management.

Whenever you work with npm/node you can see it manages a file called package.json in which it stores all the dependency you have used in your project under the dependency section. Which means you can specify your project’s dependencies in the package.json file and any time you or anyone else needs to get started with your project they can just need to run npm install which will install all the dependencies in the node_module directory. On top of this, it is also possible to specify what versions your project depends upon to prevent updates from breaking your project.

It is definitely possible to manually download your libraries, copy them into the correct directories, and use them that way. However, as your project and list of dependencies grows, this will quickly become time-consuming and messy. It also makes collaboration and sharing more difficult. So to make our life easy let’s start installing npm.

Install npm and node js for Ubuntu and Windows

There are many different operating systems available in the world but we are covering Ubuntu and Windows to install node and npm in this example, If you have a Mac machine then please visit Latest Guide to Install npm and node js in Mac OS.

1. For Window Users

  • Download the Windows installer from the Nodes.js website.
  • Run the installer (the .msi file)
  • Follow the prompts in the installer.
  • Restart your computer. You won’t be able to run Node.js until you restart your computer.
  • Test Node: Open the Windows Command Prompt, Powershell or a similar command line tool, and type

    This should print a version number something like v6.9.5.
  • Test npm: To see if npm is installed, Open the Windows Command Prompt, Powershell or a similar command line tool, and type

    This should print npm’s version number like 4.6.1
  • That is it! You have your node and np[m installed.
  • To update the version of npm/node you can run the following command

2. For Linux users (Ubuntu)

  • Open the terminal and run the following commands to install nodejs and npm in Linux


  • Test using following commands

This was the best way to install the nodejs and npm. If you are facing any problem or if you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂

2 Ways to Getting Started With The Current Technology – React Native

2 Ways to Getting Started With The Current Technology – React Native is all about the way we can start making React Native app. Like any other JavaScript framework here we also need nodejs to start working with React Native.

Before dive right into React Native if you want to minimize confusion, then you should spend a bit of time to understand the basics of a React application.

There’s some terminology you need to know. React Native is an extension of React. It’s just a different client target that’s using React and its principles to create the application.

Learning a little bit of React is a good use of time. Looking through the homepage alone will help you quite a bit. I also suggest you look through the official tutorial to have a better understanding. But if you don’t want to do that or you did it already then let’s get started.

Here we will suggest you the primary steps required to start working with React Native.

Install nodejs and npm

First of all, you need to install the nodejs and npm which is a node package manager. To install the node and npm on your machine. You can follow this Guide to install npm and nodejs.

Building a React Native app with two way

There are two ways to start with react native and we will tell you the difference between them.

react_native_init_vs_create_react_native_app

1. react-native init <Your Project Name>

It is the one way to start with. Before this post on March 13, 2017 everybody was using the same. You will need Node, React Native CLI (Command Line Interface), JDK, Android Studio, Xcode and all the other dependencies that you need while making your native app. If you are a native app developer with the experience in both of the app development environment then you can start with this but if you have experience in any one of them then it will be tough for you to set up the development environment for the other one. So my suggestion is to start with another way that is create-react-native-app.

1.1. Install The React Native CLI

To start with this you need to install the react-native-cli. Assuming that you have Node installed, you can use npm to install the react native CLI. Run the following command in a Command Prompt or shell:

Getting Started With React Native

1.2. Install Android Studio and Configure the ANDROID_HOME Environment Variable

After the installation of react-native-cli, we have to set up the environment for one of the platforms (Android/IOS).

Download and install Android Studio from the official website. To install the android studio and to configure the ANDROID_HOME environment variable for the react you can follow the post on the installation of the android studio and setting up Android development environment which will show you the installation of all the things you need. You will need the following things if you have android studio installed already.

  • JDK (Java Development Kit)
  • Android Studio.
  • SDK.
  • Android Virtual Device.

1.3. Creating First Project With react-native init

1.4. Modifying Your App

Now that you have successfully run the app, let’s modify it.

  • Open App.js in your text editor of choice and edit some lines.
  • Press the R key twice or select Reload from the Developer Menu (Ctrl + M) to see your changes!
Congratulation

Hurray!! You’ve successfully run and modified your first React Native app using react-native init.

2. Expo CLI (Formally create-react-native-app)

Expo CLI is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code – no Xcode or Android Studio installation required, and you can develop for your iOS device using Linux or Windows. You just need to install node and npm to start with. It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).

2.1. Creating the First Project with Expo CLI

Assuming that you have Node installed, you can use npm to install the Expo CLI utility:

This will start the React Native packager and print a QR code.

2.2. Run your React Native application

Open it in the Expo app to load your JavaScript.

Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.

2.3. Modifying your app

Now that you have successfully run the app, let’s modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

Congratulation

You’ve successfully run and modified your first React Native app using Expo CLI.

Running your app on a simulator or virtual device

Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.

Once you’ve set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only).

To Include all the custom native module

Because you don’t build any native code when using Create React Native App to create a project, it’s not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.

If you want to build and deploy your app yourself, you’ll need to eject from CRNA (create-react-native-app) and use Xcode and Android Studio. This is usually as simple as running npm run ejectin your project, which will walk you through the process. Make sure to install react-native-cli using npm install -g react-native-cli.

If you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂