Belajar React Native - Animations & Reanimated

#Pendahuluan

Animasi adalah yang membedakan aplikasi terasa hidup dari yang terasa kaku: bayangkan tombol yang merespons sentuhan, kartu yang mengikuti jari, atau transisi antar layar yang mulus. Di mobile, animasi yang tersendat adalah tanda paling jelas aplikasi tidak profesional.

Episode 19 membahas animasi di React Native: Animated bawaan, Reanimated 3+ yang mengeksekusi animasi di UI Thread lewat worklet, React Native Gesture Handler untuk sentuhan, pola transisi dan gesture-driven animation, serta Lottie untuk animasi kompleks dari file desain.

#Animated API Bawaan

#Animated untuk Animasi Sederhana

Animated adalah API bawaan React Native untuk animasi berbasis JS Thread. Cocok untuk animasi sederhana — fade, translate, scale:

Fade dengan Animated bawaan

import { Animated, View, Text, Pressable } from "react-native";
 
export function Fade() {
  const opacity = new Animated.Value(0);
 
  function muncul() {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 400,
      useNativeDriver: true,
    }).start();
  }
 
  return (
    <Animated.View style={{ opacity }}>
      <Pressable onPress={muncul}>
        <Text>Muncul</Text>
      </Pressable>
    </Animated.View>
  );
}

Animated.timing(opacity, { toValue: 1, duration: 400 }) menganimasikan nilai dari 0 ke 1 dalam 400 milidetik. Selalu aktifkan useNativeDriver: true agar animasi dijalankan di native — lebih mulus.

#Reanimated 3+ dengan Worklet

#Worklet: JavaScript di UI Thread

Reanimated memperkenalkan worklet: fungsi JavaScript yang ditulis dalam aplikasi tetapi dieksekusi di UI Thread. Animasi tidak lagi menunggu antrian JS Thread, sehingga mulus meski aplikasi sibuk.

#Install Reanimated

Reanimated membutuhkan plugin Babel. Install dan tambahkan plugin ke babel.config.js:

npm install react-native-reanimated

plugins: ['react-native-reanimated/plugin']

Urutan plugin Babel penting — plugin Reanimated harus terakhir agar worklet terdeteksi dengan benar.

#useSharedValue dan useAnimatedStyle

Nilai animasi disimpan di useSharedValue, dan useAnimatedStyle menghubungkannya ke style:

Animasi skala dengan worklet

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from "react-native-reanimated";
 
export function TombolPesan() {
  const skala = useSharedValue(1);
 
  const gaya = useAnimatedStyle(() => {
    return { transform: [{ scale: skala.value }] };
  });
 
  return (
    <Animated.View
      style={gaya}
      onTouchStart={() => (skala.value = withSpring(0.9))}
      onTouchEnd={() => (skala.value = withSpring(1))}
    >
      <Text>Tekan</Text>
    </Animated.View>
  );
}

useAnimatedStyle(() => ({ transform: [{ scale: skala.value }] })) berjalan sebagai worklet di UI Thread. Saat skala.value diubah, style diperbarui langsung tanpa menunggu JS Thread. withSpring memberikan efek pegas yang alami.

#React Native Gesture Handler

#Gesture yang Lebih Akurat

Animated dan Pressable hanya menangkap sentuhan sederhana. Gesture Handler mengenali pan, pinch, rotation, dan kombinasinya dengan presisi tinggi, dan terintegrasi mulus dengan Reanimated:

npm install react-native-gesture-handler

Gesture pan dengan Reanimated

import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";
 
export function KartuGeser() {
  const x = useSharedValue(0);
 
  const pan = Gesture.Pan()
    .onUpdate((e) => (x.value = e.translationX))
    .onEnd(() => (x.value = withTiming(0)));
 
  const gaya = useAnimatedStyle(() => ({
    transform: [{ translateX: x.value }],
  }));
 
  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={gaya} />
    </GestureDetector>
  );
}

Gesture.Pan() menangkap gerakan jari; onUpdate menggerakkan kartu mengikuti jari, dan onEnd mengembalikannya dengan animasi timing. Kombinasi Gesture Handler dan Reanimated adalah standar untuk swipe, drag, dan expandable card.

#Pola Motion

#Transisi dan Micro-interaction

Pola yang sering dipakai:

• Transisi antar layar: fade-slide ringan saat navigasi, jangan berlebihan.
• Micro-interaction: feedback kecil saat tombol ditekan atau item dipilih.
• Gesture-driven: elemen yang mengikuti jari dengan resistensi, lalu snap ke posisi.

Aturan praktis: animasi harus bermakna — memberi konteks atau umpan balik — bukan sekadar hiasan yang memperlambat.

#Lottie untuk Animasi Kompleks

#Animasi dari File Desain

Untuk animasi ikon, loader, atau ilustrasi kompleks yang dibuat desainer di After Effects, gunakan Lottie. Animasi diekspor sebagai JSON dan dirender native:

npm install lottie-react-native lottie-ios

source={require("./assets/loading.json")} memuat file animasi dari aset lokal, dan prop autoPlay dengan loop membuatnya berputar otomatis. Lottie menangani animasi kompleks yang sulit ditulis ulang manual dengan performa native.

#Penutup

Episode 19 menghidupkan aplikasi: Animated bawaan untuk animasi sederhana, Reanimated 3+ dengan worklet di UI Thread, Gesture Handler untuk sentuhan presisi, pola motion yang bermakna, dan Lottie untuk animasi kompleks.

Inti yang harus dibawa pulang:

• Animated cocok untuk animasi sederhana; Reanimated untuk yang kompleks.
• Worklet mengeksekusi logika animasi di UI Thread.
• useSharedValue dan useAnimatedStyle adalah fondasi Reanimated.
• Gesture Handler menangkap pan, pinch, dan rotation dengan presisi.
• Animasi harus bermakna, bukan sekadar dekorasi.
• Lottie merender animasi desain kompleks secara native.

Di episode 20 selanjutnya kita akan membahas testing dan tooling: Jest dengan React Native Testing Library untuk unit test, Detox untuk E2E, CI/CD dengan GitHub Actions, Fastlane dan EAS Build untuk distribusi, serta update over-the-air dengan EAS Update.