managarten/manadeck/apps/mobile/Docs/NATIVE_TAB_BEHAVIOR.md

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

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:

<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

# 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