React Native and Expo: Getting Started

React Native lets you build real native iOS and Android apps with React and JavaScript/TypeScript. Your components render native UI elements, not a web page inside an app. Expo is the recommended way to start: it handles builds, device APIs and updates. This track assumes the React + Next.js track.

Create and run an app

npx create-expo-app@latest my-app
cd my-app
npx expo start

Install Expo Go on your phone and scan the QR code: the app runs on your device and reloads instantly when you save. Android emulators (Android Studio) and the iOS simulator (Xcode, macOS only) also work.

Core components

import { View, Text, Pressable, StyleSheet } from "react-native";
import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState(0);
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Tapped {count} times</Text>
      <Pressable style={styles.button} onPress={() => setCount(c => c + 1)}>
        <Text style={styles.buttonText}>Tap me</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
  title: { fontSize: 24, fontWeight: "700", marginBottom: 16 },
  button: { backgroundColor: "#7c3aed", paddingVertical: 12, paddingHorizontal: 20, borderRadius: 999 },
  buttonText: { color: "#fff", fontWeight: "600" },
});

Styling and layout

Styles are JavaScript objects with camelCase properties. Layout uses flexbox, defaulting to flexDirection: "column". Sizes are density-independent numbers (no px). There is no CSS cascade: style each component.

Exercise

Create an Expo app with a screen showing your name, a profile image and a button that toggles between light and dark backgrounds. Run it on your phone with Expo Go.

Check yourself

• Why must all text be inside <Text>?
• What is the default flex direction in React Native?
• What does Expo Go let you do?