Kurzueberblick

React Native Animationen laufen zwischen JS Thread und UI Thread. Alles, was im JS Thread blockiert (z.B. schwere Berechnungen), kann Animationen oder Gesten stottern lassen, weil Frames alle ~16ms (60fps) geliefert werden muessen.

Optionen

Animated API (built-in)

• Gut fuer einfache Animationen
• useNativeDriver: true verschiebt Animationen auf die native Seite (weniger Jank)
• Nicht alles ist "native driver" faehig (z.B. Layout Properties)

LayoutAnimation

• Sehr einfache API fuer Layout Aenderungen
• iOS out-of-the-box, Android braucht UIManager.setLayoutAnimationEnabledExperimental(true)

Reanimated + Gesture Handler

• Besser fuer komplexe, flusssige Gesten
• Berechnungen laufen nativer, weniger JS Jank

expo install react-native-reanimated react-native-gesture-handler

Faustregeln

• Animationen, die mit Gesten gekoppelt sind, sollten moeglichst "native" laufen.
• Wenn es ruckelt: JS Thread entlasten, z.B. weniger Re-Renders und weniger Logger.
• Teste auf Low-End Geraeten, nicht nur auf Simulatoren.

Debug Checkliste

• useNativeDriver gesetzt?
• Zu viele setState / Re-Renders waehrend der Animation?
• Animationen in useEffect und nicht in Render?