This content originally appeared on DEV Community and was authored by sandatya widhi
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:
- Input nama mahasiswa menggunakan
TextInput
. - Tombol “Tambah” untuk menambahkan ke daftar.
- Daftar nama tampil dengan
FlatList
. - Jika data lebih dari 10, halaman bisa di-scroll.
Contoh tampilan:
This content originally appeared on DEV Community and was authored by sandatya widhi

sandatya widhi | Sciencx (2025-10-20T11:09:05+00:00) LATIHAN ANTARMUKA. Retrieved from https://www.scien.cx/2025/10/20/latihan-antarmuka/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.