fristy/TESTING_GUIDE.md

React Native Test Guide

📱 Erste Schritte zum App-Testen

Option 1: Expo (Schnellste Methode - EMPFOHLEN für erste Tests)

Expo ist einfacher und schneller für erste Tests ohne native Builds.

# 1. Expo installieren
npm install --global expo-cli

# 2. Expo projekt initialisieren (in separatem Ordner)
npx create-expo-app fristy-test
cd fristy-test

# 3. Unsere Source-Files kopieren
# (Nur src/ Ordner kopieren)

# 4. Expo starten
npx expo start

# 5. Expo Go App auf Handy installieren
# iOS: App Store
# Android: Play Store

# 6. QR-Code scannen und App testen

Option 2: React Native CLI (Für Production)

Für vollständige iOS/Android Builds.

Voraussetzungen:

macOS (für iOS):

# Xcode installieren (App Store)
# Command Line Tools
xcode-select --install

# Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node, Watchman, CocoaPods
brew install node
brew install watchman
sudo gem install cocoapods

Android:

# Android Studio herunterladen
# https://developer.android.com/studio

# Android SDK installieren
# Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK
# - Android 13 (Tiramisu) SDK installieren
# - Android SDK Build-Tools
# - Android SDK Platform-Tools

# Umgebungsvariablen setzen
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

React Native Projekt initialisieren:

# React Native CLI global installieren
npm install -g react-native-cli

# Neues Projekt mit TypeScript
npx react-native@latest init FristyApp --template react-native-template-typescript

# In Projekt-Ordner
cd FristyApp

# Unsere Source-Files kopieren
# src/ Ordner von unserem Projekt kopieren

Option 3: Expo mit unserem bestehenden Code (BESTE OPTION)

Wir konvertieren unser Projekt zu Expo für schnelles Testen:

# 1. Expo Dependencies hinzufügen
npm install expo expo-status-bar

# 2. Metro Config für Expo
# (Wird automatisch erstellt)

# 3. App starten
npx expo start

# 4. Im Terminal:
# - i für iOS Simulator
# - a für Android Emulator
# - w für Web Browser
# - QR-Code für Expo Go App

🚀 Schnellstart: Expo-Setup (EMPFOHLEN)

Ich empfehle Expo für die ersten Tests, da es:

• ✅ Keine native Builds benötigt
• ✅ Sofort auf echtem Gerät testbar
• ✅ Hot Reload funktioniert perfekt
• ✅ Später zu React Native CLI migrierbar

Schritt-für-Schritt:

1. Expo Dependencies installieren:

cd /Users/justinursan/Documents/Projekt/fristy/app-v0.0.1
npm install expo expo-status-bar --legacy-peer-deps

2. Metro Bundler starten:

npx expo start

3. Expo Go App installieren:

   • iOS: https://apps.apple.com/app/expo-go/id982107779
   • Android: https://play.google.com/store/apps/details?id=host.exp.exponent

4. QR-Code scannen und testen!

🔧 Aktuelle Einschränkungen

Unser aktuelles Setup hat noch keine nativen Projektdateien (ios/, android/).

Du hast 2 Optionen:

Option A: Expo-basiert (schnell & einfach)

• Installiere Expo Dependencies
• Teste sofort mit Expo Go
• Später React Native CLI hinzufügen

Option B: Vollständiges React Native Setup

• Native Projekte generieren
• Xcode/Android Studio konfigurieren
• Volle Kontrolle über native Code

📝 Empfohlene Reihenfolge

1. Jetzt: Expo für schnelles Prototyping

   npm install expo expo-status-bar --legacy-peer-deps
   npx expo start
   

2. Später: Migration zu React Native CLI

   npx create-react-native-app --template
   # Native Ordner generieren
   

3. Production: Vollständige Builds

   • iOS: Xcode
   • Android: Android Studio

🎯 Was ich jetzt machen soll?

Sag mir einfach:

A) "Expo Setup" - Ich richte Expo ein für schnelles Testen B) "React Native CLI" - Ich erstelle vollständiges RN-Projekt C) "Erst mal nur Code sehen" - Ich zeige dir die Struktur

Welche Option möchtest du? 😊