Ketika kita membuat sebuah aplikasi, agar aplikasi yang kita buat menjadi lebih hidup terkadang kita menambahkan sebuah animasi dan ilustarsi bergerak pada aplikasi yang kita buat. Nah untuk membuat animasi pada aplikasi kita jangan sampai membuat perfoma aplikasi kita menjadi lambat, oleh karena itu maka kamu perlu sebuah file extension animation yang ringan namun tetap HD.

Tutorial React Native : Animation JSON Lottie
Tutorial React Native : Animation JSON Lottie


Ada beberapa alternatif seperti jenis file GIF, Video atau Flash. Namun ekstensi file tersbut cukup berat dan di beberapa device Smartphone dengan ukuran resolusi layar tinggi akan pecah. Nah perusahaan besar yang berhasil meningkatkan pengguna aplikasi (user) dengan menambahkan fitur animasi yaitu raksasa perusahaan AirBnb. Dan mereka  dengan baik memberikan kode sumber yang mereka tulis secara bebas dan gratis digunakan. Ektensi tersbut mereka sebut dengan nama Lottie, dimana file Lottie memiliki ekstensi file JSON animasi.

Apa Yang Akan Kita Pelajari ?

Instalasi dan konfigurasi Lottie di iOS dan Android
Menampilkan dan fundaental animasi Lottie

Memulai Koding 

Disini saya menggunakan React Native versi 0.60.x, karena versi ke bawah nya sudah tidak begitu support, jadi pada tutorial ini kita asumsikan kita menggunakan versi React Native yang paling stable.
Kemudian install library nya :
npm i --save lottie-react-native
npm i --save lottie-ios@3.1.3
Kemudian jika anda ingin agar bisa di jalankan pada iOS juga ketikan perintah di bawah ini :
cd ios && pod install
Setelah itu coba jalankan project anda terlebih dahulu, bila terjadi error , tambahkan kode di bawah ini :

pada file android/app/src/main/java/<AppName>/MainApplication.java
import com.airbnb.android.react.lottie.LottiePackage; on the imports section
packages.add(new LottiePackage()); in List<ReactPackage> getPackages();

pada file android/app/build.gradle tambahkan
implementation project(':lottie-react-native') in the dependencies
 Kemudian pada file android/settings.gradle tambahkan
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')

Ok setelah itu anda harus mendownload file lottie json dan ini gratis di https://lottiefiles.com/
Setelah itu pastikan and mendowload file JSON.
Kedudian buat file baru dengan nama animation dan letakan file JSON anda di folder tersebut.

Tutorial React Native : Animation JSON Lottie

Kemudian ketikan kode di bawah ini :

Kemudian jalankan kode yang telah kamu tulis dan bila berhasil maka hasilnya akan seperti ganbar di bawah ini :

https://www.konsepkoding.com/2020/03/tutorial-react-native-animation-json.html



Apabila kamu mengalami error, kamu bisa menuliskannya di kolom komentar dan akan saya jawab dengan segera. Jika tutorial ini membantu kamu silahkan bagikan dan berikan komentar terbaikmu. Terimakasih. untuk info lebih lanjut kamu bisa cari tahu disini. Sekedar infromasi kamu bisa membuat aniasi Lottie dengan menggunakan Adobe After Effects.


Baca Juga :
#1 Pengenelan React Native Dan Cara Instalasinya Lengkap
#2 Tutorial React Native State Dan Props Serta Penjelasannya
#3 Tutorial Menampilkan Gambar React Native Yang Baik & Benar
#4 Tutorial React Native Alert, Beserta Jenis-Jenisnya Lengkap
#5 Tutorial ClickListener Pada React Native Serta Penggunaannya
#6 Tutorial React Native: Text Italic, Bold, Underline dan Styling
#7 Tutorial Membuat Custom TextArea Pada React Native
#10 Tutorial Open Link Url Website Di React Native
#11 Tutorial React Native WhatsApp Direct Send Link
#12 Tutorial React Native Modal Dengan Desain Gambar
#13 Tutorial React Native : React Navigation 5 Untuk Navigasi
#14 Tutorial React Native : Mengirim Data Pada React Navigation
#15 Tutorial React Native Top TabView Gesture Lengkap