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. Input nama mahasiswa menggunakan TextInput.
2. Tombol “Tambah” untuk menambahkan ke daftar.
3. Daftar nama tampil dengan FlatList.
4. Jika data lebih dari 10, halaman bisa di-scroll.

Contoh tampilan: