View: apa itu, properti kontainer dan React Native

Apa itu View di React Native

View adalah komponen fundamental React Native yang berfungsi sebagai kontainer untuk komponen lain. Ia mendukung penataan gaya melalui StyleSheet, tata letak melalui Flexbox, pemrosesan sentuhan, animasi, dan transformasi. View adalah abstraksi atas elemen kontainer native: UIView di iOS dan android.view.View di Android.

Di React Native, elemen HTML tidak dapat digunakan — sebagai gantinya semua tata letak dibangun dari View. Bahkan Text dan Image biasanya dibungkus dalam View untuk penentuan posisi. Komponen bisa kosong (hanya kontainer) atau berisi sejumlah elemen anak pada kedalaman berapa pun.

View mendukung perenderan di kedua platform dari satu kode JavaScript. Properti Flexbox, margin, latar belakang, bayangan, dan batas bekerja sama di iOS dan Android. Perbedaan platform minimal — misalnya, bayangan di iOS menggunakan shadowColor/shadowOffset, dan di Android menggunakan elevation.

Menurut React Native Layout Docs, 2024, View dioptimalkan untuk perangkat seluler: ia tidak membuat representasi native yang tidak perlu saat optimasi flatten dan memproses pembaruan berjenjang dengan benar saat gaya induk berubah.

Properti dan API komponen View

Komponen View memiliki seperangkat props yang kaya untuk mengelola tampilan, posisi, dan interaktivitas. Semua props terbagi menjadi beberapa kategori: gaya, peristiwa sentuhan, aksesibilitas, dan fitur platform. Mari kita lihat kelompok-kelompok utama.

Props gaya View

View mendukung semua properti CSS standar untuk platform seluler. Yang utama: flexDirection, justifyContent, alignItems untuk penentuan posisi; margin, padding untuk jarak; backgroundColor, borderRadius untuk tampilan; width, height, maxHeight untuk ukuran.

Peristiwa sentuhan dan gerakan

View dapat memproses peristiwa sentuhan melalui props onStartShouldSetResponder, onMoveShouldSetResponder, dan onResponderGrant. Peristiwa ini memungkinkan implementasi gerakan kustom tanpa pustaka. Untuk klik standar, gunakan onTouchStart, onTouchEnd, dan onPress (melalui Pressable atau TouchableOpacity).

Props platform

Di iOS, shadowColor, shadowOffset, shadowOpacity, shadowRadius tersedia untuk bayangan. Di Android, properti ini diabaikan — sebagai gantinya digunakan elevation. Callback onLayout dipanggil saat ukuran View berubah, yang berguna untuk tata letak adaptif.

Tata letak dengan View dan Flexbox

Flexbox adalah satu-satunya mekanisme tata letak di React Native (berbeda dengan Web yang memiliki Grid dan Float). Semua penentuan posisi elemen dilakukan melalui properti Flexbox dari komponen View. Secara default, flexDirection di View diatur ke column, bukan row seperti di Web, yang sesuai dengan orientasi vertikal layar seluler.

Properti Flexbox utama di View

flexDirection menentukan arah sumbu utama: column (default) atau row. justifyContent mengelola distribusi di sepanjang sumbu utama (flex-start, center, space-between). alignItems — di sepanjang sumbu silang (stretch — nilai default). flex menentukan bagian ruang yang tersedia untuk elemen anak.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

Contoh menunjukkan struktur tipikal: View luar — kartu, row dalam — baris dengan avatar dan blok teks, content — kolom dengan nama dan peran. Struktur View bertumpuk seperti ini adalah standar untuk setiap layar React Native.

Perbedaan View dengan HTML div

Meskipun View secara konseptual mirip dengan HTML div, ada perbedaan utama di antara keduanya yang penting dipahami saat memindahkan kode dari Web ke React Native. Perbedaan ini menyangkut perenderan, gaya, dan perilaku default.

Perbedaan paling penting — default flexDirection: column. Ini berarti tanpa pengaturan eksplisit, elemen anak ditempatkan secara vertikal, bukan horizontal. Perbedaan kedua: width dan height View secara default meregang ke seluruh ruang yang tersedia dari induk (analog dengan width: 100% di CSS).

Contoh praktis dengan View

Mari kita lihat dua contoh nyata penggunaan View di aplikasi React Native: memusatkan konten di seluruh layar dan membuat kisi adaptif dari kartu. Kedua pola ini ditemukan di setiap proyek.

Contoh 1: layar placeholder dengan pemusatan

Untuk membuat keadaan kosong (empty state), gunakan View dengan flex: 1 dan pemusatan di kedua sumbu. Ini adalah pola standar untuk layar pemuatan, kesalahan, dan daftar kosong.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

Kombinasi justifyContent: center dan alignItems: center di View dengan flex: 1 memusatkan konten di kedua sumbu di seluruh layar. Ini adalah pola penggunaan View yang paling umum di React Native.

Contoh 2: kisi kartu dengan Flexbox

Untuk menampilkan dua kolom produk atau artikel, gunakan View dengan flexDirection: row, flexWrap: wrap dan View anak dengan lebar tetap. Pola ini menggantikan CSS Grid di React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

Dalam contoh ini, View luar dengan flexWrap: wrap berfungsi sebagai padanan CSS Grid. Setiap kartu menempati 48% lebar, menyisakan celah di antara kolom. Ini adalah pola tipikal untuk katalog dan umpan konten.