mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-24 00:36:42 +02:00
e7f5f942f3
Projects included: - maerchenzauber (NestJS backend + Expo mobile + SvelteKit web + Astro landing) - manacore (Expo mobile + SvelteKit web + Astro landing) - manadeck (NestJS backend + Expo mobile + SvelteKit web) - memoro (Expo mobile + SvelteKit web + Astro landing) This commit preserves the current state before monorepo restructuring. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
150 lines
4.8 KiB
Markdown
150 lines
4.8 KiB
Markdown
# 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
|