StyleSheet — apa itu, membuat gaya di React Native

Apa itu StyleSheet?

StyleSheet — API bawaan React Native untuk mendefinisikan gaya komponen. Berbeda dengan CSS dalam pengembangan web, RN menggunakan objek JavaScript untuk mendeskripsikan gaya. StyleSheet.create — metode utama yang menerima objek dengan gaya dan mengembalikan objek dengan pengidentifikasi numerik.

StyleSheet adalah bagian dari inti React Native dan tidak memerlukan instalasi paket tambahan. Menurut data Meta (2026), 95% proyek React Native menggunakan StyleSheet.create untuk gaya statis. Alternatif: styled-components, Emotion, NativeWind (Tailwind untuk RN) — tetapi StyleSheet bawaan tetap menjadi standar untuk inti.

Sejarah dan evolusi

Dalam versi awal React Native (2015), gaya didefinisikan secara eksklusif melalui objek inline. StyleSheet.create muncul di RN 0.4 sebagai optimasi. Konsepnya diambil dari CSS: pisahkan gaya dari logika untuk keterbacaan dan kinerja. Selama bertahun-tahun API diperluas: absoluteFill, hairlineWidth, flatten ditambahkan.

StyleSheet.create vs gaya inline

Perbedaan antara StyleSheet.create dan gaya inline sangat penting untuk kinerja. Gaya inline — objek JavaScript biasa, dibuat setiap kali render komponen. StyleSheet.create — objek yang dibuat satu kali saat memuat modul dan diubah menjadi ID numerik.

Saat mengirimkan gaya inline, React Native setiap kali mengirim seluruh objek melalui jembatan JavaScript-Native. Untuk komponen dengan gaya kompleks, ini adalah puluhan properti yang dikirim setiap kali render. StyleSheet.create hanya mengirimkan pengidentifikasi numerik, mengurangi beban jembatan.

// StyleSheet.create — pendekatan yang dioptimalkan
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — membuat objek baru setiap kali render
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Kapan menggunakan inline: untuk gaya dinamis yang bergantung pada status (pressed, selected, active). Untuk gaya statis selalu gunakan StyleSheet.create. Aturan: statis → create, dinamis → fungsi inline.

Tata letak Flexbox melalui StyleSheet

Flexbox — satu-satunya mekanisme tata letak di React Native (CSS Grid tidak didukung, dan float tidak ada). StyleSheet.create digunakan untuk mendeskripsikan wadah flex dan elemen anaknya. Properti utama: flex (koefisien pengisian), flexDirection (row | column), justifyContent, AlignItems.

Secara default flexDirection di React Native adalah column (di CSS — row). Ini adalah hal pertama yang perlu diingat saat beralih dari pengembangan web. Semua View secara default adalah wadah flex. Untuk memusatkan elemen, gunakan AlignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Penting: di React Native semua ukuran ditentukan tanpa satuan (hanya angka). Persentase berfungsi, tetapi hanya untuk width dan height relatif terhadap induk. margin dan padding menerima angka. Untuk adaptabilitas gunakan flex alih-alih persentase — ini lebih andal di berbagai layar.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

API StyleSheet mencakup beberapa metode selain create. StyleSheet.flatten menggabungkan array gaya menjadi satu objek — berguna untuk komposisi dan meneruskan gaya ke komponen pihak ketiga. StyleSheet.hairlineWidth mengembalikan lebar garis minimum yang terlihat pada perangkat.

StyleSheet.absoluteFill — gaya yang telah ditentukan sebelumnya { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Digunakan untuk lapisan overlay, jendela modal, dan penempatan absolut di seluruh layar. StyleSheet.absoluteFillObject — hal yang sama tetapi dalam bentuk objek untuk diperluas.

// flatten — menggabungkan gaya
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — garis minimal
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth berguna untuk pemisah dan batas — selalu terlihat seperti 1 piksel fisik terlepas dari kerapatan layar. Pada layar Retina ini 0.5 titik logis, pada layar biasa — 1 titik. Jangan gunakan hairlineWidth untuk elemen yang harus memiliki ukuran yang ditentukan secara ketat.

Tata letak responsif dengan Dimensions API

Dimensions API digunakan bersama dengan StyleSheet untuk tata letak responsif untuk berbagai ukuran layar. Dimensions.get('window') mengembalikan lebar dan tinggi jendela. Untuk pembaruan reaktif saat rotasi layar, gunakan hook useWindowDimensions dari React Native.

Meskipun StyleSheet.create tidak mendukung media queries seperti CSS, Anda dapat menghitung nilai berdasarkan Dimensions di dalam create atau menggunakan gaya dinamis melalui fungsi. Untuk breakpoints buat gaya terpisah untuk rentang lebar yang berbeda.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions secara otomatis diperbarui saat rotasi layar dan perubahan ukuran jendela di tablet dengan Split View. Untuk SSR (React Native Web) pastikan Dimensions.get dipanggil setelah komponen dipasang untuk menghindari perbedaan antara server dan klien.

Organisasi gaya dalam proyek

Organisasi StyleSheet dalam proyek mempengaruhi kemudahan pemeliharaan dan penggunaan kembali kode. Tiga pendekatan: gaya lokal di dalam komponen (styles.js di samping komponen), gaya global (theme.js dengan konstanta warna, spasi, tipografi) dan gaya modular melalui komposisi.

Struktur yang direkomendasikan: theme.js dengan konstanta warna, ukuran dan tipografi; Component.styles.js di samping setiap komponen untuk gaya spesifiknya; StyleSheet.flatten untuk kombinasi gaya dasar dan spesifik. Untuk proyek besar gunakan Design System dengan pembuatan tema.

// theme.js — konstanta global
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Keuntungan organisasi modular: sumber kebenaran tunggal untuk warna dan spasi, penyederhanaan refactoring (Anda mengubah primary — semua tombol diperbarui), penggunaan kembali gaya melalui flatten, keterbacaan dan prediktabilitas kode. Untuk proyek TypeScript tambahkan tipe untuk tema melalui declare module.