LATIHAN ANTARMUKA

Latihan 1: TextInput dan State

Soal

Buat aplikasi React Native yang memiliki:

• Satu komponen TextInput untuk mengetik nama.
• Menampilkan teks “Halo, [nama]!” secara otomatis ketika pengguna mengetik.

Contoh tampilan:

---

Latihan 2: ScrollView

Soal

Buat tampilan yang menampilkan 20 teks berbeda menggunakan ScrollView agar dapat di-scroll secara vertikal.

Hint: Gunakan perulangan array [...Array(20)].

Contoh tampilan:

---

Latihan 3: FlatList

Soal

Buat aplikasi yang menampilkan daftar produk menggunakan FlatList dengan data:

[
  { id: '1', nama: 'Laptop' },
  { id: '2', nama: 'Keyboard' },
  { id: '3', nama: 'Mouse' },
  { id: '4', nama: 'Monitor' }
]

Setiap item ditampilkan dalam Text dengan garis pemisah di bawahnya.

Contoh tampilan:

Latihan 4: Layout Flexbox

Soal

Buat layout sederhana yang menampilkan 3 kotak warna sejajar horizontal (baris) dengan jarak antar elemen sama rata.

Contoh tampilan:

Latihan 5 (Mini Project): Aplikasi Daftar Nama Mahasiswa

Soal

Buat aplikasi kecil yang memiliki fitur:

1. Aplikasi memiliki input teks (TextInput) untuk menulis nama mahasiswa.
2. Terdapat tombol "Tambah" yang berfungsi menambahkan nama ke daftar.
3. Daftar nama ditampilkan menggunakan FlatList.
4. Jika jumlah data lebih dari 10, daftar dapat di-scroll.
5. Gunakan Flexbox untuk mengatur tata letak antara komponen input dan tombol agar sejajar secara horizontal.
6. Gunakan View sebagai container utama dengan padding dan margin yang sesuai agar tampilan lebih rapi.

Contoh tampilan: