ScrollView — apa itu, kontainer scroll dan React Native

Apa itu ScrollView di React Native

ScrollView — adalah komponen React Native yang membungkus kontennya ke dalam kontainer yang dapat digulir. Jika konten melampaui batas layar, pengguna dapat menggulirnya secara vertikal atau horizontal. ScrollView me-render semua elemen anak saat dipasang, terlepas dari apakah elemen tersebut terlihat di layar atau tidak.

Berbeda dengan FlatList yang hanya me-render elemen yang terlihat (lazy rendering), ScrollView membuat semua representasi native sekaligus. Ini membuat ScrollView nyaman untuk formulir, halaman pengaturan, kartu produk dalam satu layar — di mana pun jumlah elemen anak sedikit (hingga 20-30) atau jumlah pastinya tidak diketahui sebelumnya.

Menurut React Native Using ScrollView, 2024, ScrollView mendukung pengguliran bersarang (misalnya ScrollView di dalam ScrollView), efek bounce saat mencapai tepi, indikator gulir, jepretan posisi (snap), dan penanganan gerakan. Di iOS, ScrollView secara otomatis menambahkan jarak di bawah SafeArea melalui contentInsetAdjustmentBehavior.

Properti dan API komponen ScrollView

ScrollView menyediakan kumpulan properti yang kaya untuk mengontrol perilaku pengguliran, tampilan, dan interaktivitas. Mari kita lihat kelompok utama: kontrol pengguliran, pengaturan visual, event, dan fitur platform.

Kontrol arah dan pengguliran

horizontal — mengalihkan arah pengguliran dari vertikal (default) ke horizontal. scrollEnabled — menonaktifkan pengguliran jika diperlukan. showsVerticalScrollIndicator dan showsHorizontalScrollIndicator mengontrol tampilan indikator gulir. bounces (iOS) mengaktifkan/menonaktifkan efek bounce saat mencapai tepi konten.

Event ScrollView

Event utama — onScroll, yang dipanggil pada setiap pengguliran dan mengirimkan objek dengan nativeEvent yang berisi contentOffset (posisi saat ini), contentSize (ukuran konten), layoutMeasurement (ukuran area yang terlihat). onMomentumScrollEnd dipanggil setelah pengguliran inersia selesai. onScrollEndDrag — saat pengguna melepaskan layar. Event ini digunakan untuk mengimplementasikan pengguliran tak terbatas, paralaks, dan pemuatan lambat.

Kontrol programatis melalui ref

ScrollView menyediakan metode untuk kontrol programatis melalui referensi: scrollTo({x, y, animated}) menggulir ke koordinat yang ditentukan, scrollToEnd({animated}) — ke akhir konten, flashScrollIndicators() — untuk sementara menampilkan indikator gulir.

const scrollRef = useRef(null);

// Gulir ke atas
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Gulir ke akhir
scrollRef.current.scrollToEnd({ animated: true });

Kontrol programatis pengguliran sering digunakan di chat (gulir otomatis ke pesan terakhir), formulir (gulir ke bidang yang salah), dan karusel (gulir programatis).

Perbedaan ScrollView dan FlatList

Pilihan antara ScrollView dan FlatList — salah satu keputusan arsitektur utama di React Native. Kedua komponen menyediakan pengguliran, tetapi menggunakan strategi rendering yang berbeda secara fundamental. ScrollView me-render semuanya sekaligus, FlatList — hanya elemen yang terlihat.

Aturan memilih: ScrollView — untuk layar di mana jumlah elemen anak diketahui dan tidak melebihi 20-30 (profil pengguna, formulir pengaturan, halaman produk). FlatList — untuk daftar dengan jumlah elemen yang berpotensi besar (umpan berita, katalog produk, pesan chat). Jika konten heterogen (judul, formulir, kartu, footer) — ScrollView lebih disukai, karena FlatList mengharapkan elemen homogen.

Pengguliran horizontal dan paginasi

ScrollView mendukung pengguliran horizontal melalui properti horizontal, yang membuatnya ideal untuk karusel, galeri gambar, tab, dan daftar horizontal. Dalam kombinasi dengan properti pagingEnabled (iOS) atau snapToInterval, ScrollView berubah menjadi komponen untuk navigasi halaman.

Karusel horizontal

Properti horizontal mengalihkan arah pengguliran. pagingEnabled (iOS) mengaktifkan pengguliran halaman, di mana gulir hanya berhenti di batas elemen. snapToInterval mengatur langkah jepretan dalam piksel untuk kedua platform.

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

Dalam karusel ini, pagingEnabled secara otomatis menjepret gulir ke batas setiap gambar. onMomentumScrollEnd memungkinkan memperbarui indikator halaman saat ini. Karusel semacam itu berfungsi secara native dan mendukung pengguliran inersia.

Jepretan ke posisi (Snap)

Untuk langkah jepretan kustom, gunakan snapToInterval (ukuran langkah dalam piksel) dan snapToAlignment (start, center, end). Dengan snapToOffsets, Anda dapat mengatur array posisi spesifik untuk jepretan. Ini berguna untuk daftar horizontal dengan kartu berukuran berbeda.

Contoh praktis dengan ScrollView

Mari kita lihat dua skenario umum: layar dengan formulir (gulir vertikal) dan daftar kategori horizontal. Keduanya menggunakan ScrollView dengan properti berbeda untuk perilaku optimal.

Contoh 1: layar profil dengan formulir

Halaman edit profil berisi elemen heterogen: avatar, beberapa bidang input, sakelar, dan tombol simpan. ScrollView memungkinkan menggulir seluruh halaman secara utuh, bukan setiap blok secara terpisah.

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

Properti keyboardShouldPersistTaps: 'handled' memungkinkan menggulir dan berinteraksi dengan formulir saat keyboard terbuka. contentContainerStyle menerapkan margin ke seluruh konten. Pola ini digunakan di semua layar dengan formulir di React Native.

Contoh 2: daftar kategori horizontal

Untuk navigasi kategori (chat, filter, tab) digunakan ScrollView horizontal dengan chip. Komponen semacam ini sering ditemukan di aplikasi marketplace dan jejaring sosial.

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

ScrollView horizontal dengan indikator dinonaktifkan — standar untuk bilah kategori. Setiap chip adalah komponen terpisah dengan status pemilihan. Properti showsHorizontalScrollIndicator: false menyembunyikan bilah gulir, sesuai dengan ekspektasi pengguna aplikasi seluler.