Soal 1 : Implementasi Styling & Flexbox
Buat komponen ProfileCard di file ProfileCard.jsx yang menampilkan:
- Foto profil (gunakan Image)
- Nama (gunakan Text)
- Deskripsi singkat (gunakan Text)
- Terapkan Flexbox untuk merapikan tampilan agar foto berada di sebelah kiri, dan teks berada di sebelah kanan.
Gunakan StyleSheet untuk mengatur:
- Foto profil memiliki ukuran 80x80 px, berbentuk bulat.
- Nama memiliki font bold dan ukuran 18.
- Deskripsi memiliki ukuran font 14 dan warna abu-abu.
Petunjuk: Gunakan flexDirection: 'row' untuk mengatur tata letak.
Soal 2: Menggunakan ScrollView untuk List Item
Buat komponen ItemList.jsx yang menampilkan daftar buku dalam bentuk ListView menggunakan ScrollView.
- Gunakan array berisi minimal 5 nama buku.
- Tampilkan setiap item dalam Text dengan margin, padding, dan borderBottomWidth agar lebih rapi.
- Pastikan ScrollView memungkinkan daftar untuk di-scroll jika melebihi layar.
Petunjuk: Gunakan ScrollView dan map() untuk menampilkan daftar buku.
Soal 3: Menggunakan Export & Import di React Native
- Buat file HomeScreen.jsx yang menampilkan ProfileCard dan ItemList dalam satu layar.
- Import komponen ProfileCard dan ItemList ke dalam HomeScreen.jsx.
- Bungkus tampilan dengan SafeAreaView.
- Pastikan layout menggunakan flex: 1 agar responsif.
Petunjuk:
- Gunakan export default di setiap file komponen.
- Gunakan import di HomeScreen.js untuk menggabungkan semua komponen.
Outputnya :
Top comments (0)