Cara Menggunakan Flexbox pada React Native

React Native pada umumnya sangat mirip dengan React, namun perbedaan besarnya terletak pada styling component nya. Untuk Styling, React Native menggunakan code yang mirip dengan CSS yang disebut Flexbox Layout. Flexbox itu sendiri berfungsi sebagai fixed layout pada ukuran layar yang berbeda pada aplikasi android atau iOS.

Properti pada Flexbox meliputi :

FlexDirection
Justify content
AlignItems
FlexWrap

Baca Juga : Pengertian Height dan Width Pada React Native & Cara Menggunakannya!

Flex Direction

Pertama-tama buat komponen dan ambil empat kotak untuk diatur dalam komponen tersebut. Mari Bayangkan komponen yang kita buat sebagai “parent” dan empat kotak adalah “child” nya. Hal pertama yang harus kita putuskan adalah mengarahkan penataan child pada parent yang merupakan arah poros utama (Main Axis). Ini ditentukan oleh properti flexbox yang disebut flexDirection.

FlexDirection : ‘row’ | ‘column’

Flex Direction memiliki 2 value yakni row dan column dengan column sebagai nilai defaultnya. Jika kita memilih ‘row’ yang berarti baris arah sumbu utama, empat kotak yang akan kita buat akan disusun secara horizontal, sedangkan untuk column disusun secara vertikal

Baca Juga : 5 menit Saja! Cara Install React Native di Sistem Operasi Windows

Untuk lebih jelasnya mari kita lihat contoh berikut :

Output :

Justify Content

Justify content memiliki opsi antara lain flex-start, flex-end, center, space-around, dan space-beetwen. Anggaplah kita akan menggunakan “row” pada Flex directionnya, maka properti justifyContent akan membenarkan posisi child atau kotak berdasarkan main Axis nya atau sumbu porosnya.

Dengan menggunakan ‘flex-start’, ‘flex-end’, ‘center’ kita dapat mengatur childnya sesuai row, dan dengan menggunakan ‘space-around’, dan ‘space-between’ kita dapat mengatur child berdasarkan ruang yang ada.

Baca Juga : 8 Rahasia Windows 10 yang Belum Diketahui Semua Orang!

Output untuk Justify Content Flex-start :

Justify Content Center :

Justify Content Flex-end :

Justify Content Space-between :

Justify Content Space-around :

Align Items

Align Items terdiri dari 4 opsi yang bisa kamu pilih sesuai yang kamu inginkan antara lain flex-start, flex-end, center, dan stretch. Masing-masing memiliki hasil output yang berbeda-beda.

flex-start yang berarti posisi komponen akan berada di awal.
center yang berarti posisi komponen akan berada di tengah.
flex-end yang berarti posisi komponen akan berada di akhir.
stretch yang berarti posisi komponen akan melebar sesuai dengan ruang yang tersedia.

Baca Juga :

AlignItems ini hampir sama cara mengimplementasikannya dengan justifyContent, namun ada beberapa hal yang membedakan.

Misal untuk justifyContent akan menentukan tata letak komponen sesuai dengan orientasi dari flexDirection, namun alignItems akan menentukan tata letak komponen dengan berdasar pada orientasi kedua dari flexDirectionflex-start yang berarti posisi komponen akan berada di awal.

Output Flex-start :

Flex-end :

Align Item Center :

Align Item Stretch :

Flexwrap

Sebagai contoh jika kita memiliki banyak kotak dan tidak menggunakan Flexwrap maka outputnya akan menampilkan kotak-kotak tersebut hingga melebihi layar. Sedangkan dengan Flexwrap, secara otomatis kotak-kotak tersebut akan disusun rapi sesuai dengan ukuran layar.