Before we go through individual building blocks, here's the compact reference version for creating a new React Native project – every other topic in this series starts with the same basic steps.

1. Description

Expo is the fastest way to a working React Native project: one command sets up a complete skeleton, including a development server and a live preview via the Expo Go app on a real phone – no Xcode or Android Studio required.

2. Short example

npx create-expo-app my-first-app
cd my-first-app
npx expo start

3. Complete project

Create a new project called hello-react-native and customize the start screen:

npx create-expo-app hello-react-native
cd hello-react-native

import { StatusBar } from 'expo-status-bar';
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}>My first own app</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 24, fontWeight: 'bold', color: '#111827' },
  subtitle: { fontSize: 14, color: '#6b7280', marginTop: 8 },
});

npx expo start

4. Explanation

• npx create-expo-app hello-react-native – downloads the Expo skeleton and creates the project folder.
• expo-status-bar – controls the appearance of the status bar (clock, battery, ...) at the top of the device; style="auto" adapts it automatically to light/dark mode.
• StyleSheet.create({{...}}) – defines styles as a JavaScript object, see the "Styling Elements" topic for details.
• npx expo start – starts the development server ("Metro Bundler") and displays a QR code.

5. Outputs