> For the complete documentation index, see [llms.txt](https://umar-rudy.gitbook.io/skema-tik/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://umar-rudy.gitbook.io/skema-tik/basic-layout-tutorial.md).

# Basic Layout Tutorial

Diterjemahkan dari [Wix Engineering Blog](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c)

## flexDirection <a href="#id-8189" id="id-8189"></a>

*`‘column’,’column-reverse’,’row’,’row-reverse’`*

Mendefinisikan arah axis utama dari item *component* yang berada di dalamnya.  Standar awalnya adalah `column`. Karena kebanyakan aplikasi mobile orientasinya vertikal.

![Tekan gambar untuk memperbesar](https://miro.medium.com/max/733/1*rA7IbuUsJWsx6evKAsabVw.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/flexdirection)

## flex <a href="#id-954c" id="id-954c"></a>

`flex`akan mendefinisikan seberapa banyak tempat/ruang yang akan didapatkan dari suatu item. Kebanyakan, yang dibutuhkan adalah `flex: 1` untuk mendapatkan seluruh tinggi layar/screen. &#x20;

Ruang akan dibagi sesuai `flex` dari elemen di dalamnya. Contoh di bawah ini view merah, kuning, dan hijau adalah *child*  dari container yang memiliki `flex:1`

Yang merah dapat `flex:1` , kuning `flex:2`, dan hijau `flex:3`

1+2+3=6 yang artinya, merah dapat 1/6 dari total ruang; kuning 2/6; hijau 3/6.

![](https://miro.medium.com/max/733/1*PhCFmO5tYX_sZSyCd4vO3w.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/flex)

## justifyContent <a href="#id-34ad" id="id-34ad"></a>

*`‘flex-start’,’flex-end’,’center’,’space-between’,’space-around’`*<br>

Menentukan **distribusi** child di sepanjang **main axis** yang telah didefinisikan oleh `flexDirection`. Istilah "justify" datang dari dunia percetakan. Garis [yang ada di artikel berita](https://www.ragesw.com/blog/wp-content/uploads/2016/06/justified.png) mengisi ruang dengan rata dan lurus pad marginnya.&#x20;

![](https://miro.medium.com/max/733/1*i5TVlme-TisAVvD5ax2yPA.png)

* Standarnya adalah `flex-start`

[Coba di Expo](https://snack.expo.io/@drorbiran/justifycontent)

## alignItems <a href="#id-298c" id="id-298c"></a>

*`‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’`*<br>

Menyesuaikan/meluruskan item sepanjang **cross** axis. Jadi, dalam view standard, ini akan mengontrol kelurusan item secara horizontal.

![](https://miro.medium.com/max/733/1*evkM7zfxt-9p-HJ1M0Bh2g.png)

* `stretch` tidak bekerja ketika `width` dari view sudah dispesifikasi.
* `flex-start` dan `flex-end` tidak akan mengerti apa yang harus dilakukan jika tidak ada spesifikasi `width`.

[Coba di Expo](https://snack.expo.io/@drorbiran/alignitems)

## alignSelf <a href="#a756" id="a756"></a>

*`‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’`*<br>

Meluruskan item dengan **corss axis** dan **menimpa** `alignItem` parent-nya.

![](https://miro.medium.com/max/733/1*J1JCoKwLCokX9JXVBvP71g.png)

&#x20;[Coba di Expo](https://snack.expo.io/@drorbiran/alignself)

## flexWrap <a href="#e449" id="e449"></a>

*`‘wrap’, ‘nowrap’`*

Mengatur apakah item flex dipaksa masuk ke dalam satu baris atau bisa dibungkus ke dalam beberapa baris.

![](https://miro.medium.com/max/733/1*_7v4uQhSsuCn1cfeOMVfrA.png)

* Nilai standarnya adalah `nowrap`

[Coba di Expo](https://snack.expo.io/@drorbiran/flexwrap)

## alignContent <a href="#b8b2" id="b8b2"></a>

*`‘flex-start’, ’center’, ’flex-end’, ’stretch’,’space-between’, ’space-around’`*

Ketika `flexWrap` ditentukan menjadi `flexWrap:'wrap'`, maka container memiliki beberapa baris item. Properti ini akan membantu untuk meluruskan baris cross-axis.

![](https://miro.medium.com/max/733/1*cC2XFyCF_igp20Ombt4wBw.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/flexwrap)

## position <a href="#c99f" id="c99f"></a>

*`‘relative’, ’absolute’`*

Anggap container seperti orang berbaris. Dan tiap orang itu diperintahkan  untuk berdiri 5 meter di belakang orang depannya (`marginTop: 5`).&#x20;

Masing-masing orang tadi akan menaati barisan dan memosisikan dirinya relatif terhadap orang di depannya, jika diset `relative`.

JIka diset ke `absolute`, maka orang-orang tadi akan mengabaikan barisan dan memosisikan dirinya seolah barisan kosong 5 meter dari permualaan baris (parent container).

![](https://miro.medium.com/max/733/1*NlPeRQCQK3Vb5nyjL0Mqxw.png)

* Standar nilainya adalah `relative`

[Coba di Expo](https://snack.expo.io/@drorbiran/position)

## &#x20;zIndex

Component bisa diatur dimana tampilannya di atas mana. Di contoh ini,  `zIndex` dari kotak kuning adalah 1

![](https://miro.medium.com/max/733/1*NIB9XzbUT788FhKDYBqnKQ.png)

[Coba di Expo](https://snack.expo.io/@drorbiran/position)

> Itulah 9 dasar props layout. Untuk lebih lanjut bisa cek <https://reactnative.dev/docs/layout-props>