Tutorial React Native Tentang Height and width dengan Expo

Pada Kesempatan ini saya akan berbagi pengalaman saya belajar react native dengan expo untuk materi width, height dan flex, jika belum ada yang mengetahui cara instalasi dan apa saja persiapan untuk belajar react native dengan expo bisa membaca tutorialnya Disini.

Ok sudah tidak sabar, ayo kita mulai belajar….

width dan height merupakan komponen dari react native yang berguna untuk menentukan/mengatur ukuran dimensi suatu object yang akan ditampilkan dilayar, penggunaanya hampir sama dengan CSS, ada 3 macam dimensi yang digunakan dalam react native untuk mengatur width dan height yaitu Fixed Dimensions​, Flex Dimensions​ dan Percentage Dimensions​.

1. Fixed Dimensions

Secara umum untuk mengatur dimensi komponen adalah dengan menambahkan width dan height yang sudah pasti atau Fix pada style. Semua dimensi dalam React Native tidak memiliki unit, dan mewakili piksel. contoh penggunaannya seperti gambar dibawah ini, yang disebelah kiri kodingnya dan yang dibagian kanan hasilnya.


Pengaturan dimensi dengan cara ini umum untuk komponen yang ukurannya harus selalu ditetapkan ke sejumlah titik dan tidak dihitung berdasarkan ukuran layar.

Tidak ada pemetaan universal dari titik ke unit pengukuran fisik. Ini berarti bahwa komponen dengan dimensi tetap mungkin tidak memiliki ukuran fisik yang sama, di berbagai perangkat dan ukuran layar. Namun, perbedaan ini tidak terlalu mencolok untuk sebagian besar kasus penggunaan.

2. Flex Dimensions​

 Flex Dimensions​ digunakan pada style komponen agar komponen mengembang dan menyusut secara dinamis berdasarkan ruang yang tersedia.

Biasanya kita akan menggunakan flex: 1, yang memberi tahu komponen untuk mengisi semua ruang atau space yang tersedia, dibagikan secara merata di antara komponen lain dengan induk yang sama. Semakin besar flex yang diberikan, semakin tinggi rasio ruang yang akan diambil suatu komponen dibandingkan dengan induk nya. contoh penggunaannya seperti gambar dibawah ini, yang disebelah kiri kodingnya dan yang dibagian kanan hasilnya.

Sebuah komponen hanya dapat diperluas untuk mengisi ruang yang tersedia jika induk nya memiliki dimensi lebih besar dari 0. Jika induk nya  tidak memiliki lebar dan tinggi atau flex tetap, induk nya akan memiliki dimensi 0 dan flex anaknya tidak akan terlihat.

3. Percentage Dimensions​

Percentage Dimensions​ hampir sama dengan Flex Dimensions​, Jika Anda ingin mengisi bagian tertentu dari layar, tetapi Anda tidak ingin menggunakan tata letak Flex, Anda dapat menggunakan Percentage Dimensions dalam style komponen. Mirip dengan dimensi flex, Percentage memerlukan induk dengan ukuran yang ditentukan. contoh penggunaannya seperti gambar dibawah ini, yang disebelah kiri kodingnya dan yang dibagian kanan hasilnya.