How to Start a React Native Application

How to Run iApp or Start a React Native Application

Prerequisite:

These Softwares need to be installed to start any React Native application.

1. Node JS - https://nodejs.org/en/
2. Java - JDK -

1. Link - https://www.oracle.com/java/technologies/javase-jdk15-downloads.html
2. Version - Windows x64 Installer - https://www.oracle.com/java/technologies/javase-jdk15-downloads.html#license-lightbox
3. Look at the screenshot of download link and file

3. Android Studio

1. Link - https://developer.android.com/studio

4. Visual Studio Code (If Code Editor is suggested)

Prerequisite Installation Screenshots:

Install Java JDK

Install Android Studio

Setup Environment Variables

1. Go to Environment Variables
2. Click Change Environment Variables
3. In User Variables, change the things like below

1. ANDROID_HOME - C:\Users\akash.corp\AppData\Local\Android\Sdk
2. ANDROID_SDK_ROOT - C:\Users\akash.corp\AppData\Local\Android\Sdk
3. JAVA_HOME - C:\Program Files\Java\jdk1.8.0_271

4. In System Variables, change the things like below

1. JAVA_HOME - C:\Program Files\Java\jdk1.8.0_271
2. In path, add/check these entries

1. C:\Program Files\nodejs\
2. C:\Users\akash.corp\AppData\Local\Android\Sdk
3. C:\Users\akash.corp\AppData\Local\Android\Sdk\platform-tools
4. C:\Program Files\Android\Android Studio\jre
5. C:\Program Files\Java\jdk1.8.0_271\bin
6. C:\Program Files\Java\jdk1.8.0_271

5. Check the screenshots, as everything explained there.

Here, akash.corp is the username. In your case, it would be yours.

You can find these documentation in the React Native Documentation portal.

https://reactnative.dev/docs/environment-setup

Congratulations. Everything is just set upped for you to start a React Native application now.

Start a New React Native Application

Install a new React Native Application.

Instructions are in this documentation - https://reactnative.dev/docs/environment-setup

Let’s start ourselves.

1. Create New Project  By running this command

npx react-native init AwesomeProject

2. A react native project will be created. It’ll take 2-5 minutes. And a Folder named AwesomeProject will be created.
3. Go to that folder - cd AwesomeProject
4. Now, need to run the project
5. Before Running the project ensure the below staffs ready

1. Run Android Studio for test in android. Check the screenshot to run in android studio
2. Or, Run Xcode for run in Xcode of Mac
3. Run Android Studio Emulator or Xcode Emulator

6. Run Project By running these command

npx react-native run-android

Or, npx react-native run-ios

Start React Native Application Screenshots:

Run Android Studio and Start Emulator.

After successfully running the emulator, it will open the android emulator.

After successfully installed the project, powershell will be like this -

If error occur like this -

Then open the android project using the android studio and it’ll be fixed then.

Now, again run the project from android studio or by running this command -

npx react-native run-android

Congratulations, we’ve successfully run our React Native Project.

Change App.js and Check App is Working or not

Drag and drop the project to Visual Studio Code and here is the react native project after placing it to Visual Studio Code.

Let’s change app.js and check and look at the screenshot. I think it’s pretty simple.

1. First, click app.js.
2. Remove unnecessary lines from app.js
3. Add a simple title style inside styles variable
4. Add a simple text inside Scrollview
5. Code is this -

import React from 'react';

import {

  StyleSheet,

  ScrollView,

  Text,

} from 'react-native';

const App = () => {

  return (

    <>

      <ScrollView>

        <Text style={ styles.title }>

          Welcome to Our First React Native App

        </Text>

      </ScrollView>

    </>

  );

};

const styles = StyleSheet.create({

  title: {

    fontSize: 30,

    textAlign: 'center'

  }

});

export default App;