Skip to main content

Related Articles

React Native Hello World App

Follow my blog with Bloglovin

 


 

Today we are going to develop our first React Native application. In this tutorial I am going to directly jump into coding without explain code much. You don’t need to know all sort of technical jargon to write your first React Native application.

 

This application just prints “Hello World” text on your phone screen. This application can run on Android or iOS device without any code change. This is the power of React Native. You can run your application both Android or iOS devices with minimum code change and most of the code common for both platforms.

 

Before write any code you need to setup your development environment, if you haven’t done yet. You can get all the information here to setup your React Native Development Environment.


Creating a new application

To create new application, you have to use React Native built-in command line interface. You can access it without installing anything globally using npx, which ships with Node.js. Let's create a new React Native project called "HelloWorld":

 

npx react-native init HelloWorld

 


You need to modify App.js file as below to print “Hello World” on your phone screen.


import React from 'react';
import { TextView } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;


First two lines import "react" and "react-native" components. Then write simple function called "HelloWorldApp" and it just return "Hello, world!" text.


Finally, default export of "HelloWorldApp" function for rendering.


Next step is to run your application. Below command run your application either on your emulator or mobile device. If you want to test your application on the emulator you have to load your emulator. If you want to test your application on your phone you have to connect your phone via USB port to computer and run below command.

npx react-native start


This will load metro server.




Then run your application, run below command.


npx react-native run-android


Now you can see your code is running like this.



Now modify your code and see how the changes are reflecting. This is very simple code, but good starting point. Next we try to develop some basic React Native Calculator application.


Comments

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...

SMPP protocol library for fast and easy SMSC(Short Message Service Centre) client development even for non-telecom guys

SMS sending through .NET C# is really easy. But most of the guys face many issues with SMSC client developments. SMPP protocol has many parameters to configure, but for simple SMPP gateway application you need very few of them to configure correctly. This article will cover how to implement SMSC client application using EasySMPP library. EasySMPP is a free SMPP library used by many people to implement SMS sending applications. There are many SMPP libraries but EasySMPP library is very easy to use and relatively stable. EasySMPP library mainly contain five class library projects. KernelParameters, SMPPClient, SMSClient, SMSService and Tools are the library projects and you only need to use SMSClient library to implement SMPP client application. First download EasySMPP library and add class library project to your .NET C# solution.  1. public bool SendSms( string from, string to, string text)

Setting up the react native development environment

  This tutorial I am going to focus on how to install and build your first React Native application. There are two methods you can follow to develop React Native app. If you are very new to mobile development and not familiar with setting up mobile development environment, I would suggest to start with Expo CLI. Expo is a set of tools to build React Native application. It has may features; you have to select suitable features to develop your app in minutes. You need only a recent version of Node.js and a phone or emulator. If you want to test your React Native application on your web browser before installing any tools, you may use Snack.   If you are familiar mobile developer from other languages and want to try out React Native, you may try out React Native CLI. For that you need to install either Xcode for iOS or Android Studio for Android OS.   If you are a beginner, my personal suggestion is to go for Expo CLI and familiar with the React Native features and...