Open In App

Introduction to React Native

Last Updated : 03 Apr, 2023
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.



Previous Article
Next Article

Similar Reads

Create a Card View in React native using react-native-paper
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; 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. Approach: In this ar
2 min read
Create an Activity Indicator in react-native using react-native-paper library
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; 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. Prerequisites: Basic
2 min read
How to add a Progress Bar in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; 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 UI's for both platforms. Approach: In this a
3 min read
How to add a divider in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; 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 UI's for both platforms. Prerequisites: Basi
2 min read
How to create a button in react-native using react-native-paper library ?
React-native is a framework developed by Facebook for creating native-style apps for iOS &amp; 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 UI's for both platforms. Prerequisites: Basi
2 min read
How to create Chip in react-native using react-native-paper ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; 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 UI's for both platforms. Prerequisites: Basi
2 min read
What is the difference between React Native and React?
Basic Introduction of React or ReactJS: It is an open source Javascript library created by Facebook for better UI development and Efficient DOM manipulation. React have a virtual DOM concept. When any data is received from the server then this virtual DOM has modified accordingly then this updated virtual DOM is matched with Real DOM by some algori
3 min read
How to Use Routing with React Navigation in React Native ?
Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application. Transitioning between multiple screens is managed b
4 min read
How to Add Phone Number Input in React Native ?
React Native is a JavaScript framework for cross-platform mobile app development. In this article, we'll see how to add a phone number input field in a React Native app using Expo CLI. ​Adding a phone number input field in React Native is helpful for collecting user phone numbers during registration or login. It typically consists of a text input c
3 min read
Why You Should Choose React Native?
The smartphone app market is ever changing, new apps come every day, and some old ones disappear from our memories, and our phones as well. In this tumultuous ecosystem, developers struggle to keep making apps that will please users, because with each new horizon we conquer, their expectations rise. And so to out-do their previous efforts, develope
4 min read