0Pricing
React Native Academy · Lesson

Creating Your First Expo Project

Use `npx create-expo-app` to scaffold a new project, explore the generated files, and understand the entry point of a React Native application.

Creating Your First Expo Project is a free React Native Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Native Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The create-expo-app Command

The easiest start is npx create-expo-app MyApp. It grabs the latest template, sets up folders, and installs everything. Add a template flag to start blank or with navigation.

# Create a new Expo project
npx create-expo-app MyFirstApp

# Create with a blank TypeScript template
npx create-expo-app MyFirstApp --template blank-typescript

# Create with tabs navigation template
npx create-expo-app MyFirstApp --template tabs

# Move into the project
cd MyFirstApp

Generated Folder Structure Overview

Get to know your new folders. App.js is the entry point React renders first, app.json holds your config, and assets/ stores images and fonts. The code maps it all out.

MyFirstApp/
├── App.js          # Root component (entry point)
├── app.json        # Expo configuration
├── package.json    # NPM dependencies & scripts
├── babel.config.js # Babel transpiler config
├── assets/         # Images, fonts, icons
│   ├── icon.png
│   ├── splash.png
│   └── adaptive-icon.png
└── node_modules/   # Installed packages

The app.json Configuration File

app.json is your project's config hub — app name, version, icons, splash screen, and per-platform settings for iOS and Android. Changing it needs a rebuild, not a hot reload.

{
  'expo': {
    'name': 'My First App',
    'slug': 'my-first-app',
    'version': '1.0.0',
    'orientation': 'portrait',
    'icon': './assets/icon.png',
    'splash': {
      'image': './assets/splash.png',
      'resizeMode': 'contain',
      'backgroundColor': '#ffffff'
    },
    'ios': {
      'bundleIdentifier': 'com.yourname.myfirstapp'
    },
    'android': {
      'package': 'com.yourname.myfirstapp'
    }
  }
}

The package.json and Scripts

package.json lists your dependencies and scripts. The defaults — start, ios, android, web — launch your app in different places. You can add your own scripts too.

// package.json (excerpt)
{
  'name': 'my-first-app',
  'version': '1.0.0',
  'main': 'node_modules/expo/AppEntry.js',
  'scripts': {
    'start': 'expo start',
    'android': 'expo start --android',
    'ios': 'expo start --ios',
    'web': 'expo start --web'
  },
  'dependencies': {
    'expo': '~50.0.0',
    'react': '18.2.0',
    'react-native': '0.73.x'
  }
}

Understanding App.js — The Root Component

App.js exports the root component React Native renders first — every other component lives inside it. It's the first file you'll edit, like index.html in a web project.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

JSX: Describing UI in JavaScript

JSX lets you write HTML-like markup inside JavaScript to describe your UI. It's not HTML though — use style instead of class, onPress instead of onclick. The code shows it.

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

const name = 'World';
const count = 42;

export default function App() {
  return (
    <View>
      {/* This is a JSX comment */}
      <Text>Hello, {name}!</Text>
      <Text>You have {count} messages.</Text>
      {count > 0 && <Text>You have unread items.</Text>}
    </View>
  );
}

Babel and Transpilation

Expo uses Babel to translate modern JavaScript and JSX into code each platform can run. You rarely touch its config — mainly to add handy path aliases like @/components.

// babel.config.js (default Expo config)
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Example: add module resolver for clean imports
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@components': './components',
            '@screens': './screens',
          },
        },
      ],
    ],
  };
};

Installing Additional Dependencies

To add packages, prefer npx expo install over npm install — it picks the version that matches your Expo SDK, avoiding subtle mismatch bugs. Plain npm is fine for pure-JS packages.

# Use expo install for SDK-compatible packages
npx expo install expo-camera expo-location
npx expo install react-native-maps

# Use npm install for pure JS packages
npm install lodash date-fns

# Check for outdated Expo SDK packages
npx expo install --check

# Fix version mismatches
npx expo install --fix

Making Your First Code Change

Open App.js, change the text, and save — Fast Refresh updates your app in under a second while keeping its state. Try tweaking a color to see instant feedback. ✨

// Modified App.js
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>I made my first change.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f4ff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 24, fontWeight: 'bold', color: '#333' },
  subtitle: { fontSize: 16, color: '#666', marginTop: 8 },
});

The Expo SDK and Managed Workflow

The Expo SDK gives you ready-made modules for camera, location, sensors, and more. In the managed workflow Expo handles native code for you — simpler, but limited to SDK APIs.

// Example: using Expo SDK modules
import * as Battery from 'expo-battery';
import * as Haptics from 'expo-haptics';

async function checkBattery() {
  const level = await Battery.getBatteryLevelAsync();
  console.log('Battery level:', level); // 0.0 - 1.0
}

async function vibrate() {
  await Haptics.notificationAsync(
    Haptics.NotificationFeedbackType.Success
  );
}

TypeScript Support in Expo

Expo has first-class TypeScript support. Start with the blank-typescript template, or rename App.js to App.tsx. TypeScript catches type errors early and sharpens autocomplete.

// App.tsx with TypeScript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

interface Props {
  greeting?: string;
}

export default function App({ greeting = 'Hello' }: Props) {
  const message: string = greeting + ', TypeScript!';
  return (
    <View style={styles.container}>
      <Text>{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

You scaffolded your first app: create-expo-app builds a full project instantly, app.json controls its settings, and Fast Refresh shows edits live. Next: running on devices! 🚀

Frequently asked questions

Is the “Creating Your First Expo Project” lesson free?

Yes — the full text of “Creating Your First Expo Project” is free to read here on the web, and the React Native Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Native Academy course, upgrade to CoddyKit PRO.

What will I learn in “Creating Your First Expo Project”?

Use `npx create-expo-app` to scaffold a new project, explore the generated files, and understand the entry point of a React Native application. You practise React Native Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Native Academy?

No prior experience is required. React Native Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Creating Your First Expo Project” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Native Academy lesson?

Yes. Every React Native Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Installing Node, Expo CLI, and Simulators
  2. Creating Your First Expo Project
  3. Running on Device and Emulator
  4. Understanding the Project Structure
← Back to React Native Academy