How to create a new React Native project
React Native is a popular framework for building mobile applications using JavaScript and React. It allows developers to create native apps for both iOS and Android platforms with a single code base. We can create a new react native project in two ways:
Using
expo-cliUsing
react-native-cli
Using expo-cli
Creating a React Native application using Expo CLI is a user-friendly and efficient way to build mobile apps that work on both iOS and Android devices. Expo CLI simplifies the development process by providing a unified workflow and removing the need for complex configuration. It offers a wide range of ready-to-use components, APIs, and libraries, which allows developers to quickly develop, and deploy mobile applications. It takes care of platform-specific details, so we can focus on designing user interfaces and implementing the logic of our app.
To create a new React Native project using expo-cli, here are the steps to follow:
Step 1: Installing expo-cli
Expo is a collection of tools and services designed specifically for React Native. The most relevant feature is its ability to initiate React Native app development quickly in minutes. Firstly, install expo-cli by using the following command:
npm install -g expo-cli
Step 2: Creating the project
After expo-cli is installed, run the following command to generate a new project:
npx create-expo-app YourProjectName
Replace YourProjectName with the desired name for your project. This command will create a new react-native project with the specified name.
Step 3: Running the application
You can download the
Before you can run the application on the web, you first need to navigate to the project directory and install a few dependencies by using the following command:
npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1
Once the packages have been installed, run the application using this command:
npx expo start
Once the project is initiated, you can use the Expo Go application to scan the QR code provided in the terminal. This allows you to view the project on your mobile device conveniently. Alternatively, press the w key to open the project in your local browser.
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Using react-native-cli
Creating a React Native application using React Native CLI provides developers with a flexible and powerful approach to building mobile apps for both iOS and Android platforms. With React Native CLI, we have direct access to the underlying React Native framework, which allows for more fine-grained control and customization. With React Native CLI, we have the freedom to integrate native code, utilize platform-specific APIs, and optimize app performance to meet specific requirements. While it may require more technical expertise, React Native CLI provides the flexibility and control needed for complex app development scenarios.
To create a new React Native project using react-native-cli, here are the steps to follow:
Step 1: Setting up the environment
Before we start creating a new React Native project, we need to set up the development environment. Make sure you have Node.js and
Run the following to install nodejs and npm in Ubuntu:
sudo apt updatesudo apt install nodejs npm
Step 2: Installing React Native CLI
React Native
npm install -g react-native-cli
Step 3: Creating project
After the React Native CLI is installed, we can create a new project. In your terminal or command prompt, navigate to the directory where you want to create the project and run the following command:
npx react-native init YourProjectName
Replace YourProjectName with the desired name for your project. This command will create a new directory with the specified name and set up a basic React Native project structure inside it.
Using
npxeliminates the need of installingreact-nativeglobally.
Step 4: Setting up the Android development environment
To develop React Native apps for Android, you need to set up the Android development environment.
Install Android Studio: Download and install Android Studio from the official website. During the installation, make sure to select the following components:
Android SDK
Android SDK Platform
Android Virtual Device
Install the Android SDK: After installing Android Studio, open it and go to
Tools, selectSDK Managerand make sure theAndroid 13 (Tiramisu) SDKis installed. SelectShow Package Detailsand make sureAndroid SDK Platform 33andGoogle APIs Intel x86 64 Atom System Imageare installed.
Create AVD: After installing Android SDK, go to
Toolsagain and selectDevice Manager. From here, create a new device usingTiramisusystem image.
Configure the environment variables: Open the
$HOME/.bashrcor$HOME/.bash_profile(if you are usingzshthen~/.zprofileor~/.zshrc) config file and add the following lines:
export ANDROID_HOME=$HOME/Android/Sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/platform-tools
Save the file and run source followed by the file name to load the configuration.
Make sure to enable intel virtualization support from BIOS setup to run virtual android device on you machine.
Step 5: Running the project
After the project is created, navigate to the project directory:
cd YourProjectName
To run the project, run the following command:
react-native run-ios //to run on iOS simulator//orreact-native run-android //to run on Android emulator
Make sure to set up an iOS simulator if you want to run the app on iOS.
Exploring the project structure
Once the project is successfully running, we can start exploring the project structure. The entry point of the app is usually located in the index.js file. We can edit this file to define the root component of your application. The App.js file contains the default component that is rendered as the main screen of app. We can modify this file to add our own components or screens. The android and ios directories contain the platform-specific code for Android and iOS, respectively.
