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:

…


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:

  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:


This content originally appeared on DEV Community and was authored by sandatya widhi


Print Share Comment Cite Upload Translate Updates
APA

sandatya widhi | Sciencx (2025-10-20T11:09:05+00:00) LATIHAN ANTARMUKA. Retrieved from https://www.scien.cx/2025/10/20/latihan-antarmuka/

MLA
" » LATIHAN ANTARMUKA." sandatya widhi | Sciencx - Monday October 20, 2025, https://www.scien.cx/2025/10/20/latihan-antarmuka/
HARVARD
sandatya widhi | Sciencx Monday October 20, 2025 » LATIHAN ANTARMUKA., viewed ,<https://www.scien.cx/2025/10/20/latihan-antarmuka/>
VANCOUVER
sandatya widhi | Sciencx - » LATIHAN ANTARMUKA. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/20/latihan-antarmuka/
CHICAGO
" » LATIHAN ANTARMUKA." sandatya widhi | Sciencx - Accessed . https://www.scien.cx/2025/10/20/latihan-antarmuka/
IEEE
" » LATIHAN ANTARMUKA." sandatya widhi | Sciencx [Online]. Available: https://www.scien.cx/2025/10/20/latihan-antarmuka/. [Accessed: ]
rf:citation
» LATIHAN ANTARMUKA | sandatya widhi | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.

Related Posts