DEV Community

Cover image for Step by Step Expo App Setup Guide for 2026
Arin Volkov
Arin Volkov

Posted on

Step by Step Expo App Setup Guide for 2026

#reactnative

I remember when I wanted to create a genuine mobile app that worked everywhere without touching Swift or Kotlin. That discovery led me to Expo and React Native. I realized I could build applications for iOS, Android, and even the web just with JavaScript and React. In this walkthrough, I will show you exactly how I launched my own Expo app from scratch, how I explored the new Expo Router, and I will include a few lessons from my journey to help you launch your own project smoothly across all platforms.

Note: This article was generated with the help of AI tools.

Let me share how the process felt for me,and hopefully get you excited to dive into cross-platform app development too.

What is Expo and Why Did I Choose It?

Expo is an open-source platform designed to make it much easier to create universal and native applications using React Native. I simply wrote my project in JavaScript or TypeScript one time, and I could deploy the same app to iOS, Android, and the web, not worrying about writing distinct codebases.

These are some of the reasons Expo appealed to me:

  • I never needed to tinker with native code for most core features. I avoided dealing with Swift or Java entirely.
  • With the Expo Go app, I could view changes on my phone as soon as I saved them.
  • The newly updated Expo Router (now the standard since Expo 52) allowed for smooth navigation and deep linking.

From beginning projects to updating features and even using hardware like the camera, Expo removed so many complications. I focused on making my app, not fighting with the setup.

Prerequisites: What I Needed to Get Started

Before doing any coding, I needed to have a few tools in place:

  • A computer: I use a Mac, but Windows or Linux devices work just as well.
  • Node.js installed: Luckily, Node was already on my device, but I upgraded to the latest Long-Term Support edition. As of early 2025, version 20 or above is the best choice.
  • Expo Go app on my phone: I got it from the App Store since I use iPhone, but Android users can get it on Google Play. This made testing very smooth.
  • A code editor: I prefer VS Code because it is rich in features and extensions for React and TypeScript.

This is how I verified my Node.js version

I used my terminal and entered:

node -v
Enter fullscreen mode Exit fullscreen mode

The terminal returned something like v20.0.0, which meant I was ready. If you see no version or an older one, simply visit nodejs.org and grab the recommended installer. I have always found this process simple and quick.

How I Created My First Expo Project

Once the environment was ready, I got started building.

I opened my terminal, moved into my desired directory, and ran:

npx create-expo-app MyAwesomeApp
Enter fullscreen mode Exit fullscreen mode

Feel free to rename MyAwesomeApp to any project title you want. After pressing enter, Expo handled the boilerplate and all dependencies for me.

What does this command do under the hood?

  • A new directory with my chosen app name appeared, filled with starter code.
  • An Expo Router was initialized so navigation worked from the start.
  • I did not need to configure anything for web, iOS, or Android,everything just worked.

If you are a GitHub user, Expo also has project templates at expo.new. I tried it out and enjoyed connecting my repository to streamline CI/CD later.

Peeking Inside the Project Structure

When I loaded my new Expo app inside VS Code, a few key folders and files stood out:

  • app/: This contains all my screens and navigation logic. Expo Router uses this directory for its file-based routing. It actually felt similar to building with Next.js for websites.
  • assets/: A place for all of my images, custom icons, and fonts.
  • package.json: Where all my dependencies and project scripts live.

Pro Tip: I had not used TypeScript much before, but the included template made the learning curve manageable. Tinkering and intentionally breaking things helped me learn fastest.

Running My Expo App on a Real Device

Naturally, I wanted to see my code live on a device. Here are the steps I followed:

  1. In the terminal, I moved into my project’s folder:

    cd MyAwesomeApp

  2. I launched the local development server:

    npx expo start

  3. My browser popped up with a big QR code. I opened Expo Go on my phone, scanned the code, and right away my app was live.

At first, I saw the starter welcome screen. After I swapped the text in app/index.tsx and saved, my device showed the update. The instant refresh feature made experimenting really fun.

Customizing My Project for My Own Features

The starter Expo template ships with some demo content. Since I only wanted code I understood, I tidied things up.

  • To clear out mock data, I used this command:

    npm run reset-project

  • I organized the assets folder, adding my own images and deleting sample files.

  • I also removed components and navigation samples that did not match what I wanted in my project.

This cleanup made the project so much easier to read as it evolved.

Figuring Out File-Based Routing with Expo Router

Expo Router completely changed my perspective on navigation in React Native.

  • Each file inside my app/ folder corresponds to a screen in my app.
  • By adding layout.tsx files, I could create shared navigation structures such as tabs or stacks.
  • The names of files and directories decide the route path: for instance, app/explore.tsx gives the /explore route.

How I Add Screens

Suppose I needed a new “Explore” page. I simply created a freshly named file, explore.tsx, inside app/.

  • The file app/index.tsx represents the home (that one is mandatory).
  • app/explore.tsx is visible at /explore.
  • For dynamic routes like a user’s profile, I added app/user/[id].tsx.

Exploring Layouts and Tabs

Wanting tabs, I set up a directory app/(tabs) and created a new layout.tsx with this code:

import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="explore" options={{ title: 'Explore' }} />
    </Tabs>
  );
}
Enter fullscreen mode Exit fullscreen mode

I included index.tsx and explore.tsx within the (tabs) folder, and instantly, I had two tab navigation pages working. Expo detected everything,no manual registration needed.

Note: Any screens located alongside a layout.tsx will use the navigation setup it defines. Parentheses in folder names such as (tabs) only serve to organize,they do not affect the route’s web URL.

Hot Reloading and Seeing Updates Instantly

Perhaps my favorite aspect of Expo was the real-time hot reloading. As soon as I made a code edit and saved, the app refreshed right away on my phone.

For example: I swapped "Hello Expo" with "Hello, Universal World!" in app/index.tsx, pressed save, and immediately watched my device reflect the new text. This let me try new ideas with confidence.

Styling My App

Working with styles in React Native felt familiar,similar to writing CSS, but with an object-based approach.

import { StyleSheet, View, Text } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, Expo!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: '#fff',
    fontSize: 28,
    fontWeight: 'bold',
  },
});
Enter fullscreen mode Exit fullscreen mode

I experimented a lot with both simple color names, hex values, and even RGB, until I found a look I liked. React Native’s flexible style system worked great for both mobile and web experiences.

Running My App on Different Platforms

One of the coolest things for me was watching my one codebase run everywhere.

  • On physical devices (iPhone or Android): I scanned the Expo Go QR code after each major change.
  • On the web: After I started the dev server, I pressed w in the terminal, and my app opened in my browser. This was incredibly helpful for design tweaks.
  • On simulated devices: I later set up Android Studio and Xcode to launch my project in those environments with Expo CLI.

Being able to check my app on every platform meant I could catch bugs early and ensure cross-device consistency.

Using Native Device Features

I wanted to incorporate the camera, and Expo made it straightforward.

I simply ran:

npx expo install expo-camera
Enter fullscreen mode Exit fullscreen mode

Then, the Camera component became usable immediately in my app. I have also tried libraries for maps, push notifications, and more. Expo maintains add-ons for most native features, and installation always took me just a moment.

Deeper Navigation: Dynamic Routes, Deep Linking, and More

Expo Router enabled me to build much more powerful navigation patterns.

Dynamic Route Example:

To display a different profile page per user, I made a file named app/user/[id].tsx. Here’s how I got the parameter from the route:

import { useLocalSearchParams } from 'expo-router';

export default function UserScreen() {
  const { id } = useLocalSearchParams();
  return <Text>User ID: {id}</Text>;
}
Enter fullscreen mode Exit fullscreen mode

Redirecting Users:

Whenever I wanted to programmatically route a user elsewhere, I reached for the useRouter hook:

import { useRouter } from 'expo-router';

const router = useRouter();

// Later in my code
router.push('/explore');
Enter fullscreen mode Exit fullscreen mode

This was perfect for flows like authentication or reacting to notifications.

My Tips for a Smooth Expo Experience

  • Refresh as needed: If I changed core navigation or added screens, a full refresh sometimes worked best.
  • Upgrade regularly: Expo and React Native see frequent releases. I followed documentation and kept dependencies current.
  • Connect with others: The Expo Discord channel gave me support, advice, and friendships.
  • Preview native features before shipping: When I needed to test things not available in Expo Go, I used Expo Development Builds.
  • Building for production: Expo can run cloud builds for both iOS and Android. I even got an app on the App Store using just Expo,without a Mac.

Bridging the Gap: From Idea to Production-Ready Code

As I expanded my project, keeping code organized and maintaining standards got trickier,especially teaming up or getting ready for production use. If you want to quickly turn UI ideas into polished, reusable React Native screens (with TypeScript, modular design, and prebuilt navigation), you might find RapidNative a huge accelerator. It lets you describe features in plain English, then auto-generates fully styled React Native components using NativeWind, arranged for long-term scalability. You get easily exportable modules for Expo and React Native CLI, speeding up your workflow when app complexity grows or when you’re rapidly prototyping several ideas.

Wrapping Up: I Built a Universal App!

Following all these steps, I ended up with a universal app running seamlessly on my phone, in a browser window, and in device emulators. Expo made the setup simple and enjoyable. I learned to prep my tools, scaffold the initial app, create polished navigation using Expo Router, and make my app unique both stylistically and functionally.

Now, I am busy building features, connecting to native APIs, and planning for the day I publish my work. Expo’s official docs remain my favorite source for problem solving, and I love getting ideas from the active community.

Give it a shot! I am looking forward to seeing what you create!

If you have a cool concept, go for it! Jump in, post updates on Discord, and keep exploring. The world of universal apps is only getting bigger with Expo.

Top comments (0)