Sejauh ini kita telah belajar dasar untuk membangun aplikasi mobile, dimana pada seri sebelumnya kita telah mengenali beberapa component (baca: Mengenal Component React Native) yang kedepannya akan berperan aktif dalam proses pembuatan aplikasi yang kita inginkan. Maka pada kesempatan kali ini kita akan belajar menggunakan component lainnya yang bersifat khusus untuk mengolah data atau lebih spesifik untuk menampilkan list data. Sebab menampilkan data pada sebuah aplikasi merupakan hal yang penting guna menunjang kegunaan dari aplikasi tersebut untuk bersifat lebih informatif.
List data akan kita olah baik yang bersifat static maupun scrollable dan kita akan melihat bagaimana cara kerja keduanya.
List View
List View digunakan untuk menampilkan data dengan mode scrolling (baca: dapat di scroll), biasanya data ini mengalami perubahan namun yang terpenting adalah harus terstruktur dengan baik. List View akan memperhitungkan dan me-render ke elemen screen agar ditampilkan sebagaimana mestinya. Jika anda memiliki list data yang panjang, maka data berikutnya akan ditampilkan setelah layar di-scroll kebawah.
Adapun case yang akan kita buat untuk memahami cara kerja dari List View adalah dengan menampilkan list data menggunakan List View ketika tombol di tekan dan memberikan efek loading selama 5 detik, hasil yang akan kita peroleh akan tampak seperti ini
Pertama, List View harus memiliki dataSource. Berdasarkan data yang didapatkan dari function dataSource dan rowHasChanged, akan menentukan content yang akan ditampilkan. Buka file App.js kemudian kita akan membuat sebuah constructor sebagai berikut:
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
})
this.state = {
dataSource: this.ds.cloneWithRows([])
};
this.showList = this.showList.bind(this);
}
//code lainnya disini
}
Penjelasan: Pertama kita mengatur properti ds pada component class yang berisi dataSource dengan memanggil static method DataSource pada ListView. Method ini menerima function rowHasChanged, yang digunakan untuk membanding antar row element. r1 dan r2 adalah argumen yang mewakili row 1 dan row 2 dalam dataSource. Menggunakan method ini akan membuat sebuah object DataSource, yang akan kita gunakan untuk membuat dataSource yang sebenarnya. Pada contoh kali ini, kita hanya akan menampilkan rows ke layar, tapi kita bisa melakukan lebih banyak lagi menggunakan method DataSource.
Setelah membuat object dataSource yang sebenarnya dan menyimpannya kedalam state, selanjutnya kita akan membuat ListView. Kita akan membuat sebuah method dengan nama getListView, yang akan menampilkan judul dan list data:
getListView() {
return [
<Text key="listView props title">Menampilkan List Data</Text>,
<ListView key="listView"
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={(rowData) => (
<View style={styles.listRow}>
<Text>{rowData}</Text>
</View>
)}
/>
]
}
Penjelasan: Kita mengambil state dataSource dan mem-passing kedalam props dataSource ListView. Kemudian kita juga mem-passing function renderRow, dimana function ini akan dijalankan untuk setiap item (baca: sebanyak item) yang terdapat didalam dataSource dan akan menampilkan setiap row yang terdapat pada pada dataSource.
Pada contoh kali ini, kita hanya me-render menggunakan View yang didalamnya terdapat component Text. Pada render method akan menjadi seperti ini:
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>React Native: Mengolah List Data</Text>
{ this.state.showList ?
this.getListView() :
this.state.loading ?
<ActivityIndicator color="black" size="small" animating /> :
<Button color="black"
onPress={this.showList} title="Show" />
}
</View>
);
}
Penjelasan: Ketika tombol ditekan maka akan memanggil function showList(), dimana ketika loading bernilai true maka ActivityIndicator akan ditampilkan untuk memberikan efek loading. Setelah 5 detik, state showList akan bernilai true dimana pada render function apabila bernilai true maka method getListView() akan digunakan untuk menampilkan data.
Karena kita memanggil method showList pada event onPress, maka kita harus membuatnya terlebih dahulu, ketikkan code berikut:
showList() {
this.setState({
loading: true
});
setTimeout(() => {
this.setState({
showList: true,
loading: false,
dataSource: this.ds.cloneWithRows(LISTVIEW_PROPS)
})
}, 5000)
}
Penjelasan: Kita mengatur loading bernilai true ketika method ini digunakan untuk menampilkan ActivityIndicator dan setelah 5 detik kita akan memperbaharui dataSource dengan mengambil content dari LISTVIEW_PROPS. Constant ini bertipe array yang berisi props names untuk ditampilkan pada ListView:
const LISTVIEW_PROPS =
['dataSource','enableEmptySections','initialListSize', 'onChangeVisibleRows', 'onEndReached', 'onEndReachedThreshold', 'pageSize', 'removeClippedSubviews', 'renderFooter', 'renderHeader', 'renderRow', 'renderScrollComponent', 'renderSectionHeader', 'renderSeparator', 'scrollRenderAheadDistance', 'stickyHeaderIndices', 'stickySectionHeadersEnabled']
Sampai pada tahap ini aplikasi sudah dapat digunakan sebagaimana mestinya sebagaimana gambar yang telah dilampirkan diawal. Nah bagi kamu yang kebingungan untuk menyatukan potongan code diatas maka kamu dapat mengambil full code berikut:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button,
ActivityIndicator,
ListView
} from 'react-native';
const LISTVIEW_PROPS =
['dataSource','enableEmptySections','initialListSize', 'onChangeVisibleRows', 'onEndReached', 'onEndReachedThreshold', 'pageSize', 'removeClippedSubviews', 'renderFooter', 'renderHeader', 'renderRow', 'renderScrollComponent', 'renderSectionHeader', 'renderSeparator', 'scrollRenderAheadDistance', 'stickyHeaderIndices', 'stickySectionHeadersEnabled']
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
})
this.state = {
dataSource: this.ds.cloneWithRows([])
};
this.showList = this.showList.bind(this);
}
getListView() {
return [
<Text key="listView props title">Menampilkan List Data</Text>,
<ListView key="listView"
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={(rowData) => (
<View style={styles.listRow}>
<Text>{rowData}</Text>
</View>
)}
/>
]
}
showList() {
this.setState({
loading: true
});
setTimeout(() => {
this.setState({
showList: true,
loading: false,
dataSource: this.ds.cloneWithRows(LISTVIEW_PROPS)
})
}, 5000)
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>React Native: Mengolah List Data</Text>
{ this.state.showList ?
this.getListView() :
this.state.loading ?
<ActivityIndicator color="black" size="small" animating /> :
<Button color="black"
onPress={this.showList} title="Show" />
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
listView: {
flex: 1,
flexWrap: 'wrap',
alignSelf: 'stretch',
padding: 20
},
});
Flat List
FlatList adalah sebuah component yang digunakan untuk me-render lists yang telah di-release pada React Native versi 0.43 dimana tidak memerlukan dataSource seperti pada ListView. Flatlist memiliki banyak fitur yang praktir sehingga menjadikannya pilihan utama untuk mengolah list sederhana maupun yang bersifat kompleks. So, mari kita lihat bagaimana cara menggunakan FlatList, kita akan memodifikasi code sebelumnya yang telah menggunakan List View. Buka file App.js, karena kita tidak membutuhkan dataSource maka lakukan perubahan pada constructor menjadi seperti ini:
constructor(props) {
super(props);
this.state = {
flatListProps: [
{
title: 'Belajar React Native',
description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum'
},
{
title: 'Belajar Laravel',
description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum'
},
{
title: 'Javascript',
description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum'
},
{
title: 'Daengweb',
description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum'
},
{
title: 'data',
description: 'plain array of data'
},
{
title: 'Linux',
description: 'Sebuah Sistem operasi'
},
{
title: 'Editor',
description: 'Digunakan untuk menuliskan code program'
},
{
title: 'Browser',
description: ''
}
]
};
this.showList = this.showList.bind(this);
}
Penjelasan: Kita memiliki sebuah state bernama flatListProps yang berisi kumpulan data yang akan ditampilkan nantinya.
Kemudian buat sebuah function dengan nama getFlatList(), function ini tujuannya serupa dengan function sebelumnya yakni getListView, hanya saja menggunakan component dan penerapan yang berbeda.
getFlatList() {
return (
<FlatList key="flatList"
style={styles.flatList}
data={this.state.flatListProps}
ListHeaderComponent={() => (
<Text style={styles.header} key="FlatList props">List Data Flat List</Text>
)}
keyExtractor={(item, index) => (`${item}--${index}`)}
renderItem = {({ item, index }) =>
<View style={styles.flatlistRow}>
<View style={styles.rowHeader}>
<Text>{item.title}</Text>
</View>
<View>
<Text style={styles.description}>{item.description}</Text>
</View>
</View>
} />
);
}
Penjelasan: Function ini menggunakan component FlatList dimana mengambil data dari state flatListProps yang telah didefinisikan sebelumnya, kemudian melakukan extract data yang akan di-looping kedalam View dan Text component. Ohya kita menggunakan style flatlist, header, flatListRow, rowHeader, maka buat style berikut:
const styles = StyleSheet.create({
header: {
backgroundColor: 'gray',
color: 'white',
fontSize: 20,
textAlign: 'center',
padding: 30
},
flatList: {
flex: 1
},
flatlistRow: {
borderBottomWidth: 1,
borderColor: 'gray',
padding: 10
},
rowHeader: {
marginTop: 10,
borderBottomWidth: 2,
borderColor: 'gray',
alignItems: 'center',
padding: 5
}
});
Pada render method buat menjadi seperti ini:
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>React Native: Mengolah List Data</Text>
{ this.state.showList ?
this.getFlatList() :
this.state.loading ?
<ActivityIndicator color="black" size="small" animating />:
<Button title="show" color="blue" onPress={this.showList} />
}
</View>
);
}
Cara kerja dari method diatas hampir sama dengan case sebelumnya, cukup tambahkan style berikut:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
Pada render method kita memanggil function showList(), maka jangan lupa untuk membuat method tersebut:
showList() {
this.setState({
loading: true
});
setTimeout(() => {
this.setState({
showList: true,
loading: false
})
}, 5000)
}
NB: Untuk kamu yang kebingungan menyatukan potongan code diatas, maka dapat kamu download pada link berikut: Github
Berikut penjelasan lengkap dari props yang dapat digunakan untuk me-render FlatList:
-
data: Prop ini berisi data array yang akan di passing ke FlatList, menggunakan data array tersebut dimana setiap item akan di-excute menggunakan functionrenderItem. -
ListHeaderComponent: Prop ini digunakan untuk mem-passing list header. Dengan cara yang sama, kita dapat menggunakanListSeparatorComponentatau ListSeparratorComponent untuk me-render custom component untuk membuat header, separator, dan footer. -
keyExtractor: Secara default, FlatList mencoba menambahkan sebuah key prop pada setiap item didalam data array menggunakanitem.key. Namun, jika kamu tidak memiliki spesifik key didalam data array, maka kamu dapat menggunakankeyExtractor. Props ini akan dijalan pada setiap item yang terdapat pada data array. -
renderItem: Function ini digunakan untuk mengeksekusi setiap item yang terdapat didalam data array dan pada dasarnya akan di-render sesuai dengan yang telah kita tentukan strukturnya. -
columnWrapperStyle: Kamu dapat mem-passing custom style lebih dari satu item ketika jumlah baris lebih (baca: jumlah item) lebih dari 1. -
onRefresh: Sesuai namanya akan me-refresh data jika anda menggunakannya. -
onEndReached: Props ini dapat digunakan untuk mendefinisikan lazy loading dari data, ketika user men-scroll ke bagian akhir dari list data. -
horizontal: Menentukan nilai dari prop ini menjadi true akan me-render item secara horizontal
Kedua component yang telah kita pelajari bersama saya rasa sudah cukup mewakiliki kita dalam mengolah data yang akan ditampilkan jika berbentuk list, So mana yang harus kamu gunakan itu tergantung dari kenyamanan atau mungkin kebutuhan kamu. Ohya kamu bisa mendownload code lengkapnya disini : Github
Comments