React Native Expo: Welche Packages brauchst du wirklich?

Du startest dein erstes React Native Projekt und fragst dich: Welche Packages brauche ich wirklich? Die Antwort ist: weniger als du denkst – aber die richtigen.

Dieser Guide basiert auf zwei Production Apps im App Store: TheWave (Focus Timer) und Censorify (Bild-Editor). Beide nutzen Expo und wurden mehrfach von Apple featured.

Das Basis-Setup

Jedes Expo-Projekt startet mit diesen Core-Packages:

npx create-expo-app@latest MeineApp
cd MeineApp

Das gibt dir automatisch:

• expo - Das Herzstück
• react und react-native - Die Grundlagen
• expo-status-bar - Statusleiste steuern

Navigation: expo-router vs. react-navigation

Es gibt zwei Optionen:

Option 1: expo-router (empfohlen für neue Projekte)

npx expo install expo-router

• File-based routing wie Next.js
• Weniger Boilerplate
• Deep Linking automatisch

Option 2: react-navigation (klassisch)

npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs
npx expo install react-native-screens react-native-safe-area-context

• Mehr Kontrolle
• Größere Community
• Bessere Dokumentation

Unsere Wahl: TheWave nutzt expo-router, Censorify nutzt react-navigation. Beide funktionieren hervorragend.

Essenzielle Expo-Packages

Diese Packages brauchst du in fast jeder App:

Storage & Daten

npx expo install @react-native-async-storage/async-storage

Speichert Einstellungen, User-Daten, Onboarding-Status. Funktioniert wie localStorage im Web.

Haptics & Feedback

npx expo install expo-haptics

Vibrationen für Buttons und Aktionen. Macht die App lebendiger.

Linking & Browser

npx expo install expo-linking expo-web-browser

• expo-linking: Deep Links, URLs öffnen
• expo-web-browser: In-App Browser für Links

Bilder & Media

npx expo install expo-image-picker expo-media-library

• expo-image-picker: Fotos aus Galerie oder Kamera
• expo-media-library: Bilder speichern

Share & Clipboard

npx expo install expo-sharing expo-clipboard

Teile Inhalte und kopiere Text in die Zwischenablage.

UI-Packages

Gradient & Blur

npx expo install expo-linear-gradient expo-blur expo-glass-effect

Für moderne iOS-Style Designs mit Glassmorphism.

Animationen

npx expo install react-native-reanimated react-native-gesture-handler

Ohne diese zwei geht nichts Animiertes. Pflicht für jede App.

SVG & Icons

npx expo install react-native-svg @expo/vector-icons

• react-native-svg: SVG-Grafiken rendern
• @expo/vector-icons: 3000+ Icons gratis

Monetarisierung

In-App Purchases

npm install react-native-purchases

RevenueCat SDK für Subscriptions und One-Time Purchases. Funktioniert mit Apple und Google.

Ads (optional)

npm install react-native-google-mobile-ads

AdMob-Integration für Banner und Interstitial Ads.

Store Review

npx expo install expo-store-review

Promte User zur App-Bewertung. Apple hat strenge Guidelines – max. 3x pro Jahr.

Fortgeschrittene Packages

Diese brauchst du nur für spezielle Features:

Firebase (Auth, Database)

npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore

Für User-Authentifizierung und Cloud-Datenbank.

ML Kit (Texterkennung)

npm install @infinitered/react-native-mlkit-text-recognition

On-Device OCR. Censorify nutzt das für automatische Texterkennung.

Skia (Canvas-Grafik)

npx expo install @shopify/react-native-skia

High-Performance 2D-Grafiken. Perfekt für Bild-Editoren wie Censorify.

Video

npx expo install expo-video
# oder
npm install react-native-video

Video-Playback. TheWave nutzt das für Hintergrund-Videos.

3D mit Three.js

npm install three @react-three/fiber @react-three/drei expo-gl

3D-Grafiken in React Native. Für Spiele oder 3D-Visualisierungen.

i18n (Mehrsprachigkeit)

npm install i18next react-i18next

Internationalisierung für Deutsch, Englisch, etc.

State Management

npm install zustand

Einfacher als Redux, mächtiger als Context. Unsere Empfehlung.

Die Minimal-Liste

Für eine einfache App brauchst du nur:

{
  "dependencies": {
    "expo": "~54.0.0",
    "expo-router": "~6.0.0",
    "expo-status-bar": "~3.0.0",
    "expo-haptics": "~15.0.0",
    "expo-linking": "~8.0.0",
    "@react-native-async-storage/async-storage": "2.2.0",
    "react-native-reanimated": "~4.1.0",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0"
  }
}

Das sind 10 Dependencies für eine voll funktionsfähige App mit Navigation, Animationen und Datenpersistenz.

Tipps zur Package-Auswahl

1. Expo-First: Wenn ein Package als expo-* existiert, nutze es. Weniger Konfiguration.
2. npx expo install: Nutze immer diesen Befehl statt npm install für Expo-Packages. Er wählt die richtige Version.
3. Weniger ist mehr: Jedes Package erhöht die App-Größe. Frag dich: Brauche ich das wirklich?
4. Development vs. Production: Dev-Dependencies wie Jest, ESLint, TypeScript landen nicht in der finalen App.

Fazit

Starte minimal und füge Packages hinzu, wenn du sie brauchst. Die meisten Apps brauchen:

• Navigation (expo-router oder react-navigation)
• Storage (async-storage)
• Animationen (reanimated + gesture-handler)
• UI-Basics (safe-area, screens, status-bar)

Alles andere kommt, wenn’s gebraucht wird.

---

Dieser Guide basiert auf unseren Erfahrungen mit TheWave und Censorify – zwei Apps die mit diesem Stack im App Store erfolgreich sind.