Advanced Styling & Animations

Tujuan Pembelajaran

• Membuat animasi fade, slide, dan bounce
• Menggunakan Animated API bawaan React Native
• Membuat UI interaktif dengan animasi

A. Fade In Animation

jsx
import { useRef, useEffect } from 'react';
import { Animated, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function App() {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(-100)).current;

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 800,
      useNativeDriver: true,
    }).start();
  };

  const slideIn = () => {
    Animated.spring(slideAnim, {
      toValue: 0,
      friction: 5,
      useNativeDriver: true,
    }).start();
  };

  useEffect(() => {
    fadeIn();
    slideIn();
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.card, { opacity: fadeAnim }]}>
        <Text style={styles.title}>Fade In Card</Text>
        <Text>Card ini muncul dengan efek fade</Text>
      </Animated.View>

      <Animated.View style={[styles.card, styles.slideCard,
        { transform: [{ translateX: slideAnim }] }]}>
        <Text style={styles.title}>Slide In Card</Text>
        <Text>Card ini muncul dari kiri</Text>
      </Animated.View>

      <TouchableOpacity style={styles.btn} onPress={() => {
        fadeAnim.setValue(0);
        slideAnim.setValue(-100);
        fadeIn(); slideIn();
      }}>
        <Text style={styles.btnText}>Replay Animasi</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20 },
  card: { backgroundColor: '#fff', padding: 20, borderRadius: 12,
          marginBottom: 16, elevation: 3 },
  slideCard: { backgroundColor: '#e3f2fd' },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  btn: { backgroundColor: '#6200ee', padding: 14, borderRadius: 10,
         alignItems: 'center', marginTop: 20 },
  btnText: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
});

B. Bounce & Scale Animation

jsx
const scaleAnim = useRef(new Animated.Value(1)).current;

const bounce = () => {
  Animated.sequence([
    Animated.timing(scaleAnim, { toValue: 1.3, duration: 150, useNativeDriver: true }),
    Animated.spring(scaleAnim, { toValue: 1, friction: 3, useNativeDriver: true }),
  ]).start();
};

<TouchableOpacity onPress={bounce}>
  <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
    <Text style={{ fontSize: 50 }}>❤️</Text>
  </Animated.View>
</TouchableOpacity>

C. Loading Spinner Custom

jsx
const spinAnim = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.loop(
    Animated.timing(spinAnim, {
      toValue: 1, duration: 1000, useNativeDriver: true,
    })
  ).start();
}, []);

const spin = spinAnim.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

<Animated.Text style={{ fontSize: 40, transform: [{ rotate: spin }] }}>
  ⚙️
</Animated.Text>

D. Latihan Mandiri

1. Buat halaman profil dengan animasi fade-in untuk setiap elemen
2. Tambahkan tombol "Like" dengan efek bounce/scale
3. Buat loading spinner custom dengan animasi rotate
4. Screenshot dan kumpulkan source code