Tujuan Pembelajaran

Memahami perbedaan CSS web dengan StyleSheet di React Native
Mampu menerapkan Flexbox untuk layout di React Native
Mengerti konsep inline styles vs StyleSheet.create

Analogi

Diagram


      CSS Web:
.class { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px; }

StyleSheet RN:
const styles = StyleSheet.create({
  container: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12 }
});

Bedanya: camelCase, gak ada unit px, gak ada class selector, layout default: flex-column.

StyledSheet seperti CSS tapi dengan camelCase, tanpa unit, dan tanpa cascade. Mirip seperti CSS-in-JS library.

Penjelasan Konsep

StyleSheet di React Native mirip CSS-in-JS — kamu menulis style sebagai JavaScript object dengan camelCase property. Tidak ada CSS cascade, tidak ada class selector, tidak ada pseudo-class (:hover), tidak ada media query.

Konvensi: nama property pakai camelCase (backgroundColor bukan background-color), value number otomatis dalam density-independent pixels (dp), string untuk persen atau warna. StyleSheet.create() membuat style object yang di-optimize (dikirim sekali ke native side, bukan setiap render).

Flexbox: React Native mengandalkan Flexbox untuk layout — tidak ada Grid, tidak ada float, tidak ada absolute positioning (selain kasus spesifik). Default flexDirection adalah COLUMN (beda dengan web yang ROW). Properti sama: flex, justifyContent, alignItems, alignSelf, flexWrap.

Layout penting: (1) flex: 1 = isi sisa space yang available — seperti flex-grow di web. (2) marginHorizontal/marginVertical = shortcut. (3) paddingHorizontal/paddingVertical = shortcut. (4) Dimensions API untuk ukuran layar.

Best practice: StyleSheet.create() di luar component (bukan di dalam render). Pisahkan style berdasarkan komponen. Gunakan Platform.select() untuk style berbeda per platform.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan CSS web dengan StyleSheet di React Native., mampu menerapkan Flexbox untuk layout di React Native., dan mengerti konsep inline styles vs StyleSheet.create. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Styling Dasar, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

StyledSheet seperti CSS tapi dengan camelCase, tanpa unit, dan tanpa cascade. Mirip seperti CSS-in-JS library. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Platform.select memberi shadow berbeda untuk iOS (shadowColor/Offset) dan Android (elevation). StyleSheet.create di luar component agar tidak dibuat ulang setiap render.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { StyleSheet, View, Text, Platform } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
    paddingHorizontal: 16,
    paddingTop: Platform.OS === "ios" ? 60 : 40,
  },
  card: {
    backgroundColor: "white",
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    ...Platform.select({
      ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8 },
      android: { elevation: 4 },
    }),
  },
  title: { fontSize: 18, fontWeight: "600", marginBottom: 8 },
  body: { fontSize: 14, color: "#666", lineHeight: 20 },
});

export default function Card({ title, body }: { title: string; body: string }) {
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.body}>{body}</Text>
      </View>
    </View>
  );
}

Penjelasan Kode

Platform.select memberi shadow berbeda untuk iOS (shadowColor/Offset) dan Android (elevation). StyleSheet.create di luar component agar tidak dibuat ulang setiap render.

Prompt AI

Minta AI untuk membuat design system sederhana dengan StyleSheet: color palette, typography scale, spacing scale, dan shadow presets. Implementasikan dalam format StyleSheet.create.

Pertanyaan Reflektif

Bandingkan workflow styling di CSS web dengan StyleSheet React Native. Mana yang lebih kamu sukai? Apa yang bikin frustrasi?