Introduction to React Native - GeeksforGeeks

02 Mar, 2021
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 API’s 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 bellow command.npm install -g expo-cli
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"
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
cd "projectName"
npm start web
Project Structure:
Example:
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.
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Front End Developer Skills That You Need in 2022
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?
How to Open URL in New Tab using JavaScript ?
How to redirect to another page in ReactJS ?
How to Insert Form Data into Database using PHP ?
How to pass data from child component to its parent in ReactJS ?