React Native Reanimated’a Hızlı Bir Bakış

React Native uygulamalarında animasyonlar ve etkileşimler oluşturmak için kullanabileceğiniz güçlü ve optimize edilmiş bir kütüphane olan React Native Reanimated’a hızlı bir bakış atıyoruz. İşte başlamak için bilmeniz gereken temel bilgiler.

React Native Reanimated: Başlarken

React Native Reanimated, Software Mansion tarafından geliştirilen ve React Native uygulamalarında animasyonlar ve etkileşimler oluşturmak için kullanabileceğiniz güçlü ve optimize edilmiş bir kütüphanedir. Bu kütüphane, animasyon ve jest yönetimi için iki katmanlı bir mimari sunar ve performansı artırarak daha sorunsuz deneyimler sağlar.

Neden React Native Reanimated? 🤔

React Native, animasyonlar ve etkileşimler oluşturmak için Animated ve LayoutAnimation gibi yerleşik kütüphanelere sahiptir. Bununla birlikte, bu kütüphanelerin bazı sınırlamaları ve performans sorunları vardır. React Native Reanimated, daha iyi performans ve esneklik sunarak bu sorunların üstesinden gelir. İşte Reanimated'ın sunduğu bazı avantajlar:

1. Daha iyi performans: Reanimated, JS ve UI arasındaki etkileşimi azaltarak performansı artırır.
2. Daha fazla esneklik: Reanimated, karmaşık animasyonlar ve özelleştirilmiş jestler için daha fazla esneklik sunar.
3. Gerçek zamanlı animasyonlar: Reanimated ile, animasyonlarınızı cihazın özelliklerine ve kullanıcının etkileşimlerine göre uyarlayabilirsiniz.
4. Daha iyi hata kontrolü: Reanimated, kapsamlı hata kontrolü ve doğru hata mesajları sağlayarak geliştirme sürecini kolaylaştırır.

Kurulum ⚙️

React Native Reanimated’ı projenize eklemek için, aşağıdaki komutu kullanarak npm veya yarn ile indirebilirsiniz:

npm install react-native-reanimated
## or
yarn add react-native-reanimated

Kütüphaneyi projeye dahil ettikten sonra, Animated nesneleri oluşturarak ve kontrol etmek için Reanimated'in API'sini kullanmaya başlayabilirsiniz.

Temel Kullanım

React Native Reanimated ile basit bir animasyon oluşturmak için önce useSharedValue ve useAnimatedStyle hook'larını import edin:

import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

Sonra, animasyonlu bir değer oluşturun ve animasyonlu bir stil tanımlayın:

// App.tsx
import { View, StyleSheet } from "react-native";
import React, { memo } from "react";
import Entypo from "@expo/vector-icons/Entypo";

import Ring from "./Ring";
const SIZE = 86;
const Index = () => {
  return (
    <View style={styles.container}>
      <View style={styles.dot}>
        {[...Array(3).keys()].map((_, index) => (
          <Ring key={index} index={index} />
        ))}
        <Entypo name="old-phone" size={42} color="black" />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
  },
  dot: {
    height: SIZE,
    width: SIZE,
    borderRadius: SIZE / 2,
    justifyContent: "center",
    alignItems: "center",
  },
});
export default memo(Index);

// Ring.tsx
import React, { memo, useEffect } from "react";
import { StyleSheet, View } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

const SIZE = 86;
const duration = 2000;
const Ring = ({ index }) => {
  const opacity = useSharedValue(0.7);
  const scale = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
      opacity: opacity.value,
    };
  });
  useEffect(() => {
    opacity.value = withDelay(
      index * 400,
      withRepeat(withTiming(0, { duration }), -1, false)
    );
    scale.value = withDelay(
      index * 400,
      withRepeat(withTiming(4, { duration }), -1, false)
    );
  }, []);
  return <Animated.View style={[styles.container, animatedStyle]} />;
};
const styles = StyleSheet.create({
  container: {
    height: SIZE,
    width: SIZE,
    borderRadius: SIZE / 2,
    backgroundColor: "rgba(212, 91, 144, 0.5)",
    position: "absolute",
  },
});
export default memo(Ring);

tasarımın son hali şöyle görünmelidir,

1. useAnimatedStyle Hook'u, her halkanın görünümünü (stilini) animasyonlu değerlere göre güncellemek için kullanılır. Bu Hook, halkaların ölçeklendirme (scale) ve görünürlük (opacity) değerlerini animasyonlu değerlere bağlar.
2. useEffect Hook'u, animasyonları başlatmak ve tekrarlamak için kullanılır. Bu Hook, bileşenin ilk render'ında bir kez çalışır.
3. withDelay fonksiyonu, halkaların animasyonlarının sırayla başlamasını sağlar. İlk parametre, gecikme süresi (index * 400), ikinci parametre ise uygulanacak animasyondur. index, her halkanın sırasını belirler.
4. withRepeat fonksiyonu, animasyonları tekrarlamak için kullanılır. İlk parametre, uygulanacak animasyon, ikinci parametre ise tekrar sayısıdır. 1 değeri, animasyonun sürekli tekrarlanması anlamına gelir. Üçüncü parametre false olarak ayarlanarak animasyonun yalnızca bir yönde hareket etmesi sağlanır.
5. withTiming fonksiyonu, animasyonun süresini kontrol etmek için kullanılır. İlk parametre, animasyonun hedef değeri, ikinci parametre ise animasyon süresidir (duration).

Bu yapı sayesinde, halkalar sırayla ölçeklenir ve görünürlükleri değişir. Bu animasyonlar sürekli tekrarlanır ve her halka, bir öncekinden 400 milisaniye sonra başlar. Böylece, React Native Reanimated için temel olan birçok fonksiyonun nasıl kullanıldığını öğrenmiş oluyoruz.

Sonuç olarak

React Native Reanimated’ın performans, esneklik ve kullanıcı deneyimini iyileştirme yeteneği, animasyonlu ve etkileşimli uygulamalar geliştiren herkes için mükemmel bir araç olduğunu söyleyebilirim. Başlamak ve öğrenmek için oldukça basit ve kullanıcı dostu olan bu kütüphane, karmaşık animasyonlar oluşturmanıza ve bunları rahatlıkla yönetmenize olanak sağlar. Bu bilgiler ışığında, umarım React Native Reanimated hakkında daha fazla bilgi edinmişsinizdir. Okuduğunuz için teşekkür ederim.

Gelecek yazılarda görüşmek dileğiyle, teşekkürler 🙂

Ömer Esmer | React Native Developer