Getting start with React Native

-
React Native lets us build mobile app using only JavaScript. It uses the same designs as React, letting us compose a rich mobile UI from declarative components.

I am writing this article based on those experiences which I got trouble while install in all working OS like Windows, Mac, and Linux.

Initially I have started working on Mac mini which have install macOS High Sierra OS, then after few month I have been shifted towards Linux OS after struggle getting speed up work in Ubuntu 14.1 again I switch over new OS which is Windows so that’s how finally I got windows 10  to set up my React Native projects.

Some of those might asked which is the best OS or platform for react native, I would personally experience and got the best is Mac OS, it’s simply because it’s easy to setup X code for I-OS development and Android Studio for Android development in that, apart from this in Linux or Windows you build react native projects which for android development but we need to export(build) that project and execute(run) on Mac system to check whether it’s perfectly fine.

So basically we need to do more efforts and trouble while implement react native projects in Windows system and Linux system.

Installation (Mac, Windows and Linux)

System Requirement :

For emulator minimum 6 GB RAM


Software
Version
Android studio (IDE)
3.0.0
Android Sdk
28.0.0
Java
1.8.0_171
Node Js
8.11.2
NPM
5.6.0
React native cli
2.0.1

You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.

Node for







Node check in Command Prompt :

Make sure that you have open Command Prompt with Run as Administrator.
While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.

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:

o    Android SDK

  • 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.
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 6.0 (Marshmallow) 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", and then select "SDK Manager".




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 6.0 (Marshmallow) entry, then make sure the following items are all checked:
  •  Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 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 23.0.1 is selected.


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

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.

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:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

There are several for editors which you can try with like :
And the list goes on but I would suggest you to go atom or visual code, because react native extensions and libraries need to install that is what editors are helping you to create react native apps.

After finished up with Node, Editor and Android Studio or XCode lets start with React Native.

Installing dependencies for Windows OS :

Node, Python2, JDK

We recommend installing Node and Python2 via Chocolatey , a popular package manager for Windows. React Native also requires a recent version of the Java SE Development Kit (JDK), as well as Python 2.

Both can be installed using Chocolatey.

Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:
choco install -y nodejs.install python2 jdk8
If you have already installed Node on your system, make sure it is Node 8 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.

Installing dependencies for Mac OS:

Node, Watchman
We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:
http://brew.sh/

Enter this command in Terminal :
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
brew install watchman

The React Native CLI  :

Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Command Prompt or shell (Run as Administrator):
npm install -g react-native-cli

Running your React Native application :

Run react-native run-android inside your React Native project folder print this commands using Terminal or Command Prompt:


cd MyFirstRN
react-native run-android

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!




Conclusion:

This is how we can setup and getting start with react native.

I hope you like this article.

Please share your feedback.

Comments

Post a Comment

Popular Posts

Contact Application Using ASP.NET Core Web API, Angular 6.0, And Visual Studio Code - Part One

-
Image
We will develop a contact application using ASP.NET Core Web API, Angular 6.0, and Angular Material UI as shown in the below screenshots.  We will use Visual Studio code (VS code) for the development editor.  I have divided contact application development into two articles, Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part – 1 In the article, we will set up ASP.NET Core Web API project, and develop the Web API controller for contact CRUD operations. Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part – 2 In the article, we will setup Angular 6 within ASP.NET Core Web API Project, and develop the contact form & list component using Angular Material UI. So, starting with this article, first, we will see how we can create ASP.Net Core Web API Project. We have the following prerequisites, Visual Studio Code (VS code) editor Please see this  article  to see how we can setup Visual Stud
Read more

Contact Application Using ASP.NET Core Web API, Angular 6.0, And Visual Studio Code - Part Two

-
Image
In this article, we are going to learn about how we can setup Angular 6.0 in ASP.Net Core Web API project and develop the contact list & form component using Angular Material UI. In the Part 1 article, we set up ASP.NET Core Web API and developed the API for contact CRUD operation. Please go through  Contact Application using ASP.NET Core Web API, Angular 6.0, and Visual Studio Code Part 1  once before proceeding with this article. To setup Angular 6.0 in the project, first, we have to install NodeJS in the development environment. We can download NodeJS installer from  NodeJS website . and then check the version on NodeJS as below: Now, let us globally install Angular CLI package by enter “npm install –g angular/cli@6.0.0”, as shown in below screenshot Scaffold Angular To scaffold Angular, enter “ng new Contact-App --skip-install” command in VS code terminal as below. Here, --skip-install option is used to skip installation of the npm packages. And Contact-
Read more

Send an Email Reminder Notification Based on an Expiration Date using Power Automate

-
Image
Introduction    In this article, we are going to create an email reminder notification based on an expiration date using Power Automate. We will create a flow that’s run daily that reads & filters data from a SharePoint list that has list items that expire in the next 5 days. Then it will send an expiration notification email to a particular user.   SharePoint List - "ProductSales"     Columns  Type  Title  Text  ExpiryDate  DateTime   Let’s log in to Office.com with office 365 credentials. Go to the “Power Automate” tile and click on it.   It will be redirected to Power Automate Page. Click on Create button from left navigation.   Click on the scheduled flow tile. It will open the popup.       Create Recurrence Flow Enter the flow name and select a specific time when we want to schedule this workflow. Then, click on the create button. It will open the Edit Flow page where we can see a Recurring Action. Now we are f
Read more

MySQL Data Access API Development Using Express.JS, Node.JS

-
Image
In this article, we are looking into the introduction of Node.JS and Express.JS and then, I am going to create a simple MySQL data access API using Express.js, NodeJS. As we all know, Node.JS is the most trending open source technology that’s directly or indirectly partitioning into advanced web development, and let’s have lookup what is Node.JS? Node.JS Definition Node.JS is a platform that provides environment (outside the web browser) to execute JavaScript and which is built on Chrome's V8 JavaScript engine developed by Ryan Dahl. Why Node.JS? NodeJs processing model depends on a single thread with event looping. When clients send HTTP requests to NodeJs server, the Event loop is woken up by OS. It will pass the request and response objects as JavaScript closures to worker functions with callbacks. For long-running jobs like I/O operations running on non-blocking worker threads, when the job is complete, responses are sent to the main thread via a callback
Read more

Chat Application using Angular 8, Asp.net Core 2.2.0, Signal R 1.1.0

-
Image
In this article, we are going to create a simple chat application using Angular 8, Asp.net Core 2.2.0, Signal R 1.1.0 as shown below: We install above all prerequisite following in our development machine: Prerequisite .Net Core SDK 2.2.0  – download from  here . Nodejs 10.15.3  – download from  here . Angular CLI 8.0  – Install angular command package by executing this command: “ npm install -g @angular/cli@8.0.0 ” Setup Asp.net Core with Signal R Project: open a command prompt and enter create asp.net core web project as below: Install the following NuGet package in our project: Microsoft.AspNetCore.SignalR Microsoft.AspNetCore.SpaServices.Extensions Call SignalR in the “Startup.ConfigureServices” method to add SignalR services: services.AddSignalR();   Create MessageHub Class: SignalR makes real-time client-to-server and server-to-client communications possible and it will call methods to connect clients from a server using Sign
Read more

ReactNative FlatList

-
Image
Introduction: React Native List show has different way to represent, react native listview either FlatList or SectionList. Flatlist is term used for static data just like array of list to view. Process: index.js import React, { Component } from 'react'; import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native'; export default class FlatListBasics extends Component {   render() {     return (       <View style={styles.container}>         <FlatList           data={[             {key: 'Devin'},             {key: 'Jackson'},             {key: 'James'},             {key: 'Joel'},             {key: 'John'},             {key: 'Jillian'},             {key: 'Jimmy'},             {key: 'Julie'},           ]}           renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}         />       </View&
Read more

Getting Start With Data Analysis Using SSAS Tabular Modeling In Excel - Part Two

-
Image
In this article, we are going to see how business users can utilize the tabular model for data analysis and visualization in Excel. This article depends on Part I. So, it would be great if you first go through this: Getting started with data analysis using SSAS Tabular Modeling in Excel - Part I We will see how we can create SSAS tabular model and setup measure, roles, calculated columns, hierarchies in tabular modeling. Now, we created a Tabular Model and deployed it on the analysis server. Let’s open Excel. Go to Data Tab, click on Get Data Option from a ribbon. Go to From Database, Analysis services. It will open Data connection wizard, enter server & credential details. Click on next. Select Tabular Model Database. Click on next. Now, Save Data Connection and Click on finish. Go to Insert Tab, Click on Pivot Table option from the ribbon. Select External Data Source. Click on choose connection. We can see our saved data connection
Read more

Contact application - Upgrade Asp.net Core 2.0 to 2.1

-
Image
In this article, we will look into steps for contact application - upgrade Asp.net Core 2.0 to 2.1, please see my previous articles about how we developed contact application: ContactApplication using ASP.NET Core Web API, Angular 6.0, and Visual Studio CodePart One: In the article, we will set up ASP.NET Core Web API project, and develop the Web API for contact CRUD operations. ContactApplication using ASP.NET Core Web API, Angular 6.0, and Visual Studio CodePart Two: In the article, we will setup Angular 6 within ASP.NET Core Web API Project, and develop the contact form & list component using Angular Material UI that will consume Web API which we have created in Part One. ContactApplication Azure Deployment: In this article, we are going to deploy/host a contact application with Visual Studio code to Azure web apps. Please note:   Previously we have used Asp.net Core 2.0.3 for contact application, now upgrade to Asp.net Core 2.1.5. This is download link for Dot
Read more

Send Email With SharePoint Lookup Columns Data Using Power Automate

-
Image
  Introduction   In this article, we are going to send an email with SharePoint Lookup Column data using Power Automate. We will create a flow that’s run weekly that fetches data from a SharePoint list which contains lookup columns. We will use the “Apply each” action to get lookup records.   SharePoint Parent List - "ProductSales"   Columns Type Title Text ExpiryDate DateTime SalePersonName LookUp (SalePerson List)   SharePoinChild List - "SalePerson"   Columns Type Title Text   In the above lists we have SalePersonName column which is actually the Title column from SalePerson List. When we “Parse Json” data in the above type of data we get two title fields in the dynamic column section. And sometimes workflow fails due to a null record in lookup column. Let’s see the data in the list as below,     Log in to Office.com with Office 365 credentials. Go to the “Power Automate” tile and click on it. It will be redirected to the Power Automate Page. Click on the Create
Read more

Typescript Basics

-
Nowadays, there are so many JavaScript frameworks (Angular, React) written and used to develop frontend UI by Typescript. It very important to every developer has very basic knowledge about Typescript. So, in this article we will look into Typescript Basics for getting started with it. Pre-requisite:   Basic knowledge of JavaScript, OOPs concept. What is Typescript? The Typescript language is a typed super set of JavaScript, means any program written using Typescript Language will be compiled into plain JavaScript. What does Typescript solve over JavaScript? And Why Typescript Language is so much popular among Developers? Types & Equality Scope OOPs Implementation Module management Installing Typescript: There are two basic ways to install Typescript: Via NPM (Nodejs Package Manager) Typescript’s Visual Studio plugins. Please this  link  for more information For via Npm, enter this command in command prompt: npm install -g typescript   save fi
Read more