Lewati ke konten utama
menjadi.dev
Mobile Foundations Menengah Mobile 6 chapter

Mobile UI, Styling & Layout

Flexbox, SafeAreaView, dan Design System untuk Mobile

Mobile UI berbeda dari web — tidak ada CSS grid, tidak ada hover, tapi ada SafeArea, notch, keyboard avoidance, dan gesture. Modul ini mengajarkan styling di React Native: Flexbox (bedanya dengan web), StyleSheet API, SafeAreaView dan insets, platform-specific styling (Platform module), dark mode, dan responsive breakpoint untuk tablet vs phone.

Prasyarat

Modul 42 (React Native & Expo Fundamentals).

Kenapa Ini Penting

UI adalah 80% dari mobile app experience. User langsung menilai kualitas dari tampilan. Salah layout = app kelihatan amatir. Modul ini mengajarkan fondasi visual yang solid.

Daftar Chapter

  1. Chapter 43.1

    Flexbox di React Native: Layout yang Berbeda

    Kuasi Flexbox untuk layout mobile — rule yang beda dengan web
  2. Chapter 43.2

    SafeAreaView & Platform-Specific Styling

    Notch, Dynamic Island, dan status bar — menangani safe area
  3. Chapter 43.3

    Dark Mode & Theming

    Implementasi light/dark mode dengan sistem tema yang scalable
  4. Chapter 43.4

    Responsive Design untuk Mobile

    Adaptasi UI untuk berbagai ukuran layar — dari iPhone SE sampai iPad
  5. Chapter 43.5

    List & Scroll Performance

    FlatList, SectionList, dan optimasi rendering list panjang
  6. Chapter 43.6

    Animasi Dasar dengan Animated API

    Fade, slide, scale — membawa UI mobile menjadi hidup