Implementasi SharedElement pada React Native

Fachry Ansyah
6 min readJan 25, 2020
Photo by 贝莉儿 DANIST on Unsplash

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.

Package yang harus diinstall

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 :

Gambar HomeScreen.js

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 :

Gambar DetailScreen.js

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 :

Preview sebelum menggunakan efek SharedElement

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 :

Preview Final

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.

--

--

Fachry Ansyah

Just people who code in the darkness, reach me on instagram @fachry.stark