# Native Tab Behavior - Manadeck App

## Übersicht

Die Manadeck-App nutzt die **Native Tabs** von Expo Router (SDK 54+), um eine native iOS/Android Tab-Navigation zu implementieren. Diese Dokumentation beschreibt die Konfiguration und das Verhalten der Tabs in unserer App.

## Aktuelle Implementierung

### Standort

`app/(tabs)/_layout.tsx`

### Konfiguration

```tsx
import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs';

export default function TabLayout() {
	return (
		<NativeTabs minimizeBehavior="automatic">
			<NativeTabs.Trigger name="decks">
				<Label>Decks</Label>
				<Icon
					sf={{ default: 'square.stack.3d.up', selected: 'square.stack.3d.up.fill' }}
					drawable="ic_albums"
				/>
			</NativeTabs.Trigger>

			<NativeTabs.Trigger name="explore">
				<Label>Entdecken</Label>
				<Icon sf={{ default: 'safari', selected: 'safari.fill' }} drawable="ic_explore" />
			</NativeTabs.Trigger>

			<NativeTabs.Trigger name="progress">
				<Label>Fortschritt</Label>
				<Icon
					sf={{ default: 'chart.line.uptrend.xyaxis', selected: 'chart.line.uptrend.xyaxis' }}
					drawable="ic_trending_up"
				/>
			</NativeTabs.Trigger>

			<NativeTabs.Trigger name="profile">
				<Label>Profil</Label>
				<Icon sf={{ default: 'person', selected: 'person.fill' }} drawable="ic_person" />
			</NativeTabs.Trigger>
		</NativeTabs>
	);
}
```

## Minimize Behavior

### Was ist `minimizeBehavior`?

Die `minimizeBehavior` Property steuert, wie sich die Tab-Leiste beim Scrollen verhält. Diese Funktion ist ab iOS 26 verfügbar und erfordert Xcode 26 oder höher zum Kompilieren.

### Verfügbare Optionen

| Option           | Beschreibung                                                                                                                      |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `'automatic'`    | **[AKTUELL IN APP]** iOS entscheidet automatisch, wann die Tab-Leiste minimiert wird. Dies passt sich dem nativen iOS-Kontext an. |
| `'never'`        | Tab-Leiste bleibt immer sichtbar und wird nie minimiert.                                                                          |
| `'onScrollDown'` | Tab-Leiste wird beim Runterscrollen minimiert und beim Hochscrollen wieder angezeigt.                                             |
| `'onScrollUp'`   | Tab-Leiste wird beim Hochscrollen minimiert (seltener verwendet).                                                                 |

### Unsere Wahl: `automatic`

Wir verwenden `minimizeBehavior="automatic"`, weil:

- iOS das Verhalten optimal an den Kontext anpasst
- Es sich nativ anfühlt und konsistent mit anderen iOS-Apps ist
- Keine manuelle Konfiguration für verschiedene Scroll-Szenarien nötig ist

## Systemanforderungen

### iOS

- **Minimum:** iOS 26 (für `minimizeBehavior`)
- **Xcode:** Version 26 oder höher
- **Expo SDK:** 54 oder höher
- **Status:** ✅ Produktionsreif (experimentelle API)

### Android

- **Status:** 🚧 In Entwicklung
- Native Tab Minimize Behavior ist noch nicht verfügbar
- Geplante Unterstützung in zukünftigen Expo-Versionen

## Bekannte Einschränkungen

### FlatList-Integration

⚠️ **Wichtig:** FlatList-Komponenten haben Limitierungen mit Native Tabs:

- `scroll-to-top` funktioniert möglicherweise nicht wie erwartet
- `minimize-on-scroll` kann bei FlatList fehlschlagen
- Edge-Detection kann fehlschlagen (Tab-Leiste wird transparent)

**Lösung:** Wenn Probleme auftreten, verwende den `disableTransparentOnScrollEdge` Prop:

```tsx
<NativeTabs minimizeBehavior="automatic" disableTransparentOnScrollEdge>
	{/* Tabs */}
</NativeTabs>
```

### Weitere Limitierungen

1. **Maximum 5 Tabs auf Android** - Material Design Komponenten-Beschränkung
2. **Tab-Leisten-Höhe nicht messbar** - Position variiert je nach Gerät (iPad, Vision Pro, etc.)
3. **Keine verschachtelten Native Tabs** - JavaScript Tabs können aber innerhalb von Native Tabs verschachtelt werden

## Best Practices für Manadeck

### Icons

- **iOS:** SF Symbols verwenden (höhere Qualität, native Optik)
- **Android:** Drawables verwenden
- Immer `default` und `selected` States definieren für besseres UX

### Scroll-Verhalten

- Verwende ScrollView oder ähnliche Komponenten in Tab-Screens
- Bei FlatList-Problemen: `disableTransparentOnScrollEdge` aktivieren
- Teste das Verhalten auf echten Geräten (Simulator kann abweichen)

### Entwicklung

```bash
# Development Server starten
npm start

# iOS Simulator (erfordert Xcode 26+)
npm run ios

# Android Emulator
npm run android
```

## Weiterführende Ressourcen

- **Vollständige Expo Docs:** `docs/EXPO_NATIVE_TABS.md`
- **Expo Router Native Tabs:** https://docs.expo.dev/router/advanced/native-tabs/
- **API Referenz:** https://docs.expo.dev/versions/latest/sdk/router-native-tabs/

## Änderungshistorie

| Datum      | Änderung                                   | Version |
| ---------- | ------------------------------------------ | ------- |
| 2025-10-20 | `minimizeBehavior="automatic"` hinzugefügt | SDK 54  |
| 2025-09    | Initiale Native Tabs Implementierung       | SDK 54  |

---

**Status:** ✅ Experimentell (API kann sich ändern)
**Plattform:** iOS (primär), Android (geplant)
**Maintainer:** Manadeck Team
