React Native Layout With Flexbox

Layout with Flexbox adalah Sebuah component dapat menentukan tata letak dari anaknya (child) dengan menggunakan algortima Flexbox. Flexbox dirancang untuk memberikan tata letak yang konsisten pada berbagai ukuran layar. Normalnya Anda akan menggunakan kombinasi flexDirection, alignItems, dan justifyContent untuk mendapatkan tata letak yang benar.

Flexbox bekerja dengan cara yang sama di React Native seperti halnya pada CSS web, dengan beberapa pengecualian. Standarnya berbeda, dengan flexDirection default ke kolom (column) bukan baris (row), dan parameter flex hanya mendukung satu nomor.

Referensi lengkapnya silakan buka url berikut: https://reactnative.dev/docs/flexbox

Flex

1. Flex akan menentukan bagaimana item Anda akan "mengisi" ruang yang tersedia di layar.
2. Ruang akan dibagi menurut properti flex masing-masing elemen.
3. Dalam contoh berikut, View merah, kuning, dan hijau adalah children dalam View container yang memiliki flex: 1.
4. View merah menggunakan flex: 1, View kuning menggunakan flex: 2, dan View hijau menggunakan flex: 3.
5. 1 + 2 + 3 = 6, artinya View merah akan mendapatkan 1/6 ruang, kuning 2/6 ruang, dan hijau 3/6 ruang.

Flex Direction

1. flexDirection mengontrol arah children dari sebuah node diletakkan, ini disebut juga sebagai sumbu utama
2. Beberapa konfigurasi flexDirection:
• row Align
• Column (default value)
• Row-reverse
• column-reverse
• Flex Direction, contoh flexDirection:

Flex Direction, contoh flexDirection: ‘row’

Justify Content

1. justifyContent digunakan untuk align children dalam sumbu utama containernya.
2. Misalnya, Anda dapat menggunakan property ini agar child menjadi center horizontal di dalam container dengan flexDirection di set ke row atau vertical di dalam container dengan flexDirection di set ke column.
3. Beberapa konfigurasi justifyContent:
• flex-start (default value)
• flex-end
• center
• Space-between
• Space-around
• Space-evenly
• Justify Content, contoh:

Justify Content, contoh:

Align Items

1. AlignItems mendeskripsikan bagaimana melakukan align children sepanjang sumbu silang (cross axis) pad container.
2. Align Items sangat mirip dengan justifyContent akan tetapi alignItems diterapkan pada sumbu silang (cross axis).
3. Berikut adalah value dari alignItems:
• Stretch
• flex-start
• flex-end
• center
• Baseline
4. Agar stretch berefek, children tidak boleh memiliki fixed dimension sepanjang sumbu sekunder. Pada contoh di slide berikutnya, alignItem: stretch tdk berefek hingga width: 50 dihapus dari children.

Align Items, contoh:

Sumber Referensi : reactnative.dev