Lottie React Native İle Animasyon Kullanımı

React native projemize, Lottie React Native paketini kullanarak basit bir şekilde animasyonlar ekleyebiliriz.

Öncelikle, “yarn” veya “npm” kullanarak, paketin kurulumunu gerçekleştirelim.

yarn add lottie-react-native

npm install lottie-react-native

Eğer Ios üzerinde çalışıyorsanız. Ios dizinine gelip aşağıdaki komutu çalıştırın.

pod install

Sonrasında, projede kullanacağımız animasyonları almak üzere https://lottiefiles.com/ sitesine gidelim. Animasyonları kullanabilmek için sitede bir hesap oluşturmamız gerekiyor. Direkt olarak “google”, “github”, “facebook” kullanarak hesap oluşturabileceğiniz gibi mail adresi kullanarak da yeni bir hesap oluşturabilirsiniz.

Hesap oluşturduktan sonra “search animation” kısmına kullanmak istediğimiz animasyonu yazalım ve aratalım.

Örneğin ben “warning” araması yapıyorum ve ilgili animasyonlar ekrana geliyor. Burada ücretli ve ücretsiz pek çok animasyon buluyor. Eğer sadece ücretsiz olan animasyonları görmek istiyorsanız arama yaptıktan sonra “Free + Premium” seçeneğini “Free” olarak değiştirebilirsiniz.

Kullanmak istediğimiz animasyonu bulduktan sonra üzerine tıklayalım. Açılan pencerede “download”, ardından “Save to workspace to download” butonlarına tıklayalım.

Açılan yeni sekmede dilersek animasyonu kendimize uygun bir şekilde düzenleyebiliriz. Fakat ben şuan bununla ilgilenmiyorum. Sağ tarafta bulunan downlad bölümünden Lottie JSON‘ı seçerek animasyonu “json” formatında indirelim.

İndirilen dosyayı projemizde istediğimiz bir konuma taşıyalım. Ben projenin ana dizinine taşıdım. Ayrıca dosyasın ismi çok uzun olduğu için ismini “warnig.json” ile değiştirdim.

Animasyonu bir “component” olarak kullanabilmek LottieView’ı dosyaya dahil edelim.

import LottieView from "lottie-react-native";

LottieView component’inin source özelliğine, indirdiğimiz json dosyasını require ile dahil ederek girelim. Fakat bu özelliği vermek yeterli olmayacaktır. Ayrıca animasyonu otomatik oynatması için autoplay özelliği ve yükseklik-genişlik değerleri içeren bir style özelliği vermeliyiz.

<LottieView source={require("./warning.json")} autoPlay style={{width: 400, height: 400}} />

Ve animasyonumuz ekrana geldi.

LottieView component’i daha birçok özellik alabiliyor. Buradan bu component ile kullanabileceğiniz diğer özellikleri inceleyebilirsiniz.