Mobiles Video und Drag-and-Drop in React Native: UX-Leitfaden
Es gibt einen Unterschied zwischen einer App, die funktioniert und einer App, die gerne genutzt wird. Dieser Unterschied liegt in den Details: der Flüssigkeit einer Animation, der Reaktivität einer Geste, der Ladezeit eines Bildschirms. Im Oktober 2025 habe ich zwei Wochen lang an drei Funktionen gearbeitet, die nichts gemeinsam hatten, außer einem Ziel: TAMSIV modern und angenehm zu bedienen zu machen.
Videoaufnahme im TikTok-Stil. Drag-and-Drop zum Neuanordnen der Tabs. Endloses Karussell im Feed. Drei unterschiedliche Baustellen, eine einzige Obsession: das Gefühl der Flüssigkeit.
Wichtige Punkte zum Merken:
- Videokompression ist auf Mobilgeräten unerlässlich – Rohdateien wiegen Dutzende von MB
- Das Drag-and-Drop von Tabs erfordert zwingend react-native-gesture-handler, nicht die nativen Komponenten
- Ein gut gemachtes unendliches Karussell erfordert das Vorladen benachbarter Elemente
- Das Speichern der Tab-Reihenfolge in der Datenbank ermöglicht die geräteübergreifende Persistenz
- Mikro-Interaktionen sind das, was eine "korrekte" App von einer "bemerkenswerten" App unterscheidet
Warum eine Videoaufnahmefunktion in eine Produktivitäts-App integrieren?
Die Frage mag auf den ersten Blick seltsam erscheinen. Eine Aufgabenverwaltungs-App braucht doch keine Videos, oder? In Wirklichkeit doch. Wenn du mit TAMSIV eine Sprachnotiz erstellst, möchtest du manchmal eine visuelle Anlage hinzufügen – ein Foto eines Dokuments, ein Video eines Prototyps, eine Bildschirmaufnahme.
Ich hatte bereits die Anhänge (Fotos und Dokumente) implementiert. Aber Videos fehlten. Und als ich begann, die Benutzeroberfläche zu prototypisieren, stellte ich fest, dass eine klassische Videoaufnahme – die rohe Android-Kamerakomponente – schrecklich war. Kein Stil, keine Flüssigkeit, eine Erfahrung, die einer App von 2015 würdig war.
Die Inspiration kam von dort, wo du sie erwartest: TikTok. Nicht wegen der Kurzvideos, sondern wegen der Aufnahmeoberfläche. Zentraler Button, Vollbildvorschau, minimale Bedienelemente. Das ist der UX-Standard geworden, den Benutzer im Jahr 2026 erwarten.
Wie gehe ich mit Videokompression auf Mobilgeräten um?
Das ist die größte technische Herausforderung bei der Videoaufnahme. Rohvideos eines modernen Smartphones wiegen Dutzende von Megabyte für wenige Sekunden. Ein iPhone 15 nimmt in HEVC 4K mit 60fps auf – das können bis zu 400 MB pro Minute sein. Selbst in 1080p wiegt ein 30-Sekunden-Video leicht 50 MB.
Für eine Produktivitäts-App ist das inakzeptabel. Anhänge werden in Supabase Storage gespeichert, und jedes MB an Egress kostet Geld. Ich habe die Egress-Probleme übrigens im Artikel über die Reduzierung der Supabase-Kosten detailliert beschrieben.
Die Lösung: Die Aufnahme so konfigurieren, dass Auflösung und Bitrate von Anfang an begrenzt werden. Anstatt in 4K aufzunehmen und dann zu komprimieren (was CPU und Akku verbraucht), konfiguriere ich die Kamerakomponente so, dass sie direkt in einem leichten Format aufnimmt:
- Auflösung: maximal 720p (ausreichend für Anhänge)
- Bitrate: auf 2 Mbps begrenzt
- Format: H.264 für universelle Kompatibilität
- Maximale Dauer: 60 Sekunden (freiwillige Begrenzung, um riesige Dateien zu vermeiden)
Mit diesen Parametern wiegt ein 30-Sekunden-Video etwa 3 bis 5 MB statt 50 MB. Ein Faktor-10-Gewinn, der Speicherung und Übertragung praktikabel macht.
Was ist die Falle des Vollbildmodus auf Android?
Die Vollbildvorschau der Kamera scheint trivial. Ist sie aber nicht. Auf Android entspricht das Bildschirmverhältnis (normalerweise 19.5:9 oder 20:9) nicht dem Kameraverhältnis (16:9 oder 4:3). Das Ergebnis: Entweder du zeigst schwarze Balken, oder du beschneidest das Bild, oder du streckst es.
Ich habe mich für den Beschnitt mit einem leichten Zoom entschieden – so wie es TikTok macht. Das Bild füllt den gesamten Bildschirm aus, aber die Ränder sind leicht abgeschnitten. Der Benutzer bemerkt es nicht. Das Gefühl der Immersion bleibt erhalten.
Die zweite Falle: die Verwaltung der Ausrichtung. TAMSIV erzwingt den Hochformatmodus für die Videoaufnahme (im Einklang mit der mobilen Nutzung), aber es ist notwendig, Geräteausrichtungsänderungen abzufangen, um zu verhindern, dass das Video auf dem Kopf stehend aufgenommen wird. Ein klassischer Fehler, den ich einen halben Tag lang verfolgt habe.
Wie implementiere ich Drag-and-Drop für Tabs?
TAMSIV hat 6 Haupt-Tabs: Diktiergerät, Feed, Kalender, Gruppen, Social, Profil. Die Standardreihenfolge passt für die meisten Benutzer, aber einige bevorzugen eine andere Anordnung. Ich habe die Neuordnung per Drag-and-Drop implementiert: langes Drücken auf einen Tab, ziehen, loslassen.
Die Implementierung verwendet react-native-gesture-handler (obligatorisch in React Native für komplexe Gesten) kombiniert mit react-native-reanimated für flüssige Animationen.
Die größte Falle: gesture-handler obligatorisch
Das ist eine Falle, in der ich Stunden verloren habe. In einem GestureDetector musst du zwingend die Komponenten von react-native-gesture-handler verwenden – TouchableOpacity, FlatList, ScrollView – und niemals die von react-native. Die nativen Komponenten empfangen einfach keine Touch-Ereignisse in einem Gesture-Handler-Kontext.
Der Fehler ist heimtückisch: Alles kompiliert, es gibt keine Warnungen, aber Drag-and-Drop funktioniert nicht. Du verbringst Stunden damit, ein Logikproblem zu suchen, obwohl es nur ein falscher Import ist. Das ist zu einer Kardinalregel des Projekts geworden: In jeder Komponente, die Gesten verwendet, die Importe überprüfen.
Geräteübergreifende Persistenz
Die Reihenfolge der Tabs wird in der Datenbank in userProfile.mainTabsOrder gespeichert. Das ist nicht nur lokales AsyncStorage – wenn sich der Benutzer auf einem anderen Gerät anmeldet oder die App neu installiert, findet er seine Konfiguration wieder. Dieses Detail mag geringfügig erscheinen, trägt aber zum Gefühl einer "intelligenten" App bei, die dich kennt.
Das Format ist einfach: ein JSON-Array von Tab-IDs. ["dictaphone", "agenda", "feed", "groups", "social", "profile"]. Beim Laden liest die App dieses Array und ordnet die Navigation entsprechend neu an. Wenn ein Tab fehlt (z. B. nach einer Funktionserweiterung), wird er am Ende hinzugefügt.
Wie funktioniert das unendliche Karussell im Feed?
Der TAMSIV-Feed zeigt einen Strom von Elementen an: Aufgaben, Memos, Ereignisse, Gamification-Aktivitäten. Wenn du auf ein Element klickst, möchtest du zum vorherigen oder nächsten navigieren können, ohne zur Liste zurückzukehren. Das ist das Muster des unendlichen Karussells.
Die Implementierung basiert auf einer horizontalen FlatList-Komponente (natürlich von react-native-gesture-handler) mit einem System zum Vorladen benachbarter Elemente. Wenn du Element N anzeigst, sind die Elemente N-1 und N+1 bereits im Speicher geladen und außerhalb des Bildschirms gerendert.
Das Ergebnis: kein Spinner, kein sichtbares Laden. Die Illusion von immer bereitem Inhalt. Das Wischen ist sofort. Es sind diese unsichtbaren Details, die den Unterschied zwischen einer App, die man aus Pflicht nutzt, und einer App, die man gerne nutzt, ausmachen.
Die Herausforderung des Speichers
Das Vorladen hat seinen Preis: den Speicher. Wenn jedes Element im Feed Bilder oder Videos enthält, kann das gleichzeitige Laden von 3 Elementen (aktuell + 2 benachbarte) viel RAM verbrauchen. Ich habe ein Recycling-System implementiert: entfernte Elemente (N-3, N+3 und darüber hinaus) werden aus dem Speicher freigegeben. Nur das gleitende Fenster von 5 Elementen wird beibehalten.
Dieses Muster ist übrigens direkt mit dem Cache-System verbunden, das ich später entwickelt habe. Die Supabase Signed URLs, die nach 60 Minuten ablaufen, machen das Vorladen noch kritischer: Die URLs müssen frisch sein, wenn der Benutzer wischt.
Warum sind Mikro-Interaktionen so wichtig?
Diese drei Funktionen – Videoaufnahme, Drag-and-Drop, Karussell – sind einzeln unsichtbar. Niemand lädt eine App wegen ihres Tab-Drag-and-Drops herunter. Aber zusammen erzeugen sie ein Gefühl der Flüssigkeit, das den entscheidenden Unterschied macht.
UX-Studien der Nielsen Norman Group zeigen, dass die wahrgenommene Qualität einer App stärker von Mikro-Interaktionen als von den Hauptfunktionen beeinflusst wird. Eine Reaktionszeit von 100 ms wird als sofort wahrgenommen. Über 300 ms beginnt der Benutzer eine Verzögerung zu spüren.
Das ist genau die Philosophie, die ich für den animierten KI-Button verfolgt habe: Jede Interaktion soll sich "lebendig" anfühlen. Die Animation des Videoaufnahme-Buttons, das haptische Feedback beim Drag-and-Drop, das magnetische Einrasten des Karussells – all das trägt zu diesem Gefühl bei.
Ich habe die Auswirkungen dieser Änderungen mit Firebase Analytics gemessen. Die durchschnittliche Verweildauer in der App stieg nach der Bereitstellung dieser Funktionen. Nicht, weil sie neue Funktionen hinzufügen, sondern weil sie die Nutzung angenehmer machen. Benutzer bleiben länger, wenn die App flüssig ist.
Welche Tools sollte man für flüssige Animationen in React Native verwenden?
Um 60fps-Animationen auf Mobilgeräten zu erzielen, kannst du die grundlegende Animated API von React Native nicht verwenden. Alles muss über den nativen UI-Thread laufen, nicht über den JavaScript-Thread. Hier ist der Stack, den ich verwende:
- react-native-reanimated: Animationen laufen auf dem nativen Thread, kein Ruckeln
- react-native-gesture-handler: Gestenverwaltung direkt auf dem nativen Thread
- LayoutAnimation: für einfache Layout-Übergänge (Hinzufügen/Entfernen von Elementen)
Die Kombination aus reanimated + gesture-handler ist im Jahr 2026 zum De-facto-Standard für React Native-Animationen geworden. Wenn du sie noch nicht verwendest, migriere. Der Unterschied in der Flüssigkeit ist sofort und massiv.
Ich habe die Verwendung dieses Stacks im Artikel über die kontextuelle Suche mit Swipe detailliert beschrieben, wo die Swipe-Back-Geste zum Schließen von Detailbildschirmen genau dasselbe Muster verwendet.
Was mir diese Details über die mobile Entwicklung gelehrt haben
Diese zwei Wochen Arbeit an den "Details" gehörten zu den befriedigendsten des Projekts. Nicht, weil die Funktionen beeindruckend sind – das sind sie nicht –, sondern weil sie einen unverhältnismäßig großen Einfluss auf die Benutzererfahrung haben.
Das ist eine Lektion, die ich auf die harte Tour gelernt habe: Als Solo-Entwickler ist die Versuchung groß, immer der nächsten großen Funktion hinterherzujagen. Aber Benutzer sehen keine Funktionen. Sie fühlen die Erfahrung. Und die Erfahrung ist die Summe Hunderter von Mikro-Entscheidungen: die Verzögerung einer Animation, die Größe eines Touch-Bereichs, das Feedback einer Geste.
Das deckt sich mit dem, was ich im Artikel über das Onboarding erkläre: Der erste Eindruck ist entscheidend, und er spielt sich in diesen Details ab. Ein flüssiges Onboarding mit sorgfältigen Animationen schafft Vertrauen. Ein ruckeliges Onboarding mit abrupten Übergängen weckt den Wunsch, die App zu deinstallieren.
FAQ
Warum die Videodauer auf 60 Sekunden begrenzen?
Um die Dateien leicht und die Speicherung praktikabel zu halten. Bei 2 Mbps in 720p entsprechen 60 Sekunden etwa 8 MB. Darüber hinaus werden Upload-Zeiten und Speicherkosten für eine Produktivitäts-App, die nicht auf Videos ausgerichtet ist, problematisch.
Funktioniert Drag-and-Drop von Tabs auf iOS?
Ja. Die Implementierung verwendet react-native-gesture-handler und react-native-reanimated, die plattformübergreifend sind. Derselbe Code funktioniert auf Android und iOS ohne Änderungen. Nur die Anpassungen des haptischen Feedbacks sind plattformspezifisch.
Verbraucht das unendliche Karussell nicht zu viel Speicher?
Nein, dank des Recyclingsystems. Nur 5 Elemente werden im Speicher gehalten (das aktuelle Element + 2 auf jeder Seite). Weiter entfernte Elemente werden freigegeben. Auf Geräten mit wenig RAM kann das Fenster auf 3 Elemente reduziert werden.
Kann man die Tab-Anpassung deaktivieren?
Die Standardreihenfolge kann jederzeit über die App-Einstellungen wiederhergestellt werden. Eine Schaltfläche "Zurücksetzen" stellt die ursprüngliche Reihenfolge wieder her. Die benutzerdefinierte Reihenfolge wird auch gelöscht, wenn sich der Benutzer abmeldet.
Warum Lottie nicht für Animationen verwenden?
Lottie ist hervorragend für illustrative Animationen (animierte Icons, Splash Screens), aber nicht für interaktive, gestengesteuerte Animationen geeignet. react-native-reanimated ermöglicht es, die Geste direkt mit der Animation zu verknüpfen, Frame für Frame, was Lottie nicht kann.