Getting Started with React Native and Expo: A Beginner's Honest Guide

If you know how to build web applications with React, you are closer to shipping a mobile app than you probably think. React Native uses the same component model, the same hooks, and the same JavaScript. The differences are in the primitives — instead of div and span, you use View and Text — and in the tooling.

This guide gets you from zero to a running app on your own device in under an hour, then tells you what to focus on next.

What You Need Before You Start

• Node.js 18 or later (LTS version)
• A code editor (VS Code with the Expo Tools extension is the standard choice)
• A smartphone — iOS or Android — with the Expo Go app installed from your app store

You do not need Xcode or Android Studio to get started. Expo Go handles the development client on your device while you iterate.

Creating Your First React Native Project with Expo

Install the Expo CLI globally and create a new project:

npm install -g expo-cli
npx create-expo-app MyFirstApp --template blank-typescript
cd MyFirstApp
npx expo start

After running npx expo start, a QR code appears in your terminal. Scan it with the Camera app on iOS or the Expo Go app on Android. Your app will open on your device and live-reload every time you save a file.

Understanding the Project Structure

A new Expo project has a flat, minimal structure:

• app.json — your app's configuration: name, bundle identifier, icon, splash screen, permissions
• App.tsx — the root component that renders first
• assets/ — images, fonts, and other static files
• node_modules/ — dependencies

As your app grows, you will add directories for screens, components, hooks, and utilities. Expo does not impose a specific folder structure — organize by feature or by type based on what keeps your team oriented.

Writing Your First Screen

Open App.tsx. The default file renders a simple view with text. Here is a slightly more structured version to understand the core primitives:

import { StyleSheet, Text, View, TouchableOpacity, Alert } from 'react-native';
 
export default function App() {
  const handlePress = () => {
    Alert.alert('Hello', 'You tapped the button.');
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>My First App</Text>
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Tap me</Text>
      </TouchableOpacity>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  heading: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#000',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontWeight: '500',
  },
});

Notice StyleSheet.create instead of CSS. React Native uses a subset of CSS properties in a JavaScript object. Flexbox is the default layout model for View. flex: 1 means "take all available space."

Navigation: The First Non-Obvious Part

A multi-screen app needs a navigation library. The standard choice is Expo Router, which ships with new Expo projects created from the default template in 2024+.

Expo Router uses file-based routing — the same pattern as Next.js. A file at app/profile.tsx becomes the /profile route. A link between screens looks like:

import { Link } from 'expo-router';
 
// Inside your component
<Link href="/profile">Go to Profile</Link>

If you are on an older template using React Navigation directly, the setup is more manual but the concept is the same: a Stack, Tab, or Drawer navigator wraps your screens and manages the history.

Accessing Device Capabilities with Expo SDK

The Expo SDK provides pre-built modules for common native capabilities. You do not need to write native code to access them:

• expo-camera — camera and QR scanning
• expo-location — GPS and geolocation
• expo-notifications — push and local notifications
• expo-image-picker — photo library and camera roll
• expo-secure-store — encrypted key-value storage for tokens
• expo-haptics — haptic feedback

Install them with npx expo install expo-camera (use expo install rather than npm install — it picks the correct version for your Expo SDK version).

What to Learn Next, In Order

1. React Native layout and Flexbox The layout system is close to CSS Flexbox but not identical. Spend a session with the React Native layout docs and the Yoga playground.

2. Managing state If you know React state and context, start there. For anything beyond local component state, Zustand is the most practical state library for React Native — it is lightweight and has no boilerplate.

3. Data fetching TanStack Query works on React Native and handles caching, loading states, and background refetching reliably. Add it early rather than building ad-hoc fetch logic.

4. Navigation patterns Work through the Expo Router documentation. Understand stack navigation, tab navigation, and how to pass parameters between screens.

5. Building for device Use EAS Build to create a real device build early. The development experience in Expo Go is fast but incomplete — some native modules only work in a real build. Getting comfortable with the build process before your deadline is important.

Common Beginner Mistakes

• Using <View> where <ScrollView> is needed — content will be clipped at the screen edge rather than scrolling
• Forgetting that StyleSheet properties are in camelCase, not kebab-case
• Mutating state directly instead of through setState — same issue as in React web
• Running an emulator and a physical device at the same time and confusing which one has the latest build

The React Native documentation and Expo documentation are both high quality. When something does not work as expected, the official docs should be your first stop.

If you are building a product and want experienced engineers to set up the foundation correctly from the start, Clixo builds React Native products and can accelerate your first version significantly.