Reanimated

React Native Reanimated adalah library animasi dari Software Mansion yang menjalankan animasi langsung di UI thread — bukan JS thread. Ini menghilangkan bottleneck bridge communication yang jadi penyebab utama animasi janky di React Native. Konsep kunci: useSharedValue (nilai yang bisa dibaca/ditulis dari JS thread DAN UI thread), useAnimatedStyle (style yang auto-update saat shared value berubah), worklet (fungsi JavaScript yang jalan di UI thread). Animation functions: withTiming, withSpring, withDecay, withSequence. Combo ideal: Reanimated + React Native Gesture Handler untuk gesture-driven animations 60fps. Reanimated 2+ menggunakan worklet directive ‘worklet’ untuk mendefinisikan kode UI thread.

Contoh Kode

import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";

const scale = useSharedValue(1);
const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));

scale.value = withSpring(1.5);