React Native / Animations

React Native Reanimated i Gesty

Reanimated 3 (worklets, UI thread), Gesture Handler (Pan, Pinch, Swipe), React Native Skia (2D graphics) i FlashList dla płynnych animacji.

Reanimated

UI thread anim

Gesture H.

Native gesty

Skia

2D graphics

FlashList

Fast lists

6 bibliotek React Native — animacje i performance

Reanimated, Gesture Handler, Skia, react-native-screens, FlashList i SharedElement — wersja, thread i zastosowanie.

Biblioteka	Wersja	Thread / Mechanizm	Kiedy
react-native-reanimated	3.x	UI Thread (Worklets)	Kompleksowe animacje, 60/120fps
react-native-gesture-handler	2.x	Native (C++/Swift)	Pan, Pinch, Swipe, native gesty
@shopify/react-native-skia	1.x	UI Thread (Skia)	Custom 2D graphics, shaders, filtrowanie obrazów
react-native-screens	3.x	Native navigation	Natywne ekrany, lepsza pamięć niż JS
@shopify/flash-list	1.x	Recycling	Duże listy, zastępnik FlatList
react-native-shared-element	0.x	UI Thread	Hero animations między ekranami

Często zadawane pytania

Co to jest React Native Reanimated 3 i jak działa?

React Native Reanimated 3 (Software Mansion): animacje działające na UI thread. Nie JavaScript thread. Brak jank i dropped frames. Worklets: małe funkcje JS kompilowane do C++/native. 'worklet' directive. Shared Values: useSharedValue(0) — wartość synced między JS i UI thread. Animated Values: useAnimatedStyle(() => ({ transform: [{ translateX: sharedValue.value }] })). Imperatywne API: withTiming, withSpring, withDecay, withRepeat, withSequence. withTiming(100, {duration: 300, easing: Easing.bezier(...)}) — płynne przejście. withSpring(0, {damping: 10, stiffness: 100}) — sprężyste. withRepeat(withTiming(1, {duration: 1000}), -1, true) — nieskończona pętla. withSequence(withTiming(1), withDelay(500, withTiming(0))) — sekwencja. useAnimatedScrollHandler: scroll events na UI thread. event.contentOffset.y — scroll position. Używaj Animated.ScrollView z Reanimated. Interpolacja: interpolate(value, [0, 1], [0, 100]). Extrapolation.CLAMP. useAnimatedRef: ref do animated component. measure() — pobierz layout. scrollTo() — scroll. Entering/Exiting animations: FadeIn, FadeOut, SlideInLeft. entering={FadeInDown.duration(300)}. exiting={FadeOutUp}. Bez useAnimatedStyle. Layout animations: layout={Layout.springify()} — auto-animacja zmiany layoutu. Layout.duration(300). Reanimated 3 vs Animated: Reanimated — UI thread, 60/120fps. Animated — JS thread, może lag. Dla prostych: Animated OK. Dla kompleksowych gesturów: Reanimated.

React Native Gesture Handler — jak obsługiwać gesty?

React Native Gesture Handler (Software Mansion): natywne gesty. Nie JS touch events — native gesture recognizers. Instalacja: npm install react-native-gesture-handler. GestureHandlerRootView na root. Gesty: Gesture.Tap() — tap, doubleTap. Gesture.Pan() — drag, swipe. Gesture.Pinch() — pinch to zoom. Gesture.Rotation() — obracanie. Gesture.LongPress(). Gesture.Fling(direction: Directions.LEFT). GestureDetector: GestureDetector gesture={composed}. GestureDetector gesture={Gesture.Simultaneous(pan, pinch)}. Pan gesture + Reanimated: const pan = Gesture.Pan().onUpdate((event) => { translateX.value = event.translationX. translateY.value = event.translationY }). onEnd: withSpring(0) — wróć na miejsce. Swipeable: Swipeable component — swipe to reveal actions. renderRightActions — custom action buttons. Dla list items (delete, archive). DrawerLayout: boczna nawigacja. Drag z lewej strony. Konfiguracja: drawerWidth, renderNavigationView. FlatList z gesturami: FlatList wymaga gesture-enabled. Używaj z GestureHandlerRootView. Simultaneity: Gesture.Simultaneous() — gesty równocześnie (pan + pinch). Gesture.Exclusive() — jeden na raz. requireExternalGestureToFail(). Taptic feedback: HapticFeedback.impact(). react-native-haptic-feedback. Gesture.Tap().onEnd(() => HapticFeedback.selection()). ScrollView integration: waitFor i innych ScrollView gesture. simultaneousWithExternalGesture. Reanimated + Gesture Handler razem: idealny stack dla kompleksowych UI.

React Native Skia — Shopify's 2D graphics library?

@shopify/react-native-skia: Skia Graphics Engine w React Native. Skia: Google's 2D rendering engine (Chrome, Android, Flutter). Instalacja: npm install @shopify/react-native-skia. Canvas, Drawing API, Image manipulation, Shaders. Podstawy: Canvas (height, width) — obszar renderowania. Skia działa na UI thread. rect, circle, path, text, image. Drawing: Paint — stroke/fill, color, stroke width. Path.Make() — kreacja SVG paths. path.moveTo(), lineTo(), cubicTo(). Shapes: RoundedRect, Circle, Oval, Line. Text: useFont(require('./font.ttf'), 24). drawText(canvas, 'Hello', x, y, paint). Animations z Skia: Skia + Reanimated. useSharedValue dla animacji. useDerivedValue — obliczone shared value. canvas onDraw callback. Shaders: GLSL-like language (SKSL). RuntimeEffect.Make(skslCode). Gradient, noise, blur effects. Image manipulation: useImage(require('./photo.jpg')). canvas.drawImage(image, src, dest, paint). SkImage — pixel manipulation. makeImageSnapshot() — screenshot. Filters: ImageFilter: blur, color matrix, shadow. ColorFilter: matrix, mode, lerp. MaskFilter: blur. Animations przykład: const rotation = useSharedValue(0). useDerivedValue(() => Skia.Matrix().rotate(rotation.value * Math.PI / 180)). Porównanie: SVG — prostsze, brak native perf. Reanimated — animacje UI, nie 2D drawing. Skia — pełna 2D grafika, custom UI, custom charts. Kiedy Skia: custom progress bars, custom charts, photo filters, generative art, game UI.

React Native Reanimated — shared element transitions i layout animations?

Shared Element Transitions: animacja elementu między ekranami. Element 'leci' z jednego ekranu na drugi. react-native-shared-element: Reanimated 3 + React Navigation. SharedElement component. sharedElements() function na ekranie: return [{id: 'photo', animation: 'move'}]. Źródło: SharedElement id='photo'. Cel: SharedElement id='photo'. Efekt: obraz animuje pozycję/rozmiar. Ograniczenia: tylko dla flat layouts. Nie nested za innymi. Alternatywa: Reanimated layout animations + shared values. Hero animation ręcznie: measure() obydwa elementy. Animuj position absolutną. React Navigation + Reanimated: Stack Navigator z custom transition. CardStyleInterpolator. TransitionPresets: SlideFromRightIOS, ModalSlideFromBottomIOS. Layout Animations: automatyczne animowanie zmian layoutu. layout={LinearTransition} — zmiana wielkości. layout={SpringTransition.damping(10)}. entering i exiting na FlatList items. FlatList item add/remove z animacją. Animowane Flatlist: ItemSeparatorComponent animowana. keyExtractor ważny dla animacji. nie animuj key zmian. Animacje interfejsu: Accordion: useSharedValue(0) dla wysokości. withTiming do animacji. interpolate wysokości 0 -> maxHeight. Carousel: PanGesture + snapTo. withSpring do snap. CreditCard flip: RotateY 0->180. backfaceVisibility: 'hidden'. Skeleton loaders: withRepeat(withTiming, -1) dla shimmer. interpolate opacity/color. Skeleton pulsin: LinearGradient animowany.

React Native performance — optymalizacja FPS i pamięci?

Profiling: Flipper (Meta) — performance profiler. Hermes profiler (jest w Expo dev tools). Systrace — Android. Instruments — iOS. React DevTools Profiler w RN. Hermes JavaScript Engine: domyślny w React Native 0.70+. Bytecode compilation — szybsze starty. Lepsze GC. Memory profile w Flipper. FlatList optymalizacja: getItemLayout — brak dynamicznego pomiaru. keyExtractor — stabilne klucze. initialNumToRender: 10 (nie za dużo). maxToRenderPerBatch: 10. windowSize: 5 (mniej renderów off-screen). removeClippedSubviews: true — nie renderuj poza widokiem. Brak inline functions w renderItem: const renderItem = useCallback(). Item komponenty React.memo. FlashList (Shopify): zamiennik FlatList. 10x szybszy. estimatedItemSize — wymagany. Recycling — reuse komponentów. Nie re-mount — brak animacji issues. Images: Image.prefetch() — preload. FastImage (@d11n/react-native-fast-image) — caching, priorytet. resizeMode, resizeMethod (scale, resize). WebP format — mniejsze pliki. Bundle size: metro.config: minifier, treeshake. Hermes bytecode w bundle. Vendor splitting — lazy load features. RAM bundles (legacy) vs Hermes. Bridgeless mode (New Architecture): JSI — JavaScript Interface (brak bridge). Fabric — nowy renderer. TurboModules — synchroniczne native calls. Reanimated 3 — już JSI-based. Expo Modules API — native modules JSI. App startup: useEffect defer — nie w mount. InteractionManager.runAfterInteractions. Deferred loading — lazy import. SplashScreen hold — preload data.

Czytaj dalej