1. Home
  2. Docs
  3. Kurikulum React Native Salman Hack
  4. Day 3
  5. Tugas Component Core, Styling & Flexbox

Tugas Component Core, Styling & Flexbox

Membuat Layout Aplikasi

Pada tugas kali ini, buatlah 3 halaman Splash, LoginScreen, Homescreen di dalam folder “screen” yang telah dibuat kemarin.simpan gambar kedalam asset .

Yup, sesuai dengan apa yang ada di pikiran Anda, tugas kali ini adalah membangun layout aplikasi dari tugas Mockup.

Fokus pada tugas ini adalah mengatur layout dan styling dasar, tanpa harus menambahkan library baru. Jadi bagi Anda yang membuat mockup dengan desain yang dirasa sulit untuk diimplementasikan pada React Native/Expo kali ini, dapat lebih fokus pada hal-hal yang sederhana, diantaranya:

  • Styling dasar: backgroundColor, padding, margin, borderWidth, borderColor, borderRadius.
  • Styling teks: color, fontSize, fontWeight.
  • Styling gambar: height, width, resizeMode.
  • Styling flexbox: flex, flexDirection, alignItems, justifyContent.

Anda juga boleh menambahkan styling property lainnya sesuai kebutuhan pada desain mockup Anda.

Atau Anda dapat juga mengerjakan tugas ini dengan menggunakan desain mockup berikut (identitas di halaman Tentang Saya bisa diubah menggunakan identitas Anda ataupun fiktif):

catatan asset dari mockup ini:

Mockup ini dapat diakses dengan menggunakan link figma berikut:
https://www.figma.com/file/hygHSu5UCtffqgvd1xGcLs/Bmka-layout?node-id=1%3A4

link pengumpulan : https://forms.gle/YQCsmZeTAs88SPZK9