🔥How I Built My First React Native App (Step-by-Step With Modern Tools)

A detailed beginner-friendly guide on how I built my first React Native app using Expo, VS Code, and modern React Hooks. Includes setup, code, and tips for 2025.

cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smx20j0geiomlrchrn3x.png

When I first started learning React Native, I had no idea where to begin.

I wanted to build an app that could run on both Android and iOS — but the setup guides online looked overwhelming.

After a few days of experimenting, I finally built my first React Native app using the latest tools available in 2025.

Here’s a complete guide to help you do the same 👇

---

🧰 Step 1: Setting Up the Environment

Install Node.js

React Native requires Node.js to run.

Download and install it from nodejs.org.

bash
node -v
npm -v
Make sure both commands show a version number.

Install Expo CLI (Recommended for Beginners)
Instead of setting up Xcode or Android Studio manually, I used Expo, which makes the whole process smooth.

bash
Copy code
npm install -g expo-cli
Then create your first project:

bash
Copy code
expo init my-first-app
cd my-first-app
expo start
This command launches the Expo DevTools in your browser and gives you a QR code to open the app directly on your phone using the Expo Go app.

🧱 Step 2: Creating the First Screen
Open your project in VS Code and edit the App.js file:

javascript
Copy code
import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello World 👋</Text>
      <Text style={styles.subtitle}>My First React Native App</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#333",
  },
  subtitle: {
    fontSize: 18,
    color: "#666",
    marginTop: 8,
  },
});
💡 Tip: React Native uses the same components on both iOS and Android, so you can design once and run everywhere.

🎨 Step 3: Adding Styling & Reusable Components
I created a simple component called Button.js to learn how modular design works.

javascript
Copy code
import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

export default function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress} style={styles.button}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#4B7BE5",
    padding: 12,
    borderRadius: 8,
    marginTop: 10,
  },
  text: {
    color: "#fff",
    fontSize: 16,
    textAlign: "center",
  },
});
Then imported it into App.js:

javascript
Copy code
import Button from "./Button";

<Button title="Click Me 🚀" onPress={() => alert("Button pressed!")} />
This small addition taught me how reusable UI components make large apps scalable and maintainable.

⚙️ Step 4: Debugging and Testing the App
Expo provides an excellent debugging environment.

Use r in terminal to reload the app.

Press d to open developer tools.

Use React Native Debugger or Flipper for advanced logs.

If you face errors like “Metro Bundler not starting,” simply clear cache:

bash
Copy code
expo start -c
📱 Step 5: Running on Real Device
Install Expo Go app from Google Play or App Store.

Scan the QR code from your terminal or browser.

Boom 💥 — your React Native app is live on your phone!

For a standalone build:

bash
Copy code
expo build:android
expo build:ios
🚀 Step 6: Adding Modern Tools (Optional but Powerful)
To make development faster and professional:

TypeScript for type safety

React Navigation for routing

Redux Toolkit or Zustand for state management

NativeWind (TailwindCSS) for styling

EAS Build for production-ready builds

Example installation:

bash
Copy code
npm install @react-navigation/native @react-navigation/stack
npm install react-native-screens react-native-safe-area-context
💡 Lessons Learned
Expo simplifies mobile app development.

React Native lets you reuse your React knowledge.

Debugging on a physical device is always more accurate.

Styling in React Native is fun when you use consistent components.

🧭 Final Thoughts
Building my first React Native app was an amazing journey.
I started with zero mobile experience, and now I can confidently say — React Native makes cross-platform development simple, fast, and enjoyable.

If you’re a beginner, start small but stay consistent.
Within weeks, you’ll be building powerful apps for both iOS and Android!


Follow me on Dev.to for more React Native tips, tools, and project tutorials.

Written by Umaar Ahmed — React Native Developer & App Builder 🚀