Tujuan Pembelajaran

Memahami perbedaan Animated API vs Reanimated
Mampu menggunakan useSharedValue dan useAnimatedStyle
Mengerti worklet dan UI thread execution

Analogi

Diagram


      Animated API = Kirim Surat:
JS Thread (kamu) → Bridge → Native Thread (tukang pos) → animasi
Delay: bridge communication bottleneck

Reanimated = Telegram Langsung:
UI Thread (tukang pos) → animasi langsung
tanpa JS Thread perantara. Instant.

Reanimated seperti telegram — animasi berjalan langsung di UI thread tanpa harus komunikasi dengan JS thread. Hasil: 60fps mulus.

Penjelasan Konsep

Reanimated adalah library animasi dari Software Mansion — pengganti Animated API bawaan. Keunggulan utama: animasi berjalan di UI thread, bukan JS thread.

Kenapa UI thread penting: (1) JS thread sibuk (fetch API, process data, render component) → animasi janky. (2) UI thread dedicated untuk rendering — selalu idle kecuali ada animasi. (3) Reanimated worklet = JavaScript yang jalan di UI thread. (4) Tidak butuh bridge communication.

Shared Values: useSharedValue(0) — nilai yang bisa dibaca dan ditulis dari JS thread DAN UI thread. Mirip Animated.Value tapi lebih powerful.

Animated Styles: useAnimatedStyle(() => ({ opacity: sharedValue.value, transform: [{ translateX: sharedValue.value * 200 }] })). Return style object yang auto-update saat sharedValue berubah.

Animations: withTiming(sharedValue, { toValue: 1, duration: 300 }), withSpring(sharedValue, { toValue: 1, damping: 15 }), withDecay(), withSequence(), withRepeat().

Gestures: Reanimated 2 + React Native Gesture Handler = combo mematikan. Gesture updates langsung ke UI thread → animasi 60fps.

Worklets: function dengan directive 'worklet' di awal. Bisa jalan di UI thread. function onScroll() { 'worklet'; ... }. Worklet tidak bisa akses closure dari JS scope.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan Animated API vs Reanimated., mampu menggunakan useSharedValue dan useAnimatedStyle., dan mengerti worklet dan UI thread execution. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Reanimated, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Reanimated seperti telegram — animasi berjalan langsung di UI thread tanpa harus komunikasi dengan JS thread. Hasil: 60fps mulus. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. useSharedValue untuk nilai animasi. useAnimatedStyle untuk style yang auto-update. withSpring untuk animasi physics-based. Semua jalan di UI thread.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

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

export default function BouncyBox() {
  const scale = useSharedValue(1);
  const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
  const onPress = () => { scale.value = withSpring(1.5, {}, () => { scale.value = withSpring(1); }); };
  return <Animated.View style={[{ width: 100, height: 100, backgroundColor: "blue" }, style]} />;
}

Penjelasan Kode

useSharedValue untuk nilai animasi. useAnimatedStyle untuk style yang auto-update. withSpring untuk animasi physics-based. Semua jalan di UI thread.

Prompt AI

Buat animasi gesture-based: user drag card ke kanan → card rotate dan fade out → background berubah hijau (like) atau merah (dislike). Gunakan Reanimated + Gesture Handler. Tulis kode lengkapnya.

Pertanyaan Reflektif

Cari 3 animasi keren di aplikasi mobile favoritmu. Bisakah kamu identifikasi apakah mereka menggunakan native driver atau JS thread?