{"id":119762,"date":"2026-07-09T15:57:26","date_gmt":"2026-07-09T10:27:26","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=119762"},"modified":"2026-07-09T15:57:27","modified_gmt":"2026-07-09T10:27:27","slug":"react-native-cli-for-android-ios-app-development","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/react-native-cli-for-android-ios-app-development\/","title":{"rendered":"How to Use React Native CLI for Best Android\/iOS App Development"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">TL;DR Summary<\/h2>\n\n\n\n<p>React Native CLI helps you build Android and iOS apps using JavaScript, React, and native mobile development tools. To build your first app, you need Node.js, Android Studio, JDK, and the React Native Community CLI. For iOS, you also need macOS, Xcode, and CocoaPods. React Native CLI is best when you want direct access to Android and iOS project files, native modules, SDK integrations, and production-level app control. Once the setup is ready, you can create a project, start Metro, run the app, and edit your first screen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>React Native CLI is one of the most practical ways to build Android and iOS apps using JavaScript and React.<\/p>\n\n\n\n<p>It gives you access to native Android and iOS project files, which is useful when your app needs custom SDKs, device permissions, or platform-specific features.<\/p>\n\n\n\n<p>If you are a beginner, this guide will help you understand the setup, commands, workflow, and mistakes to avoid while building your first Android\/iOS app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is React Native CLI?<\/strong><\/h2>\n\n\n\n<p>React Native CLI is a command-line tool used to create, run, and manage React Native projects without depending on a managed framework like Expo.<\/p>\n\n\n\n<p>In simple words, it gives you a mobile app project with separate Android and iOS folders.<\/p>\n\n\n\n<p>These folders allow you to work with native files when your app needs deeper platform-level control.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Quick Answer: What does React Native CLI do?<\/strong><\/h3>\n\n\n\n<p><strong>React Native CLI helps you:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Create a new React Native project<\/strong><\/li>\n\n\n\n<li><strong>Run the app on Android or iOS<\/strong><\/li>\n\n\n\n<li><strong>Start the Metro bundler<\/strong><\/li>\n\n\n\n<li><strong>Access native Android and iOS folders<\/strong><\/li>\n\n\n\n<li><strong>Add native modules and SDKs<\/strong><\/li>\n\n\n\n<li><strong>Build debug and release versions<\/strong><\/li>\n\n\n\n<li><strong>Test apps on emulators, simulators, and real devices<\/strong><\/li>\n<\/ul>\n\n\n\n<p>For beginners, React Native CLI may feel slightly technical at first.<\/p>\n\n\n\n<p>But once the environment is ready, the development workflow becomes easier to understand.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Why is React Native CLI useful?<\/strong><\/h3>\n\n\n\n<p>React Native CLI is useful because it gives developers more control over the native side of mobile app development.<\/p>\n\n\n\n<p>This matters when your app needs features like push notifications, payment gateway SDKs, biometric login, native camera access, custom permissions, or background services.<\/p>\n\n\n\n<p>For example, an edtech app may need video playback, login, push notifications, and offline learning support.<\/p>\n\n\n\n<p>React Native CLI gives developers the flexibility to configure these features properly for Android and iOS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Should You Use React Native CLI?<\/strong><\/h2>\n\n\n\n<p>You should use React Native CLI if you want to understand how professional cross-platform mobile apps are built.<\/p>\n\n\n\n<p>Expo is easier for quick prototypes, but React Native CLI is better when you want full control over native files.<\/p>\n\n\n\n<p>This makes React Native CLI useful for production apps, portfolio projects, internships, and mobile developer learning paths.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key benefits of React Native CLI<\/strong><\/h3>\n\n\n\n<p><strong>React Native CLI gives you:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Full access to Android and iOS project files<\/strong><\/li>\n\n\n\n<li><strong>Better control over native dependencies<\/strong><\/li>\n\n\n\n<li><strong>Flexibility to integrate custom SDKs<\/strong><\/li>\n\n\n\n<li><strong>Support for platform-specific changes<\/strong><\/li>\n\n\n\n<li><strong>More control over release builds<\/strong><\/li>\n\n\n\n<li><strong>Better understanding of mobile app architecture<\/strong><\/li>\n<\/ul>\n\n\n\n<p>This is why many developers prefer React Native CLI when they want to go beyond simple demo apps.<\/p>\n\n\n\n<div style=\"background-color: #099f4e; border: 3px solid #110053; border-radius: 12px; padding: 18px 22px; color: #ffffff; font-size: 18px; font-family: Montserrat, Helvetica, sans-serif; line-height: 1.6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 750px;\"><strong style=\"font-size: 22px; color: #ffffff;\">\ud83d\udca1 Did You Know?<\/strong> <br \/>\n<p><strong>According to <\/strong><a href=\"https:\/\/datareportal.com\/reports\/digital-2026-india\" target=\"_blank\" rel=\"noopener\"><strong>DataReportal&rsquo;s Digital 2026<\/strong><\/a><strong> India report, India had 1.06 billion cellular mobile connections at the end of 2025. This shows why mobile-first app development remains highly relevant for Indian learners, startups, and businesses.<\/strong><\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>React Native CLI vs Expo: What is the Difference?<\/strong><\/h2>\n\n\n\n<p>React Native CLI and Expo are both used to build <a href=\"https:\/\/www.guvi.in\/blog\/ionic-vs-react-native\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native apps<\/a>, but they are not the same.<\/p>\n\n\n\n<p>Expo gives you a managed workflow that is easier to start with.<\/p>\n\n\n\n<p>React Native CLI gives you direct native project access, which is better when you need advanced control.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Factor<\/td><td>React Native CLI<\/td><td>Expo<\/td><\/tr><tr><td>Setup difficulty<\/td><td>Moderate<\/td><td>Easier<\/td><\/tr><tr><td>Native code access<\/td><td>Full access<\/td><td>Limited in managed workflow<\/td><\/tr><tr><td>Android\/iOS folders<\/td><td>Available by default<\/td><td>Not always exposed initially<\/td><\/tr><tr><td>Best for<\/td><td>Custom native apps<\/td><td>Quick prototypes and simple apps<\/td><\/tr><tr><td>Native SDK integration<\/td><td>More flexible<\/td><td>Depends on Expo support<\/td><\/tr><tr><td>Build control<\/td><td>Higher control<\/td><td>More managed<\/td><\/tr><tr><td>Beginner learning value<\/td><td>Strong for real-world development<\/td><td>Good for quick learning<\/td><\/tr><tr><td>Use case<\/td><td>Production apps with native needs<\/td><td>MVPs, demos, simple apps<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Which one should beginners choose?<\/strong><\/h3>\n\n\n\n<p>Choose Expo if you want to quickly build and test a simple app idea.<\/p>\n\n\n\n<p>Choose React Native CLI if you want to learn professional app development and understand how Android and iOS builds work.<\/p>\n\n\n\n<p>For this guide, we will focus only on React Native CLI.<\/p>\n\n\n\n<p>Before choosing a mobile development path, beginners can also understand the difference between <a href=\"https:\/\/www.guvi.in\/blog\/reactjs-vs-react-native\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>ReactJS and React Native<\/strong><\/a>.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Do You Need Before Using React Native CLI?<\/strong><\/h2>\n\n\n\n<p>Before using React Native CLI, you need to install the required tools for Android and iOS development.<\/p>\n\n\n\n<p>The setup differs slightly depending on whether you are building for Android, iOS, or both.<\/p>\n\n\n\n<p>If you are setting this up for the first time, follow a proper<a href=\"https:\/\/www.guvi.in\/blog\/steps-to-setup-react-native-environment\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <strong>React Native environment setup<\/strong> <\/a>before creating your first app.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prerequisites for Android development<\/strong><\/h3>\n\n\n\n<p><strong>For Android app development, you need:<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>Node.js<\/strong><\/li>\n\n\n\n<li><strong>JDK<\/strong><\/li>\n\n\n\n<li><strong>Android Studio<\/strong><\/li>\n\n\n\n<li><strong>Android SDK<\/strong><\/li>\n\n\n\n<li><strong>Android Emulator or physical Android phone<\/strong><\/li>\n\n\n\n<li><strong>Code editor such as <\/strong><a href=\"https:\/\/www.guvi.in\/blog\/best-vs-code-extensions\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>VS Code<\/strong><\/a><\/li>\n\n\n\n<li><strong>React Native Community CLI through <\/strong><strong>npx<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Android development can be done on Windows, macOS, or Linux.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prerequisites for iOS development<\/strong><\/h3>\n\n\n\n<p><strong>For iOS app development, you need:<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>macOS<\/strong><\/li>\n\n\n\n<li><strong>Xcode<\/strong><\/li>\n\n\n\n<li><strong>Xcode Command Line Tools<\/strong><\/li>\n\n\n\n<li><strong>CocoaPods<\/strong><\/li>\n\n\n\n<li><strong>iOS Simulator or physical iPhone<\/strong><\/li>\n\n\n\n<li><strong>Node.js<\/strong><\/li>\n\n\n\n<li><strong>Code editor such as VS Code<\/strong><\/li>\n<\/ol>\n\n\n\n<p>You cannot build an iOS app locally on Windows because Xcode works only on macOS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Setup checklist for beginners<\/strong><\/h3>\n\n\n\n<p>Before creating your app, check whether Node.js, npm, and Java are installed.<\/p>\n\n\n\n<p>Run these commands in your terminal:<\/p>\n\n\n\n<p>node -v<\/p>\n\n\n\n<p>npm -v<\/p>\n\n\n\n<p>java -version<\/p>\n\n\n\n<p>If these commands show version numbers, your basic setup is ready.<\/p>\n\n\n\n<p>If any command fails, install or configure that tool before moving ahead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Set Up React Native CLI Step by Step<\/strong><\/h2>\n\n\n\n<p>React Native CLI setup has three main parts.<\/p>\n\n\n\n<p>First, you install the required development tools.<\/p>\n\n\n\n<p>Next, you create a React Native project.<\/p>\n\n\n\n<p>Finally, you run the app on Android or iOS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Create a new React Native CLI project<\/strong><\/h3>\n\n\n\n<p>Open your terminal and run:<\/p>\n\n\n\n<p>npx @react-native-community\/cli@latest init FirstApp<\/p>\n\n\n\n<p>This command creates a new React Native CLI project named FirstApp.<\/p>\n\n\n\n<p>Now move into the project folder:<\/p>\n\n\n\n<p>cd FirstApp<\/p>\n\n\n\n<p>The project will include files and folders such as:<\/p>\n\n\n\n<p>FirstApp<\/p>\n\n\n\n<p>&nbsp;\u2523 android<\/p>\n\n\n\n<p>&nbsp;\u2523 ios<\/p>\n\n\n\n<p>&nbsp;\u2523 App.tsx<\/p>\n\n\n\n<p>&nbsp;\u2523 package.json<\/p>\n\n\n\n<p>&nbsp;\u2523 index.js<\/p>\n\n\n\n<p>Since React Native CLI works through terminal commands, understanding <a href=\"https:\/\/www.guvi.in\/blog\/build-a-command-line-interface-with-nodejs\/\" target=\"_blank\" rel=\"noreferrer noopener\">command-line tools<\/a> can make the setup easier.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Understand the project structure<\/strong><\/h3>\n\n\n\n<p>The android folder contains Android-specific native files.<\/p>\n\n\n\n<p>The ios folder contains iOS-specific native files.<\/p>\n\n\n\n<p>The App.tsx file is where you can edit your first app screen.<\/p>\n\n\n\n<p>The package.json file stores project scripts and dependencies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Start Metro bundler<\/strong><\/h3>\n\n\n\n<p>Metro is the JavaScript bundler used by React Native.<\/p>\n\n\n\n<p>It watches your JavaScript files and sends updates to the running app.<\/p>\n\n\n\n<p>Start Metro using:<\/p>\n\n\n\n<p>npm start<\/p>\n\n\n\n<p>Keep this terminal running while developing your app.<\/p>\n\n\n\n<p>Open a second terminal for Android or iOS commands.<\/p>\n\n\n\n<div style=\"background-color: #099f4e; border: 3px solid #110053; border-radius: 12px; padding: 18px 22px; color: #ffffff; font-size: 18px; font-family: Montserrat, Helvetica, sans-serif; line-height: 1.6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 750px;\"><strong style=\"font-size: 22px; color: #ffffff;\">\ud83d\udca1 Did You Know?<\/strong> <br \/>\n<p><a href=\"https:\/\/reactnative.dev\/docs\/environment-setup\" target=\"_blank\" rel=\"noopener\"><strong>React Native&rsquo;s official documentation<\/strong><\/a><strong> now recommends using frameworks such as Expo for many new apps, but it still supports CLI-based apps when you need constraints that are not served well by a framework. This is why React Native CLI remains important for apps that need deeper native control.<\/strong><\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Build Your First Android App Using React Native CLI<\/strong><\/h2>\n\n\n\n<p>To build your first Android app with React Native CLI, you need an Android emulator or a physical Android phone.<\/p>\n\n\n\n<p>If you are using Windows, this is the most beginner-friendly platform to start with.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Open Android Studio<\/strong><\/h3>\n\n\n\n<p>Install Android Studio and open it.<\/p>\n\n\n\n<p>Then install the required Android SDK, SDK Platform Tools, build tools, and emulator.<\/p>\n\n\n\n<p>After that, create an Android Virtual Device from Device Manager.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Check if your device is connected<\/strong><\/h3>\n\n\n\n<p>Run this command:<\/p>\n\n\n\n<p>adb devices<\/p>\n\n\n\n<p>If your emulator or phone is connected properly, it will appear in the list.<\/p>\n\n\n\n<p>For a physical Android phone, enable Developer Options and USB Debugging.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Run the Android app<\/strong><\/h3>\n\n\n\n<p>From your project folder, run:<\/p>\n\n\n\n<p>npm run android<\/p>\n\n\n\n<p>React Native will build the Android app and install it on your emulator or connected phone.<\/p>\n\n\n\n<p>The first build may take time because Gradle needs to prepare dependencies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What happens when you run the Android app?<\/strong><\/h3>\n\n\n\n<p><strong>When you run <\/strong><strong>npm run android<\/strong><strong>, React Native:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Connects to Metro<\/strong><\/li>\n\n\n\n<li><strong>Builds the Android native project<\/strong><\/li>\n\n\n\n<li><strong>Installs the app on the emulator or phone<\/strong><\/li>\n\n\n\n<li><strong>Loads your JavaScript bundle<\/strong><\/li>\n\n\n\n<li><strong>Opens the app screen<\/strong><\/li>\n<\/ul>\n\n\n\n<p>This is the basic Android workflow in React Native CLI.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Build Your First iOS App Using React Native CLI<\/strong><\/h2>\n\n\n\n<p>To build your first iOS app with React Native CLI, you need macOS and Xcode.<\/p>\n\n\n\n<p>This is because Apple\u2019s iOS build tools are available only on macOS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Install iOS dependencies<\/strong><\/h3>\n\n\n\n<p>Move into the iOS folder:<\/p>\n\n\n\n<p>cd ios<\/p>\n\n\n\n<p>Install dependencies using CocoaPods:<\/p>\n\n\n\n<p>bundle install<\/p>\n\n\n\n<p>bundle exec pod install<\/p>\n\n\n\n<p>Now move back to the project root:<\/p>\n\n\n\n<p>cd ..<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Start Metro<\/strong><\/h3>\n\n\n\n<p>In one terminal, run:<\/p>\n\n\n\n<p>npm start<\/p>\n\n\n\n<p>Keep Metro running.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Run the iOS app<\/strong><\/h3>\n\n\n\n<p>In another terminal, run:<\/p>\n\n\n\n<p>npm run ios<\/p>\n\n\n\n<p>React Native will build the iOS app and open it in the iOS Simulator.<\/p>\n\n\n\n<p>If your setup is correct, your first iOS app will launch successfully.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Important note for Windows users<\/strong><\/h3>\n\n\n\n<p>You can build and test React Native Android apps on Windows.<\/p>\n\n\n\n<p>But you cannot build iOS apps locally on Windows because Xcode is required.<\/p>\n\n\n\n<p>If you want to test iOS apps, you need access to a macOS system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Edit Your First React Native App Screen<\/strong><\/h2>\n\n\n\n<p>Once your app runs, open the project in VS Code.<\/p>\n\n\n\n<p>Find this file:<\/p>\n\n\n\n<p>App.tsx<\/p>\n\n\n\n<p>Replace the existing content with this simple example:<\/p>\n\n\n\n<p>import React from &#8216;react&#8217;;<\/p>\n\n\n\n<p>import {SafeAreaView, Text, StyleSheet} from &#8216;react-native&#8217;;<\/p>\n\n\n\n<p>function App() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;return (<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView style={styles.container}&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text style={styles.title}&gt;Welcome to My First React Native App&lt;\/Text&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text style={styles.subtitle}&gt;Built using React Native CLI&lt;\/Text&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/SafeAreaView&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>const styles = StyleSheet.create({<\/p>\n\n\n\n<p>&nbsp;&nbsp;container: {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;flex: 1,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;justifyContent: &#8216;center&#8217;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;alignItems: &#8216;center&#8217;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 20,<\/p>\n\n\n\n<p>&nbsp;&nbsp;},<\/p>\n\n\n\n<p>&nbsp;&nbsp;title: {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;fontSize: 24,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;fontWeight: &#8216;700&#8217;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;textAlign: &#8216;center&#8217;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;},<\/p>\n\n\n\n<p>&nbsp;&nbsp;subtitle: {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;fontSize: 16,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;marginTop: 12,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;textAlign: &#8216;center&#8217;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;},<\/p>\n\n\n\n<p>});<\/p>\n\n\n\n<p>export default App;<\/p>\n\n\n\n<p>Save the file.<\/p>\n\n\n\n<p>Your app should refresh automatically using Fast Refresh.<\/p>\n\n\n\n<p>If it does not refresh, reload the app from the developer menu or restart Metro.<\/p>\n\n\n\n<p>Basic <a href=\"https:\/\/www.guvi.in\/blog\/objects-methods-and-classes-in-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JavaScript concepts<\/strong><\/a> like objects, methods, and classes can help you understand React Native code more clearly.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Basic React Native Concepts Should Beginners Know?<\/strong><\/h2>\n\n\n\n<p>Before building bigger apps, understand a few basic React Native concepts.<\/p>\n\n\n\n<p>These concepts will help you read code, debug errors, and build better screens.<\/p>\n\n\n\n<p>If you are still building your basics, a <a href=\"https:\/\/www.guvi.in\/blog\/javascript-frontend-roadmap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JavaScript frontend roadmap<\/strong><\/a> can help you understand the skills needed before React Native.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Components<\/strong><\/h3>\n\n\n\n<p>Components are reusable pieces of UI.<\/p>\n\n\n\n<p>A button, login form, profile card, header, or product item can be a component.<\/p>\n\n\n\n<p>React Native apps are built by combining many such components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>JSX<\/strong><\/h3>\n\n\n\n<p>JSX lets you write UI structure inside JavaScript or TypeScript files.<\/p>\n\n\n\n<p>It looks similar to HTML, but React Native does not use regular web tags.<\/p>\n\n\n\n<p>For example, you use View instead of div and Text instead of p.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>State<\/strong><\/h3>\n\n\n\n<p>State stores data that can change inside your app.<\/p>\n\n\n\n<p>For example, the text typed in a form, login status, or cart count can be stored in state.<\/p>\n\n\n\n<p>When state changes, React Native updates the screen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Props<\/strong><\/h3>\n\n\n\n<p>Props are values passed from one component to another.<\/p>\n\n\n\n<p>They help you reuse components with different data.<\/p>\n\n\n\n<p>For example, one StudentCard component can show different student names using props.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Metro<\/strong><\/h3>\n\n\n\n<p>Metro is the bundler that prepares your JavaScript code for React Native.<\/p>\n\n\n\n<p>It runs in the background while you build and test your app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Real-World Example of React Native CLI<\/strong><\/h2>\n\n\n\n<p>Imagine a college wants to build a student attendance app for teachers.<\/p>\n\n\n\n<p>The app needs login, class lists, student profiles, attendance marking, offline support, and push notifications.<\/p>\n\n\n\n<p>Using React Native CLI, the development team can build one shared app for Android and iOS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example: Student attendance app<\/strong><\/h3>\n\n\n\n<p><strong>A student attendance app may include:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Teacher login screen<\/strong><\/li>\n\n\n\n<li><strong>Class selection screen<\/strong><\/li>\n\n\n\n<li><strong>Student attendance list<\/strong><\/li>\n\n\n\n<li><strong>Offline attendance saving<\/strong><\/li>\n\n\n\n<li><strong>Push notifications<\/strong><\/li>\n\n\n\n<li><strong>Camera-based student ID scanning<\/strong><\/li>\n\n\n\n<li><strong>Admin dashboard integration<\/strong><\/li>\n<\/ul>\n\n\n\n<p>React Native CLI is useful in this case because the app may need native permissions, local storage, camera access, and notification SDK configuration.<\/p>\n\n\n\n<p>For an Indian college or edtech company, this approach can reduce development effort because one React Native team can work on both Android and iOS versions.<\/p>\n\n\n\n<p>You can also explore <a href=\"https:\/\/www.guvi.in\/blog\/react-native-app-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>React Native app examples<\/strong><\/a> to get ideas for beginner-friendly mobile projects.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Common Mistakes to Avoid While Using React Native CLI<\/strong><\/h2>\n\n\n\n<p>React Native CLI setup errors are common for beginners.<\/p>\n\n\n\n<p>Most issues happen because one tool is missing, outdated, or incorrectly configured.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Installing the old global React Native CLI<\/strong><\/h3>\n\n\n\n<p>Many beginners install the old global CLI package.<\/p>\n\n\n\n<p>Avoid this command:<\/p>\n\n\n\n<p>npm install -g react-native-cli<\/p>\n\n\n\n<p>Use the current Community CLI command through npx instead:<\/p>\n\n\n\n<p>npx @react-native-community\/cli@latest init FirstApp<\/p>\n\n\n\n<p>This helps avoid version conflicts and outdated project setup issues.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Skipping Android SDK configuration<\/strong><\/h3>\n\n\n\n<p>Installing Android Studio alone is not enough.<\/p>\n\n\n\n<p>You must also install the required SDK tools, emulator, platform tools, and build tools.<\/p>\n\n\n\n<p>If adb devices do not show your emulator or phone, your Android app will not run.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Trying to run iOS on Windows<\/strong><\/h3>\n\n\n\n<p>React Native can be used on Windows for Android development.<\/p>\n\n\n\n<p>But iOS development needs Xcode, and Xcode works only on macOS.<\/p>\n\n\n\n<p>So, npm run ios will not work on a Windows machine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Closing Metro during development<\/strong><\/h3>\n\n\n\n<p>Metro must keep running while you develop the app.<\/p>\n\n\n\n<p>If you close Metro, your app may fail to load JavaScript changes.<\/p>\n\n\n\n<p>Keep one terminal open with:<\/p>\n\n\n\n<p>npm start<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Ignoring version compatibility<\/strong><\/h3>\n\n\n\n<p>React Native depends on Node.js, JDK, Android SDK, Xcode, CocoaPods, and Gradle.<\/p>\n\n\n\n<p>If one tool version is incompatible, your build may fail.<\/p>\n\n\n\n<p>Always check the official React Native documentation before setting up a new project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best Practices for Beginners Using React Native CLI<\/strong><\/h2>\n\n\n\n<p>Once your first app runs, follow a clean workflow.<\/p>\n\n\n\n<p>This will make your learning smoother and reduce setup frustration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Keep your project folder simple<\/strong><\/h3>\n\n\n\n<p>Avoid spaces and special characters in folder names.<\/p>\n\n\n\n<p>Use simple names like:<\/p>\n\n\n\n<p>FirstApp<\/p>\n\n\n\n<p>StudentApp<\/p>\n\n\n\n<p>FoodOrderApp<\/p>\n\n\n\n<p>This helps avoid path-related errors in some systems.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Use separate terminals<\/strong><\/h3>\n\n\n\n<p>Use one terminal for Metro.<\/p>\n\n\n\n<p>Use another terminal for Android or iOS commands.<\/p>\n\n\n\n<p>This makes it easier to identify whether an error is coming from Metro or the native build process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Test on emulator and real device<\/strong><\/h3>\n\n\n\n<p>Emulators are useful for quick testing.<\/p>\n\n\n\n<p>But real-device testing helps you find performance, permission, screen-size, and device-specific issues.<\/p>\n\n\n\n<p>If possible, test your Android app on a real phone after it runs on the emulator.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Learn debugging early<\/strong><\/h3>\n\n\n\n<p>Do not panic when you see red error screens.<\/p>\n\n\n\n<p>Read the error message carefully.<\/p>\n\n\n\n<p>Most beginner errors are caused by missing imports, package issues, Metro cache, or setup problems.<\/p>\n\n\n\n<p>Learning <a href=\"https:\/\/www.guvi.in\/blog\/javascript-debugging-tips-and-tricks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JavaScript debugging<\/strong><\/a> early will help you handle red screens, missing imports, and runtime errors more confidently.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Use Git from the beginning<\/strong><\/h3>\n\n\n\n<p>Create a <a href=\"https:\/\/www.guvi.in\/blog\/steps-to-upload-your-project-to-github-using-git\/\" target=\"_blank\" rel=\"noreferrer noopener\">Git repository<\/a> for your project.<\/p>\n\n\n\n<p>This helps you track changes and return to a working version if something breaks.<\/p>\n\n\n\n<p>Version control is also useful when you start building portfolio projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>React Native CLI Commands Cheat Sheet<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Task<\/td><td>Command<\/td><\/tr><tr><td>Create new project<\/td><td>npx @react-native-community\/cli@latest init FirstApp<\/td><\/tr><tr><td>Enter project folder<\/td><td>cd FirstApp<\/td><\/tr><tr><td>Start Metro<\/td><td>npm start<\/td><\/tr><tr><td>Run Android app<\/td><td>npm run android<\/td><\/tr><tr><td>Run iOS app<\/td><td>npm run ios<\/td><\/tr><tr><td>Check Android devices<\/td><td>adb devices<\/td><\/tr><tr><td>Install iOS pods<\/td><td>cd ios &amp;&amp; bundle exec pod install<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Career Relevance: Why React Native CLI Matters for Learners<\/strong><\/h2>\n\n\n\n<p>React Native CLI is not just a setup tool.<\/p>\n\n\n\n<p>It teaches you how cross-platform mobile apps work in real projects.<\/p>\n\n\n\n<p>For freshers and students, this skill is useful because many startups and product companies prefer developers who can build fast, maintainable apps for both Android and iOS.<\/p>\n\n\n\n<p>If you already know JavaScript or React, React Native is a natural next step.<\/p>\n\n\n\n<p>You can move from web development to mobile app development without learning Kotlin and Swift at the beginning.<\/p>\n\n\n\n<p>Real-world examples of <a href=\"https:\/\/www.guvi.in\/blog\/how-vercel-built-the-v0-ios-app\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>iOS app development<\/strong><\/a> can help learners understand how modern teams build mobile experiences.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Skills you build through this project<\/strong><\/h3>\n\n\n\n<p><strong>By building your first React Native CLI app, you learn:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Mobile app project structure<\/strong><\/li>\n\n\n\n<li><strong>Android and iOS build workflow<\/strong><\/li>\n\n\n\n<li><strong>React Native components<\/strong><\/li>\n\n\n\n<li><strong>Styling with JavaScript<\/strong><\/li>\n\n\n\n<li><strong>Metro bundling<\/strong><\/li>\n\n\n\n<li><strong>Emulator and device testing<\/strong><\/li>\n\n\n\n<li><strong>Basic debugging<\/strong><\/li>\n\n\n\n<li><strong>Native project awareness<\/strong><\/li>\n<\/ul>\n\n\n\n<p>These skills are useful for internships, fresher projects, hackathons, portfolio apps, and mobile developer interviews.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Build Full Stack Skills With HCL GUVI<\/strong><\/h2>\n\n\n\n<p>React Native CLI helps you build Android and iOS apps using JavaScript and React. But to create production-ready mobile apps, you also need strong foundations in frontend development, backend APIs, databases, Git, debugging, and project deployment.<\/p>\n\n\n\n<p>Explore <a href=\"https:\/\/www.guvi.in\/zen-class\/full-stack-development-course\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=How+to+Use+React+Native+CLI+for+Best+Android%2FiOS+App+Development\" target=\"_blank\" rel=\"noreferrer noopener\">HCL GUVI\u2019s <strong>Full Stack Development Course<\/strong><\/a> to build practical development skills through hands-on projects, mentor-led learning, and career-focused training.<\/p>\n\n\n\n<p>After learning React Native, understanding <a href=\"https:\/\/www.guvi.in\/blog\/best-nodejs-frameworks-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>backend frameworks<\/strong><\/a> can help you connect your mobile apps with real APIs and databases.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>React Native CLI is a strong choice when you want to build Android and iOS apps with deeper native control. The setup takes more effort than Expo, but it prepares you for real-world mobile app development. Once you install Node.js, Android Studio, JDK, and Xcode for iOS, you can create your first project, run it, and edit your first screen. Start small, understand the workflow, and then build projects with navigation, APIs, authentication, storage, and deployment. The best way to learn React Native CLI is to build consistently.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQS<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1782808918049\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>1. What is React Native CLI used for?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>React Native CLI is used to create, run, and manage React Native apps with direct access to Android and iOS native project files.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782808930620\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>2. Is React Native CLI better than Expo?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>React Native CLI is better when your app needs custom native modules, native SDKs, or full Android\/iOS control. Expo is easier for quick prototypes and beginner experiments.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782808942250\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>3. Can I build both Android and iOS apps with React Native CLI?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, React Native CLI supports both Android and iOS app development. Android apps can be developed on Windows, macOS, or Linux, but iOS development needs macOS and Xcode.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782808953156\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>4. Do I need Android Studio for React Native CLI?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, Android Studio is needed for Android SDK, emulator, platform tools, and native Android build support.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782808963411\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>5. Do I need Xcode for React Native iOS apps?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, Xcode is required to build and run iOS apps locally. This means iOS development needs a macOS system.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782808976926\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>6. Is React Native CLI beginner-friendly?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>React Native CLI is beginner-friendly if you already know basic JavaScript and React. The setup is slightly technical, but the app-building workflow becomes easier with practice.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782808988420\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>7. Which command creates a React Native CLI project?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Use npx @react-native-community\/cli@latest init FirstApp to create a new React Native CLI project.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782809000226\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>8. Why is my React Native Android app not running?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Common reasons include missing Android SDK, emulator not running, USB debugging disabled, incorrect JDK version, or Metro not running.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782809012114\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>9. Can I use React Native CLI for production apps?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, React Native CLI can be used for production apps because it gives developers more control over native configuration, build settings, and platform-specific integrations.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782809030461\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>10. What should I build after my first React Native app?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>After your first app, build a to-do app, login screen, student attendance app, food ordering UI, weather app, or API-based news app.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>TL;DR Summary React Native CLI helps you build Android and iOS apps using JavaScript, React, and native mobile development tools. To build your first app, you need Node.js, Android Studio, JDK, and the React Native Community CLI. For iOS, you also need macOS, Xcode, and CocoaPods. React Native CLI is best when you want direct [&hellip;]<\/p>\n","protected":false},"author":76,"featured_media":122356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"views":"23","authorinfo":{"name":"Reemsha Khan","url":"https:\/\/www.guvi.in\/blog\/author\/reemsha-khan\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/06\/React-Native-CLI-300x116.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/119762"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=119762"}],"version-history":[{"count":2,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/119762\/revisions"}],"predecessor-version":[{"id":122359,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/119762\/revisions\/122359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/122356"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=119762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=119762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=119762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}