Belajar React Native - Komponen Dasar & Styling

#Pendahuluan

Semua aplikasi React Native adalah susunan komponen core. Di episode 3 kalian sudah membuat project dan melihat App.tsx; sekarang saatnya memahami setiap komponen dasar dan bagaimana mengaturnya hingga tampil cantik.

Episode 4 membedah komponen core satu per satu — View, Text, Image, TextInput, ScrollView, FlatList, dan SectionList — lalu masuk ke sistem styling: StyleSheet.create, layout Flexbox, properti gap, dan perbedaan satuan dp, px, dan persen. Ini adalah dasar yang akan kalian pakai di hampir semua episode berikutnya.

#Komponen Core dan Perannya

#View dan Text

View adalah blok bangunan layout — mirip div di web. Hampir semua elemen layout dibungkus View. Sementara Text adalah satu-satunya cara menampilkan teks. Aturan penting: teks tidak bisa langsung diletakkan di dalam View, harus di dalam Text.

View dan Text

import { View, Text, StyleSheet } from "react-native";
 
export function Header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>Halo React Native</Text>
      <Text style={styles.subtitle}>Seri belajar mobile</Text>
    </View>
  );
}

Perhatikan pola pada Header di atas: styles.header dan styles.title merujuk ke object yang dibuat oleh StyleSheet.create — kita bahas sebentar lagi.

#Image dan ImageBackground

Image menampilkan gambar, baik dari URL jaringan maupun aset lokal. Jangan lupa set style dengan ukuran, karena Image tidak punya ukuran intrinsik. ImageBackground adalah saudaranya yang bisa dijadikan background dengan konten di atasnya.

#TextInput

TextInput adalah field input. Dua prop terpenting: value dan onChangeText. Karena mobile tidak punya keyboard fisik, TextInput juga bisa dikonfigurasi dengan keyboardType, secureTextEntry untuk password, dan placeholder.

#ScrollView, FlatList, dan SectionList

• ScrollView: menggulir konten yang lebih besar dari layar. Cocok untuk konten statis dan jumlah data sedikit.
• FlatList: list data panjang dengan virtualisasi — hanya elemen yang terlihat yang di-render.
• SectionList: seperti FlatList tetapi mendukung section header berkelompok.

Untuk data ratusan baris, selalu pilih FlatList atau SectionList, bukan ScrollView. Detail performanya ada di episode 8.

#Styling dengan StyleSheet

#Mengapa StyleSheet.create

StyleSheet.create memberi validasi style dan konversi nilai di level pengembangan, plus memudahkan organisasi. Gaya inline dengan object literal memang valid, tapi proyek besar cepat berantakan tanpanya.

StyleSheet.create untuk form

import { StyleSheet } from "react-native";
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 12,
  },
  input: {
    width: "80%",
    height: 44,
    borderWidth: 1,
    borderColor: "#cccccc",
    borderRadius: 8,
    paddingHorizontal: 12,
  },
});

Style di atas menampilkan beberapa hal penting: flex: 1 membuat container mengisi seluruh ruang, gap: 12 memberi jarak antar anak, dan satuan ukuran memakai angka (yang berarti dp) serta persen untuk lebar input.

#Flexbox di Mobile

Flexbox adalah sistem layout utama React Native. Berbeda dengan CSS web yang default-nya row, React Native memakai flexDirection: "column" sebagai default. Properti yang paling sering dipakai:

• flexDirection: row, column, dan kebalikannya.
• justifyContent: mengatur arah utama (misalnya center, space-between).
• alignItems: mengatur arah silang.
• flex: mengatur proporsi ruang yang diambil sebuah elemen.
• gap: jarak antar anak, mengurangi kebutuhan margin manual.

Layout baris dengan gap

import { View, Text, StyleSheet } from "react-native";
 
export function MenuRow() {
  return (
    <View style={styles.row}>
      <Text>Beranda</Text>
      <Text>Profil</Text>
      <Text>Pengaturan</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", gap: 16, alignItems: "center" },
});

#Satuan Ukuran: dp, px, dan Persen

#Density-Independent Pixels (dp)

Di React Native, semua angka tanpa satuan dianggap dp (density-independent pixel). Satu dp mewakili ukuran yang konsisten di layar dengan kerapatan berbeda — tinggi 44 di layar kecil dan besar terlihat sama secara fisik. Inilah mengapa kalian tidak perlu menulis px untuk dimensi.

#Persen dan Unit Lain

• Persen: width: "50%" mengambil separuh lebar parent.
• px: jarang dipakai; jika benar-benar butuh piksel fisik, gunakan satuan px dalam string seperti "1px".
• % untuk tinggi: juga didukung, tapi lebih sering flex dipakai untuk mengatur tinggi dinamis.

Aturan praktis: gunakan dp untuk ukuran tetap, persen atau flex untuk ukuran relatif, dan hindari px kecuali untuk border tipis.

#Kesalahan Umum Styling

#Teks Tidak Muncul

Teks yang diletakkan langsung di dalam View tanpa Text tidak akan dirender. Pastikan setiap string berada di dalam komponen Text.

#Layout Berantakan di Emulator

Layout yang terlihat berbeda antara iOS dan Android biasanya karena font default dan safe area. Gunakan SafeAreaView atau library safe-area-context untuk mengatasi notch. Ini akan kita bahas lagi saat navigasi di episode 6.

#Penutup

Episode 4 membekali kalian perangkat inti untuk membangun layar: komponen core untuk konten dan input, styling dengan StyleSheet.create, layout Flexbox dengan gap, dan pemahaman satuan dp, persen, dan px.

Inti yang harus dibawa pulang:

• View untuk layout, Text untuk teks, Image untuk gambar.
• ScrollView untuk konten statis; FlatList dan SectionList untuk data panjang.
• StyleSheet.create merapikan dan memvalidasi style.
• Flexbox di React Native default column, dan gap mengurangi margin manual.
• Angka style berarti dp; persen dan flex untuk ukuran relatif.
• Hati-hati dengan tipe style: angka dp, bukan string, kecuali untuk satuan khusus.

Di episode 5 selanjutnya kita akan membahas state, props, dan hooks: useState, useEffect, useRef, useMemo, dan useCallback, pola komposisi komponen, serta typing props dengan TypeScript — jantung logika interaktif aplikasi kalian.