Animasyon
React JS ile uygulama geliştiren insanlardan en çok şikayet edilen konulardan biri animasyon. Ama react native'de pek öyle değil. React Native'in kendi sunduğu Animated API, gerçekten çok etkileyici. Bunu web tarafında kullanmak isterseniz, animated veya react-native-web kütüphanesinin içindeki Animated API gibi çeşitli implementasyonlar mevcut. (react-native-web, react native codebase'i ile web geliştirmek için yazılmış bir kütüphane, belki denemek istersiniz)
React Native'de animasyonlar için bize 2 tane API sunuluyor.
- LayoutAnimation
- Animated
LayoutAnimation
LayoutAnimation
, Animated
API'a göre çok daha az konfigurasyonu olan ve componentinizde ne özellik etkilenmişse animasyon olarak kullanabileceğiniz ama Animated
API'a göre de sınırlı olan bir API.
Burada göz önünde bulunduracağınız şey bir sonraki render'da ne etkilenecek. Örneğin width
ve height
için oldukça kullanışlı oluyor.
LayoutAnimation
ayrıca native bir çözüm. JavaScript'in içinde yaratılmış bir API değil. O yüzden smooth yani akıcı animasyonlar için kullanışlı.
Animated
Animated
API, LayoutAnimation'a
göre oldukça fazla konfigurasyonu olan ve karmaşık animasyonları yazacağınız bir API. Ve maalesef JavaScript tarafında çalışan bir API bu da daha çok animasyonlar da takılmalara sebep olabiliyor. Daha akıcı animasyonlar yapmak için takılmalarda setNativeProps
ile native dünyada değişiklikler yapabilirsiniz.