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 kodenya seperti dibawah ini

============================================================================

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 kodenya seperti dibawah ini

=======================================================================

=======================================================================

Jika dijalankan akan tampak seperti ini

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 kodingnya seperti dibawah ini

import React from 'react';
import { StyleSheet, Text, View, ScrollView, } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 3,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#edf2f9',
  },
  welcome: {
    marginTop:50,
    textAlign:'center',
    fontSize:20,
   },
  item: {
    textAlign:'center',
    fontSize:15,
    marginBottom:40,
  },
  
});

const PercenDimensionsBasics = () => {
  return (
    <ScrollView
        style={{ backgroundColor: '#edf2f9',}}
        contentContainerStyle={styles.container}
      >

      
    <View style={{ height: '100%' }}>
      <Text style={[styles.welcome]}>Welcome to Web Bali Seo!</Text>

      <Text style={[styles.item]}>
      This tutorial about height and width in framework React Native.
      </Text>
      <Text style={[styles.item]}>
      Percen Dimensions
      </Text>

      <View style={{ height: '100%' }}>
        <View style={{
          height: '15%', backgroundColor: 'powderblue'
        }} />
        <View style={{
          width: '66%', height: '35%', backgroundColor: 'skyblue'
        }} />
        <View style={{
          width: '33%', height: '50%', backgroundColor: 'steelblue'
        }} />
      </View>
    </View>

    </ScrollView>
  );
};

export default PercenDimensionsBasics; 

Jika kode diatas dijalankan akan tampak seperti gambar dibawah ini

Demikian tutorial react native tentang height dan width dengan expo, semoga bermanfaat