(Week 5) React Native — Getting Started

Tulisan ini merupakan laporan kegiatan saya mengenai Proyek Perangkat Lunak yang dilakukan dari Sprint Planning Kamis, 1 Maret 2018. Saat Sprint Planning, kelompok kami memilih beberapa task untuk dikerjakan sampai Individual Review.

Beberapa task yang terpilih adalah :

• Belajar Layouting React Native
• Belajar Function React Native
• Belajar desain database
• Belajar integrasi firebase dengan aplikasi
• Belajar git flow

Task yang saya ambil adalah “Belajar Function React Native”. Sebelum melangkah ke Function React Native, terlebih dahulu saya membaca panduan instalasi React Native dari https://facebook.github.io/react-native/docs/getting-started.html. Diawali dengan instalasi Node.js. Setelah berhasil install Node.js, perintah npm baru bisa digunakan untuk instalasi React Native. Pemasangan React Native command line interface, Python, Java Development Kit dan Android Studio juga diperlukan untuk memulai inisiasi project React Native. Untuk mencoba menjalankan aplikasi di perangkat sebenarnya, saya mencoba untuk menginstall aplikasi tersebut di perangkat Android. Proses menjalankan aplikasi (run) sempat mengalami hambatan yaitu perbedaan versi Java Development Kit.

Setelah berhasil dijalankan di perangkat Android, saya mencoba untuk memodifikasi App.js untuk merubah tampilan default. Disini saya mempelajari bahwa atribut untuk komponen di React Native disebut dengan Props. Salah satu contoh dari props adalah ‘source’ dari sebuah komponen ‘Image’ (mirip seperti ‘src’ untuk tag ‘image’ di HTML).

<Image source={pic} style={{width: 150, height: 110}}/>

Dengan meletakkan props dalam tanda kurung {}, maka props bisa menjadi variabel yang dapat berganti nilai sesuai kebutuhan. Selanjutnya saya mempelajari juga komponen View di React Native yang bisa menjadi container untuk komponen lain, seperti tag ‘div’ pada HTML. View juga menjadi dasar layouting dalam React Native.

Satu hal yang juga mempengaruhi sebuah komponen di React Native adalah State. State digunakan untuk data yang mungkin akan berubah-ubah kedepannya. Secara teknis state di inisiasi di awal (di dalam constructor), selanjutnya state dapat diubah dengan memanggil setState. Contohnya pada potongan kode berikut

this.state = {isShowingText: true};
// Toggle the state every second
setInterval(() => {this.setState(previousState =>
{return { isShowingText: !previousState.isShowingText };});}, 1000);

Akan membuat komponen text menjadi berkedip terus-menerus dengan selang waktu 1 detik antar state. Penggunaan state untuk aplikasi nyata biasanya digunakan jika ada data baru dari server atau input dari user.

React Native tidak mempunyai sintaks khusus untuk melakukan styling (tetap menggunakan JavaScript). Prop yang dapat digunakan untuk styling disini adalah style. Cara kerja style mirip dengan CSS pada web, perbedaannya yaitu penamaan atribut style menggunakan camelCase. Contoh disini style untuk warna text yang digunakan di komponen View:

<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>

const styles = StyleSheet.create({
bigblue: {color: ‘blue’,fontWeight: ‘bold’,fontSize: 30,},
red: {color: ‘red’,},});

Selanjutnya saya juga belajar tentang Flex, suatu atribut style yang mengatur ukuran komponen secara dinamis sesuai dengan ruang yang tersedia. Flex dapat diumpamakan seperti pemberian weight suatu komponen terhadap layar. Angka yang mengikuti flex: menandakan seberapa besar komponen mengisi ruang dari parent komponen tersebut. Contoh :

<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: ‘powderblue’}} />
<View style={{flex: 2, backgroundColor: ‘skyblue’}} />
<View style={{flex: 3, backgroundColor: ‘steelblue’}} />
</View>

Parent View yang mempunyai flex:1 akan mengisi seluruh layar, sedangkan children View di dalamnya mempunyai nilai flex yang berbeda-beda. Antar children View mempunyai perbandingan ukuran 1:2:3 terhadap parent View nya seperti pada gambar berikut.

Salah satu fungsi yang saya pelajari adalah mengenai penggunaan Button. Button sangat umum digunakan untuk interaksi user dengan aplikasi. Button dalam React Native dapat ditampilkan dengan komponen <Button …. /> seperti gambar berikut

Serta fungsi yang berjalan setelah button ditekan dapat didefinisikan seperti berikut:

_onPressButton() {Alert.alert(‘You tapped the button!’)}

Contoh diatas akan menampilkan Alert Android bertuliskan ‘You tapped the button!’. Setelah itu dapat dipanggil dari komponen Button

<Button onPress={this._onPressButton} title=”Press Me” />

Pembelajaran selanjutnya akan dilanjutkan dengan fungsi-fungsi lain dari React Native seperti navigasi antar menu atau animasi guna meningkatkan user experience.

Referensi :

• facebook.github.io/react-native/