Skip to main content

Related Articles

Loading...

React Native for Beginners

We can make native portable mobile applications utilizing JavaScript and React. It utilizes React to make a rich versatile UI interface. 

Presently, the inquiry strikes a chord, who's utilizing React Native? According to the official site, a huge number of applications are utilizing React Native from set up fortune 500 to up and coming new businesses. A portion of the well known applications that are utilizing React Native incorporate Facebook, Instagram, Bloomberg, Pinterest, Uber, Skype and so on 

Prior to beginning, it's suggested that you have the essential information on JavaScript and React so you can comprehend the React Native applications. 

Setting up the Environment

To begin, we need the underneath application introduced in the framework. 

NodeJS and NPM 

Python

Java SE Advancement Pack (JDK) 

Android SDK, Android Virtual Gadgets 

Visual Studio Code

Introducing and setting up the environment for React Native applications is simple. You need to download the bundles from the particular website and snap on Straightaway and Next catches. Be certain that you have introduced all the referenced applications required for the React application. 

You can discover more subtleties of the way toward setting up the environment on the React Native official site. Presently, open the command prompt, and run the beneath command. 

npm i -g create-react-native-app

It will download the bundles needed to make a React Native application. Type make react-native-application <HelloWorld> and hit Enter. 

create-react-native-app HelloWorld

During the establishment, the npm will request one extra bundle, i.e., Expo which loads and runs the CRNA venture written in unadulterated JavaScript without incorporating any native code. It is free and open source toolchain worked around React Native to assist you with building iOS and Android ventures utilizing JavaScript and React. In the event that, npm requests the establishment of Expo, select "Y", i.e., Yes. At that point, it will request to pick a format. Select the Clear layout, as we are attempting to keep it as basic as could reasonably be expected. 

? Choose a template:

blank

minimum dependencies to run and an empty root component

tabs

several example screens and tabs using react-navigation


It will take a couple of moments to extricate the undertaking documents and introduce the conditions. 

When the task is made effectively, change the catalog to the application name gave by you during application creation (for my situation, it is Hello World). 

cd HelloWorld

Run the npm start command to begin the application. 

npm start

It will begin the Expo and show a QR code which can be examined utilizing Expo in Android gadgets to begin a metro bundler as a worker on the localhost. 

You can straightforwardly run the application on an actual gadget with the Exhibition Application. Open Play Store on your Android Gadget.  

Subsequent to introducing the Exhibition application, you have to filter the QR Code. 

Or then again, you can run it on the Android Virtual Machines. Open the AVD Supervisor in your framework, make an Android Machine by tapping on the "Create" button. It will request a couple of subtleties to give the Gadget Name, select Picture, Memory Size, and different alternatives in the virtual machine. 

Whenever everything is done, click on "Start". It will require some investment to begin the Virtual Machine. 

After the virtual gadget begins, you will see something like beneath. 

Run on Android gadget/emulator


In Metro Bundler, click "Run on Android gadget/emulator" and the application will be stacked in the Android Virtual Gadget. 

An application will be stacked or begun in the Android Virtual Gadget. 

How about we open the application in Visual Studio Code and snap on App.js record to alter. 

Hello World


To show a basic message, similar to "Hello World", we have to change the content between the Content labels. Change the content to "Hello World" and run the application once more. You will see Hello World on the application. 

On checking the QR Code with the Android gadget, you will see the ideal yield too.

Labels:

Comments

Post a Comment

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on
Post a Comment
Read more

Angular PrimeNG checkboxes styling and events handling

  Getting Started With PrimeNG Styling in Angular App This chapter I am planning to show how you can handle events of the checkboxes. For that I will use checkbox for every card to place the order.  To use PrimeNG checkboxes you have to import checkbox module in app.module.ts file. import {CheckboxModule} from 'primeng/checkbox'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; import {CheckboxModule} from 'primeng/checkbox'; @NgModule({ declarations: [ AppComponent, LandingComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, CardModu
Post a Comment
Read more

Angular NgFor directive and trackby

Today we will learn about NgFor one of the core directive of angular. NgFor helps to build list and tables in Angular   Let us see the example in our flower store app. In the landing page I am going to print list of flowers that are available in the store. Later we will add images and show them in a carousel to rotate automatically. First we will create the domain class called flower.ts and you can copy paste below code.  export class flower{ constructor() { } name:string=''; price:number = 0; availableQuantity:number = 0 } To use this domain class inside another component you must specify export keyword along with the class keyword. Flower domain has 3 attributes to store name of the flower then price and the available quantity. Now we can create the array from the flower type as below inside the landing.component.ts file. myFlowerList:flower[]=[]; I will call a method inside ngOnInit to add values to the array as below. ngOnInit is one of t
Post a Comment
Read more