06. Styling React Native Components

Pendahuluan

Saat membangun aplikasi mobile dengan React Native, tampilan antarmuka (UI) adalah hal yang sangat penting.
React Native menyediakan cara mudah untuk memberi gaya (styling) pada setiap komponen agar tampak menarik dan konsisten.

Pada materi ini, kita akan membahas:

1. Konsep Styling Components di React Native
2. Konsep Flexbox untuk Pengaturan Layout
3. Membuat Layout Berdasarkan Desain

---

A. Konsep Styling Components di React Native

React Native menggunakan sistem styling yang mirip dengan CSS, tetapi ditulis dalam bentuk JavaScript object.
Artinya, kita menuliskan gaya (style) langsung di dalam file .js atau .jsx.

Contoh sederhana:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Halo React Native!</Text>
      <Text style={styles.subtitle}>Styling membuat tampilan lebih menarik</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#333",
  },
  subtitle: {
    fontSize: 16,
    color: "gray",
  },
});

Penjelasan:

• StyleSheet.create() digunakan untuk mendefinisikan kumpulan gaya.
• Properti seperti fontSize, color, backgroundColor, margin, padding, dan lainnya mirip seperti di CSS.
• Styling diterapkan ke komponen dengan menambahkan style={styles.namaStyle}.

---

B. Konsep Flexbox

React Native menggunakan Flexbox untuk mengatur posisi dan ukuran elemen pada layar.
Dengan Flexbox, kita bisa dengan mudah membuat tampilan responsif tanpa perlu menghitung posisi secara manual.

🔹 Properti Flexbox yang sering digunakan:

Properti	Fungsi
flexDirection	Mengatur arah elemen (row = horizontal, column = vertikal)
justifyContent	Mengatur posisi elemen secara vertikal/horizontal
alignItems	Mengatur posisi elemen secara sejajar melintang
flex	Mengatur seberapa besar ruang yang diambil oleh elemen
gap	Memberi jarak antar elemen (fitur baru React Native)

Contoh:

Menampilkan tiga kotak sejajar horizontal dengan jarak sama rata.

import React from "react";
import { View } from "react-native";

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          width: 250,
        }}
      >
        <View style={{ width: 60, height: 60, backgroundColor: "red" }} />
        <View style={{ width: 60, height: 60, backgroundColor: "green" }} />
        <View style={{ width: 60, height: 60, backgroundColor: "blue" }} />
      </View>
    </View>
  );
}

Penjelasan:

• flexDirection: "row" → menata elemen secara horizontal.
• justifyContent: "space-between" → memberi jarak sama antar kotak.
• alignItems: "center" → memposisikan elemen sejajar secara vertikal di tengah.

---

C. Membuat Layout Berdasarkan Desain di React Native

Ketika kita mendapatkan desain UI dari Figma atau XD, kita dapat menerjemahkannya menjadi layout React Native dengan memanfaatkan kombinasi View, Flexbox, dan StyleSheet.

Contoh Desain Sederhana:

Tampilan profil pengguna:

[ Foto Profil ]
Nama: Andi Pratama
Deskripsi: Mahasiswa Mobile Programming
[ Tombol Edit Profil ]

Implementasi Layout-nya:

import React from "react";
import { View, Text, Image, Button, StyleSheet } from "react-native";

export default function Profile() {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: "https://via.placeholder.com/100" }}
        style={styles.avatar}
      />
      <Text style={styles.name}>Andi Pratama</Text>
      <Text style={styles.description}>
        Mahasiswa Mobile Programming, semester 5
      </Text>
      <View style={styles.button}>
        <Button title="Edit Profil" color="#007AFF" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
    backgroundColor: "#fff",
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  name: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  description: {
    textAlign: "center",
    color: "gray",
    marginVertical: 10,
  },
  button: {
    width: "60%",
    marginTop: 20,
  },
});

Penjelasan:

• Image digunakan untuk menampilkan foto profil.
• Text untuk menampilkan nama dan deskripsi.
• View digunakan sebagai wadah untuk menyusun elemen-elemen di layar.
• Button ditempatkan di dalam View agar mudah diatur lebarnya.
• Semua elemen diberi style sesuai desain UI.

---

Kesimpulan

Konsep	Penjelasan Singkat
Styling Components	Mengatur tampilan komponen menggunakan StyleSheet (mirip CSS).
Flexbox	Mengatur posisi dan tata letak elemen dengan mudah dan responsif.
Layout Berdasarkan Desain	Menerjemahkan desain UI (misal dari Figma) ke dalam kode React Native.

Dengan menguasai styling dan layout, kamu dapat membuat tampilan aplikasi yang menarik, rapi, dan responsif di berbagai ukuran layar.

---