GALIH L. PRAKOSO

Untuk menentukan layout dalam React Native, kita dapat menggunakan Flexbox. Dengan Flexbox, sebuah component dapat menentukan layout menggunakan algoritma flexbox. Dan Flexbox juga memungkinkan kita untuk membuat layout yang responsive sehingga layout tersebut dapat menyesuaikan ukurannya pada ukuran layar yang berbeda-beda.

Flex adalah salah satu opsi yang dapat kita tulis di dalam style yang sudah kita pelajari pada tutorial sebelumnya. Secara umum, biasanya kita akan menggunakan kombinasi dari flexDirection, alignItems, dan justifyContent untuk mendapatkan layout yang sesuai keinginan kita.

Flexbox pada React Native mungkin mirip dengan cara kerja flex yang ada pada CSS yang digunakan untuk mengatur tampilan web, namun ada sedikit perbedaan yaitu default dari flexDirection adalah column dan parameter flex hanya mendukung angka tunggal. Langsung saja praktek. Seperti biasa, buka App.js dan ubah kode yang ada dalam variable styles menjadi seperti dibawah ini :

Aku akan menjelaskan satu per satu sesuai dengan angka yang ada di komentar pada kode di atas. Pada kode di atas aku mengubah flexDirection menjadi row. Karena sebelumnya kita belum mengatur flexDirection maka React Native akan menggunakan default yaitu column. Untuk mengembalikan seperti semula silahkan menggantinya dengan column.

1. flexDirection

Yang pertama adalah flexDirection. Dengan flexDirection kita dapat menentukan arah dari item child sebuah component. Kita dapat memilih antara row atau column. Jika row maka child akan mengarah ke samping. Jika column maka child akan mengarah ke bawah.

2. alignItems

Yang kedua adalah alignItems.  Dengan alignItems kita dapat menentukan apakah child harus rata tengah, rata awal, rata akhir atau meregang dalam aplikasi Microsoft Word biasa kita lebih familiar dengan kata alignment. Kita dapat memilih opsi antara flex-start, center, flex-end, stretch.

3. justifyContent

Yang ketiga adalah justifyContent. Dengan justifyContent kita dapat menentukan bagaimana child berperilaku terhadap child yang lain atau dengan kata lain distribusi child berdasarkan flexDirection. Kita dapat memilih opsi antara flex-start, center, flex-end, space-around, space-between dan space-evenly. Untuk mengetahui lebih dalam, aku sarankan kalian untuk mencobanya satu per satu agar kalian benar-benar memahami fungsi dari setiap opsi. Sebenarnya fungsi dari setiap opsi bisa di logika berdasarkan namanya. 😁

Beberapa hal yang sudah dijelaskan pada tutorial ini merupakan hal yang akan sering kita temui ketika membangun aplikasi menggunakan React Native. Jadi alangkah baiknya kalian benar-benar memahami materi pada tutorial kali ini. Kalian coba-coba saja setiap opsi yang ada dan lihat efeknya pada tampilan aplikasi kalian. Jika masih ada hal yang bingung jangan sungkan-sungkan untuk bertanya dengan meninggalkan komentar di bawah.

Jika semua berjalan lancar, silahkan lanjut ke tutorial selanjutnya. 💪👇

Tutorial React Native Dasar - Bahasa Indonesia - #9 Input