Have you ever wanted to build a mobile app using JavaScript without writing separate code for Android and iOS? If you’re new to React Native, this guide will help you understand exactly how to start.
React Native is a popular open-source framework developed by Meta that lets developers create mobile apps using React and JavaScript. It bridges JavaScript code with native platform components, allowing you to build apps that look and perform like native ones. The biggest advantage is that you write once and deploy to both platforms, saving time and effort while maintaining native-level performance.
In this article, you’ll learn the exact steps to set up your environment, create your first React Native project, and run it successfully on your device or emulator.
Prerequisites and Environment Setup
Before you create your first React Native project, it is important to make sure your development environment is ready. React Native depends on a few tools that allow your code to compile, run, and communicate with native platforms like Android and iOS.
Step 1: Install Node.js
React Native runs on Node.js, which provides the runtime for executing JavaScript outside the browser. Download and install the LTS Node.js version from the official Node website. To confirm the installation, open your terminal and run:
node -v
npm -vIf both commands return version numbers, you are ready to continue.
Step 2: Install Java Development Kit (JDK)
The Android build system depends on Java. You can install it from the official Oracle or OpenJDK website.
Step 3: Set up Android Studio
Android Studio provides the Android SDK and emulator. During installation, check the boxes for Android SDK, SDK Platform, and Virtual Device. After setup, make sure the environment variable ANDROID_HOME points to your SDK location.
Step 4: For iOS (macOS users)
If you are developing for iOS, install Xcode from the Mac App Store. This includes all the tools needed to compile and test your app on an iPhone simulator.
Step 5: Choose your setup type
There are two main ways to start a React Native project:
- React Native CLI: Offers complete control of the native project. Best for production-grade or custom native module apps.
- Expo CLI: Simplifies setup and is ideal for testing ideas or learning React Native without requiring native code configuration.
If you are a beginner, Expo is the fastest way to see your first app running. If you already have experience with Android or iOS development, the React Native CLI will provide you with more flexibility.
Create a New Project
Once your environment is ready, it is time to create your first React Native project. You can start in two different ways, depending on how much control and configuration you want. Both methods are valid, but one might suit you better depending on your experience level.
Option 1: Using React Native CLI (Bare Workflow)
The React Native CLI gives you complete control over native Android and iOS files. It is ideal when you need to customize native modules, add third-party SDKs, or integrate with existing native apps.
To create a new project, open your terminal and run:
npx @react-native-community/cli@latest init MyFirstAppThis command will download the latest stable React Native version and create a folder named MyFirstApp containing all required files. Then navigate into the project directory:
cd MyFirstAppInside this folder, you will find separate directories for Android and iOS, along with your JavaScript files. This structure helps you understand how React Native connects both JavaScript and native code.
If you want to start with a specific version of React Native, use the –version flag:
npx @react-native-community/cli@latest init MyFirstApp --version 0.82.1You can also use a custom project template with the –template flag when you need pre-built configurations.
Option 2: Using Expo CLI (Managed Workflow)
If you are new to mobile development or want to get started quickly without configuring native files, Expo is the better choice. It takes care of all the native setup for you.
To create a new project with Expo, run:
npx create-expo-app MyFirstAppAfter setup completes, go into the new folder:
cd MyFirstAppNote: Expo projects run instantly across Android, iOS, and even the web. You do not need Android Studio or Xcode at this stage, making it perfect for beginners who want to focus on learning React Native itself.
Run the Project
After creating your React Native project, the next step is to run it and see your first app in action. Depending on the setup you chose earlier, the process is slightly different. Let us go through both.
If you used React Native CLI
When you create a project using the CLI, it includes all native files required for Android and iOS builds. Before running, make sure that your Android emulator or iOS simulator is ready.
Step 1: Start the Metro Bundler
Metro is the JavaScript bundler that compiles and serves your React Native code to the app. To start Metro, open your project folder in the terminal and run:
npm startKeep this terminal window open while your app runs. Metro continuously watches for changes and automatically rebuilds your JavaScript bundle when you save a file.
Step 2: Run the Android app
In a new terminal window (with Metro still running), execute:
npx react-native run-androidReact Native will build the Android project and install it on the emulator or connected device. The first build may take a few minutes because it compiles native code and installs dependencies.
Step 3: Run the iOS app (macOS only)
If you are developing on macOS, you can run the app on the iPhone simulator using:
npx react-native run-iosThis command compiles the iOS version and launches it inside Xcode’s simulator.
If you used Expo
Expo makes running your app even simpler since it handles all native parts internally.
From your project directory, run:
npx expo startThis command starts the Expo development server and opens a new browser window. You will see a QR code that can be scanned using the Expo Go app available on Android and iOS. Once scanned, the app loads instantly on your physical device.
You can also press the ‘a‘ key in your terminal to open the app in an Android emulator or the ‘i‘ key to launch it in an iOS simulator, if you are using macOS.
Modify and Reload
Now that your app is running, it is time to make your first change and see how React Native updates in real time. This is one of the main reasons developers love working with it. The ability to instantly see code changes speeds up learning and development.
Step 1: Open the main file
Inside your project folder, locate the file named App.js or App.tsx (if you used TypeScript). This file represents the root component of your application. Open it in your preferred code editor, such as Visual Studio Code.
You will see a simple function component that returns a few lines of JSX. It might look like this:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Welcome to My First React Native App!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5F5F5',
},
text: {
fontSize: 18,
color: '#333333',
},
});
export default App;Step 2: Make a simple change
To see live reloading in action, change the text inside the <Text> component to something else, for example:
<Text style={styles.text}>Hello React Native Learner!</Text>Save the file. Within a few seconds, the updated text should appear automatically in your running app. If not, you can manually trigger a reload.
- On Android, press R twice quickly in the emulator.
- On iOS, press Cmd + R in the simulator.
- On a physical device, open the developer menu and select Reload.
Step 3: Understand what just happened
React Native uses a JavaScript bundler (Metro) that listens for changes in your source files. When you save a file, Metro rebuilds only the parts that changed and sends the new JavaScript bundle to the app. This makes the development process smooth and interactive.
Wrapping Up
You’ve just built and run your first React Native app. From here, keep your workflow clean by using Git for version control and tools like Prettier or ESLint for consistent formatting. Plan your project structure early and decide whether you’ll stick with CLI or Expo before adding more dependencies.
If you face errors, start with the basics: confirm your Android or iOS setup, reinstall pods if needed, and restart Metro with a cache reset. Most issues clear up with these quick steps.
Next, explore navigation, try simple state management, and experiment with native modules. Each small improvement builds your confidence and gets you closer to creating real-world mobile apps.