Dasar Pemrograman, Komponen, dan Tata Letak Antarmuka

Pengembangan antarmuka di React Native memanfaatkan sintaks JSX. Berbeda dengan HTML pada website, kamu tidak menggunakan tag pembungkus seperti <div> atau tag teks <p>. Wadah utama elemen antarmuka didefinisikan dengan <View>, sedangkan semua keluaran karakter teks wajib dibungkus oleh komponen <Text>. Seluruh nama fungsi komponen wajib diawali dengan huruf kapital.

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

export default function KartuProfil() {
  return (
    <View style={styles.wadah}>
      <Text style={styles.teks}>Selamat Datang</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wadah: { padding: 16, backgroundColor: '#f2f2f2' },
  teks: { fontSize: 16, color: '#333333' }
});

Tata letak antarmuka diatur menggunakan Flexbox. Perbedaan penting dengan CSS web adalah nilai bawaan dari flexDirection pada React Native adalah 'column', sehingga elemen anak secara default akan disusun menurun ke bawah. Untuk menata elemen secara horizontal menyamping, ubah nilainya menjadi flexDirection: 'row'. Properti lain seperti justifyContent mengontrol perataan sepanjang sumbu utama, alignItems mengontrol perataan pada sumbu silang, dan gap memberikan jarak pemisah antar elemen anak secara langsung.

Dalam hal interaksi pengguna, komponen <Pressable> digunakan untuk mendeteksi sentuhan tombol secara fleksibel. Untuk menampilkan daftar data berulang, gunakan selalu <FlatList> daripada <ScrollView>. FlatList hanya merender item yang sedang terlihat di layar gawai (virtualisasi), sehingga memori perangkat tetap hemat walau data berjumlah ribuan item.

Untuk kebutuhan adaptasi layar, manfaatkan hook useWindowDimensions() serta komponen SafeAreaView agar konten tidak tertutup notch kamera depan ponsel. Animasi antarmuka berkinerja tinggi dapat diwujudkan menggunakan pustaka react-native-reanimated, yang menjalankan kalkulasi transisi langsung di thread antarmuka pada kecepatan 60 bingkai per detik tanpa terganggu komputasi logika JavaScript.