Matakuliah/Code : Lab.

Pemrograman Perangkat Bergerak / TIFA3P3

Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

BAB III
LISTING DAN LIFE CYCLE METHOD

1. Install Library
Pada materi kali ini memerlukan beberapa dependencies yang perlu digunakan, yaitu salah satunya ialah
penggunaan icon pada aplikasi react native expo. Pada project kali ini akan memanfaatkan dependencies
icon dari https://oblador.github.io/react-native-vector-icons/ oleh karenanya bukalah terminal pada
project anda dan masukan syntax dibawah ini untuk menginstall library icon:

npm i react-native-vector-icons

Setelah berhasil menambahkan library icon tersebut silakan anda jalankan expo metro servernya dan
ikuti tahapan-tahapan perintah dibawah ini dengan baik.

2. StyleSheet – Daftar Teman UI

Pada bagian ini akan membahas mengenai penggunaan Listing dan Life Cycle method pada react native
expo cli. Namun sebelum kepembahasan materi, hal yang perlu dilakukan ialah membuat layouting pada
aplikasi. Contoh kasus kali ini ialah membuat sebuah halaman daftar pertemenan. Jika merujuk pada
desain dibawah ini:

Gambar 1.a. Desain halaman daftar pertemanan

Berdasarkan desain diatas dapat kita break down UI untuk mendapatkan skema konsep element pada
react native seperti berikut:
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

Gambar 1.b. Break Down UI halaman daftar teman

Setelah melakukan Analisa terhadap desain aplikasi, selanjutnya kita tentukan sebuah komponen react
dalam bentuk class untuk menjadi titik awal aplikasi. Pada project react native expo cli buatlah sebuah
package baru bernama praktikum-3 didalam folder ./src/.

Berdasarkan contoh gambar disamping mengenai structure folder pada

project react native expo yang bernama MY-MOBILE-APPS.

Di dalam folder src, buatlah sebuah package folder baru bernama

praktikum-3/components dan didalam folder components terdapat
dua buah folder bernama const-data dan Friends.

Karna kita akan membuat titik awal aplikasi untuk halaman pertemanan
olehkarenanya buatlah sebuah React Class Component didalam folder
Friends bernama MyFriends.js

Masukan code JSX berdasarkan skema yang telah dibuat sesuai dengan
Gambar 1.b. dan tambahkan stylesheet untuk membuat sketsa aplikasinya:
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

MyFriends.js

Pada sketsa scripting diatas, diamana titik awal aplikasi untuk halaman pertemanan ini dibuat dengan
komponen class. Komponen ini menggunakan container SaveAreaView sebagai pembungkus pertama,
didalamnya terdapat 3 buah elemen JSX yaitu ada StatusBar dan container View pertema untuk bagain
header dan View kedua diperuntukan bagian body.

Disetiap element emmet JSX memiliki property style yang telah didefinisikan sesuai dengan nama-nama
key pada variable styles, yaitu ada key container, header dan body. Dari hasil scripting tersebut maka
output yang ditampilkan akan seperti berikut ini:

Gambar 1.c. Output skema awal

 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

Didalam folder Friends, buatlah sebuah folder bernama widgets. Dimana folder ini berisi file-file
mentah komponen function react. Widget pertama yang akan dibuat ialah bagian header pada desain
halaman pertemanan. Simpanlah React Function Component dengan nama SearchBar.js didalam
folder widgets milik Friends.

SearchBar.js

Pada script diatas terdapat syntax untuk menggunakan icon dari library yang telah diinstall yaitu react-
native-vector-icons. Contoh script diatas untuk penggunaan font icon menggunakan type
fontawesome 5 dimana anda dapat mencari nama-nama iconnya di https://fontawesome.com/v5/search

<FontAwesome5 name={"search"} size={25} color="grey" />

Disini pada emmet FontAwesome5 property name menggunakan value search untuk mendapatkan bentuk
icon seperti kaca pembesar. Lalu properties size diperuntukan untuk mengatur ukuran iconnya,
sedangkan property color digunakan untuk memberikan warna pada icon.

Setelah menambahka script diatas silakan anda panggil RFC SearchBar didalam RCC MyFriends sesuai
dengan posisi penempatan layoutnya.
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

MyFriends.js

Memanggil fungsi SearchBar dan

menempatkannya pada layer ke-2

Maka ouput dari penampilkan script diatas sebagai berikut:

Gambar 1.d. Output widget SearchBar

Untuk layer kedua pada script MyFriends.js, View dengan key body akan berisi contoh penggunaan
Listing seperti ScrollView, FlatList dan SectionList. Materi tersebut akan dijelaskan pada bagian
selanjutnya.

3. Listing
Penggunaan konsep listing pada react native terbagi menjadi tiga buah tipe, pertama secara manual
mengandalkan emmed ScrollView, kedua ialah FlatList dan terakhir adalah SectionList. Pada contoh kali
ini penggunaan listing selalu memanfaatkan data dalam bentuk array object. Berikut ini ialah contoh
data buatan yang akan digunakan untuk mengimplementasi ketiga bentuk listing:
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

const Users = [
{ id: 1, name: "Zaki", fullname: "Zaki Aljabbar" gender: "M" },
{ id: 2, name: "Adrian", fullname: "Adrian Adhari", gender: "M"},
{ id: 3, name: "Hana", fullname: "Hana Yulia Rahmah", gender: "F"},
{ id: 4, name: "Lukman", fullname: "Lukman Nurhakim", gender: "M"},
{ id: 5, name: "Cindy", fullname: "Cindy Kevina", gender: "F" }
];

Sedangkan untuk rendering item listing berdasarkan objek diatas, pada contoh bagian ini akan membuat
sebuah komponen baru bernama UserItem. Fungsi ini yang nantinya digunakan untuk merender JSX
dengan ketiga tipe listing tersebut.

Sebelumnya, silakan anda siapkan folder assets untuk menyimpan file-file media seperti gambar. Folder
assets ini sejajar dengan folder src pada project anda. Pada script dibawah ini pada emmet JSX Image
memanggil sebuah file bernama icon-girl-1.png dimana file ini berada di folder assets/icons/.

UserItems.js
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

1.1. ScrollView
ScrollView merupakan elemen scroll secara umum yang dapat berisi banyak komponen dan tampilan.
Item yang dapat digulir bisa berbeda-beda, dan dapat menggulir baik secara vertikal maupun horizontal
(dengan memasang properti horizontal).

Script Output

1.2. FaltList
Penggunaan FlatList tidak jauh berbeda dengan ScrollView, pada emmed ini juga memiliki sebuah
properti yang dapat digunakan untuk membentuk scroll dalam orientasi Horizontal maupun Vertikal.
Cukup menambahkan property bernama horizontal={true/false}.

Namun yang berbeda ialah adanya property renderItem, property tersebut diperuntukan untuk mengirim
sebuah object kedalam bentuk render JSX tanpa menggunakan looping array object datanya. Berikut
adalah contoh script dari penerapan emmed FlatList:
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

Gambar 1.2 Penggunaan FlatList

1.3. SectionList
Berbeda dengan ScrollView atau FlatList, emmed ini tidak bisa memiliki orientasi dalam bentuk
Horizontal. Dan pengiriman data valuenya pun memiliki konsep yang berbeda dari kedua contoh listing
sebelumnya.
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

Gambar 1.3. Penerapan SectionList

Jika diperhatikan implementasi terhadap ketiga tipe listing, dari sisi script memiliki perbedaan dari cara
merender atau menerima sebuah data hingga ditampilkannya. Namun dari sisi output, ketiga list tersebut
memiliki kesamaan, yang berbeda hanyalah listing SectionList, dimana emmet ini memerlukan
renderSectionHeader untuk menampilkan judul dari object datanya.

4. Latihan Praktikum
1. Pada react function component UserItem, buatlah sebuah kondisi jika gender dari setiap objeknya
ialah “M” maka menampilkan gambar icon boy, namun sebaliknya menampilkan gambar icon girl.
2. Buatlah package baru dengan nama Latihan-prak-3 pada project praktikum react expo cli anda.
3. Cloning lah aplikasi dibawah ini dengan baik, gunakanlah Listing ScrollView, FlatList, dan
SectionList.

Orientasi
horizontal

Orientasi
Vertical
 Matakuliah/Code : Lab. Pemrograman Perangkat Bergerak / TIFA3P3
Dosen : Irvan Rizky Ariansyah / Raiyana Jan Winata
IBIK Kelas : TI-21-PA

Pengumpulan tugas Latihan praktikum dikumpulkan kedalam GITHUB masing-masing mahasiswa

berdasarkan repository yang telah dibuat PPB-TI-21-[PA/KA]-NPM. File source code disimpan sesuai nama
project-praktikum dan masukan kedalam repositori tersebut. Buatkanlah file dokumen dalam bentuk file pdf
yang berisi Screen Capture dari hasil program yang telah dikerjakan. Simpan dalam file PDF tersebut
kedalam project tersebut.
Tambahkan Collaborator management access pada repository anda kepada:
@FebryFairuz dan (@IrvanRizkyAriansyah atau @thesyamarcella)

Disusun Oleh Disetujui Oleh

Thesya Marcella Irvan Rizky Ariansyah Febri Damatraseta Fairuz, S.T., M.Kom
Penyusun I Penyusun II Dosen Kordinator