Implementasi SharedElement pada React Native
Halo sob, di stories ini saya mau sharing tentang component SharedElement.
Singkatnya SharedElement sendiri adalah sebuah transisi antara Layar 1 ke Layar 2 dengan berbarengan dengan perpindahan component lain. Sebagai contoh apilikasi Google Photo, yang dimana ketika kita klik component gambar maka gambar tersebut seolah - olah pindah ke Layar Detail, Dan ketika saya klik Back maka gambar tersebut akan kembali ke posisi sebelumnya.
Jika kurang paham kalian bisa lihat animasi GIF diatas.
Oke.. sekarang gimana cara bikin SharedElement seperti diatas menggunakan ReactNative ?. sebenarnya belum ada component bawaan dari ReactNative itu sendiri untuk membuat SharedElement tapi kita akan menggunakan satu library untuk membuat SharedElementnya yaitu:
Sekarang coding time.. Pertama bikin project baru dari ReactNative, disini saya namain RnSharedElementExample.
1. Instalasi Library
Sesudah membuat project, selanjutnya kita install library SharedElement, dan memasang React Navigation, dan beberapa library tambahan.
Membuat Rute Navigasi
Langkah selanjutnya saya coba membuat Rute Navigasi untuk layar, dimana saya memiliki 2 layar yaitu layar Home (sebagai utama) dan layar Detail (sebagai detil), saya membuatnya dengan nama Navigator.js, dan kode nya seperti ini :
Di kode tersebut saya membuat navigator menggunakan method createSharedElementStackNavigator() fungsinya agar kita dapat membuat animasi pada component yang berada dalam Layar / Screen. Parameter pertama wajib di isikan createStackNavigator() dan ini wajib, parameter ke dua baru diisikan dengan Layar / Screen kita, dan parameter terakhir diisikan konfigurasi dari createSharedElementStackNavigator() itu sendiri. Lebih lengkapnya : https://github.com/IjzerenHein/react-navigation-shared-element#createsharedelementstacknavigator
Membuat Komponen Layar
Selanjutnya, pertama saya buat Layar / Screen untuk halaman depan saya dengan nama HomeScreen.js dan diletakan di folder src/Screens/HomeScreen.js, dengan desain Layar / Screen seperti ini :
Ketika saya KLIK salah satu karakter anime tersebut maka akan dialihkan ke Layar / Screen Detail dengan efek SharedElement. dan berikut kode HomeScreen.js saya :
Lalu untuk Layar / Screen Detail saya buat dengan nama DetailScreen.js dengan letak folder yang sama dengan HomeScreen.js, dan saya desain seperti ini :
Dan berikut adalah kode saya untuk DetailScreen.js :
Memasang efek SharedElement
Alih - alih sudah kita buat 2 Layar / Screen nya, jika kita mengujinya tanpa efek shared element maka hasilnya akan seperti ini :
Oke, sekarang kita akan coba pasang efek SharedElement, Tahap pertama buka kembali HomeScreen.js dan kita tambahkan component SharedElement :
Jika sudah ditambahkan selanjutnya kita bungkus 1 buah component yang kita ingin buat efek SharedElement, nah disini saya akan membuat Gambar background karakter Anime menjadi memiliki efek SharedElement. Caranya mudah tinggal kita bungkus saja seperti ini :
Fungsi dari attribute Id pada component SharedElement adalah sebagai indentitas component mana yang kita beri efek, lalu tahap Kedua kita edit file Layar / Screen pada DetailScreen.js, seperti sebelumnya kita harus import lagi component SharedElementnya
Dan kita lakukan seperti langkah sebelumnya yaitu membungkus satu component dengan SharedElement, tapi ingat component yang dibungkus harus component yang sama, misalnya saya membungkus component <Image /> pada HomeScreen.js berarti pada DetailScreen.js saya harus membungkus component <Image /> juga, jadi file DetailScreen.js saya berubah seperti ini :
Langkah terakhir kita harus mendefinisikan Id (identitas dari component) mana yang kita klik sesuai itemnya, seperti ini kodenya :
Dalam kode tersebut berisi static function bernama sharedElements yang akan mengambil nilai Id yang unik yang berasal dari parameter Navigation dengan object item.
Tahap terakhir kita buat kostum animasi untuk transisi antar layar, buat file baru bernama SpringFadeIn.js dan letak kan di folder src/Transition/SpringFadeIn.js, lalu isikan dengan kode seperti ini :
Setelah itu modifikasi file Navigator.js, dan tambahkan transisi SpringFadeIn yang telah kita buat tadi seperti ini :
Viollaaa… seperti ini hasilnya sekarang :
hmm.. kaya ada yang kurang.. coba sekarang saya tambahkan animasi sedikit pada DetailScreen.js agar terlihat lebih bagus.
Final: Menambah Sedikit Animasi
Seperti preview diatas adalah hasil dari SharedElement, namun disini saya akan mencoba membuat sebuah animasi statis yang akan membuat DetailScreen.js lebih smooth dan enak dilihat, Pertama buka dulu file DetailScreen.js lalu tambahkan component Animated dan Easing, seperti ini :
Tahap kedua kita buat 1 buah state yang akan menampung Nilai dari sebuah animasi, Untuk statenya saya berinama animToUp, lalu beri nilai 400 untuk state tersebut, seperti ini :
Fungsi dari nilai 400 sendiri adalah untuk mengatur posisi Y pada component <View/> nantinya jadi posisi awalnya adalah Y : 400, Tahap ketiga kita inisialisasikan animasinya dengan waktu 1.5 detik dengan efek Eeasing Bezier, dan seperti ini curva animasinya :
untuk mengetahui nilai curva animasi kamu bisa lihat refrensi ini : https://cubic-bezier.com/#.7,.3,.1,.99
Dan seperti ini jika diimplementasikan dalam kode :
Dalam kode tersebut saya memanggil Animated.timing() fungsinya untuk menjalankan animasi statis yang hanya dijalankan pada saat Component dipanggil terdapat pada method componentDidMount(), dalam Animated.timing() terdapat 2 parameter yang pertama untuk state nilai dari animasi kita, yang kedua konfigurasi dari animasi kita, lalu terakhir kita panggil animasinya dengan cara .start(), Langka terakhir kita harus memasangkan nilai animasi tersebut pada komponen yang ingin kita buat efek animasi, caranya mudah hanya perlu menambahkan Animated didepan component seperti ini:
Lalu jika kita implementasikan pada kode kita, akan menjadi seperti ini :
Pada kode tersebut terlihat saya mengatur nilai translateY dengan nilai animToUp, agar posisi Y dari komponent tersebut berpindah sesuai durasi dari animasi yang kita telah atur di event componentDidMount(), jika sudah selesai maka seperti ini hasilnya :
Kesimpulan
Membuat efek SharedElement pada React Native sebenarnya sedikit sulit jika tanpa bantuan library, dengan adanya library SharedElement tersebut kita bisa membuat efek tersebut hanya berdasarkan Id dari component SharedElement dan lebih leluasa untuk konfigurasi animasinya, kamu bisa mengeksplor animasi nya lebih banyak lagi dengan component bawaan react native yaitu Animated.
Jika ada hal yang ingin ditanyakan jangan sunkan untuk bertanya diprofile berikut: Facebook, Insta
Mohon maaf jika ada kesalahan istilah atau penjelasan, mohon koreksinya jika ada yang salah.
Dan dibawah ini repository hasil dari tutorial ini.
