Open In App

Introduction to React Native

Improve
Improve
Like Article
Like
Save
Share
Report

If you want to build mobile apps for both Android and iOS. What should you learn? The individual native languages for each app i.e, Java for Android and Swift/Objective-C for iOS?, Actually NO. Native Android and iOS development are quite different and can be expensive – first, the language itself is quite different, and second, all the underlying APIs are different – the way of using the GPS is different, the way to create animations is different, the way you make network calls is different.

We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And there are so many hybrid mobile frameworks such as NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.

React Native: It is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Prerequisite:

  • Basic Knowledge of HTML, CSS and JS.
  • Basic Knowledge of ReactJS.
  • NodeJs should be installed in your system.

Building with React Native is extremely efficient and highly addictive but getting started can be a little tricky. React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. If you don’t already have Node.js installed, it’s time to get it!

Installation: Here we will use the Expo CLI version that will much smoother to run your React Native applications. Follow the below steps one by one to setup your React native environment.

  • Step 1: Open your terminal and run the below command.
    npm install -g expo-cli
  • Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.
    expo init "projectName"
  • Step 3: Now go into the created folder and start the server by using the following command.
    cd "projectName"
    npm start web

Project Structure:

Example:

JavaScript




// File name App.js
import  React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
  
const Home=()=>{
  return (
      <Text style={{
                    marginTop:300,
                    marginLeft:10}}>
          Geeksforgeeks
      </Text>
  )
}
  
  
export default function App() {
  return (
    <View>
          <Home/>
    </View>
  );
}


Output:

Advantages over other frameworks and Languages: Whenever there is an update for apps written in Swift/Objective-C or Java, the whole app needs to be recompiled and a new version has to be distributed to the App Store again. All this can take a few weeks depending on the App Store review process.

To avoid this hassle, React Native apps work in a different way, a native app is able to locate specific JavaScript code, which is later downloaded and compiled when the app is launched on an actual device. By this, updating the app can be done instantly without needing to submit a new version to the App Store again and again.

To know that how React Native works? you can visit this article.



Last Updated : 03 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads