Skip to content
Related Articles

Related Articles

What are the steps to create first React Native App ?

Improve Article
Save Article
Like Article
  • Last Updated : 08 Dec, 2021

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. 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.

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 set up your React native environment.

Expo: It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

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"

To execute React-Native Program

npm start web

Project Structure:

Folder Structure

Example: In this example we simply render a text put some style on the text like text color.

App.js




import React from "react";
import { Text, View, StyleSheet } from "react-native";
  
const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
          Welcome to React-Native
      </Text>
      <Text style={styles.para}>
        This is your first React Native Program Geek!!!
      </Text>
    </View>
  );
};
  
export default App;
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 8,
    backgroundColor: "white",
  },
  paragraph: {
    marginTop: "40%",
    marginLeft: 20,
    color: "green",
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 30,
  },
  para: {
    marginLeft: 20,
    color: "red",
    textAlign: "center",
    fontWeight: "bold",
  },
});

Output: 

Folder Structure


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!