React Native Components — Mobile

Core Components React Native Di React Native, kamu tidak bisa pakai HTML tags (div, span, img). Semua diganti dengan komponen native yang disediakan…

Komponen inti (core components) adalah balok bangunan bawaan React Native: View, Text, Image, Pressable, TextInput, ScrollView, dan FlatList. Di web kamu menyusun halaman dari tag HTML. Di React Native gak ada tag HTML sama sekali, dan saat aplikasi jalan, tiap komponen inti jadi view native milik iOS atau Android. Bayangin buku order Bu Rini yang berisi 1.000 nota. Bu Rini gak menempel semua nota di dinding sekaligus. Dia cuma membuka halaman yang sedang dibaca, plus beberapa halaman di sekitarnya, dan membalik saat perlu. Itu cara kerja FlatList. Menempel semuanya di dinding adalah ScrollView.

🧪 Tebakan cepat: Di layar pesanan kamu menulis <View>#13 Mbak Wulan</View>, teksnya langsung di dalam View seperti di div. Apa yang terjadi? Jawabannya ada di bagian "Teks wajib di dalam Text".

Komponen inti dan padanannya di web

React Native Padanan web Jadi apa di HP
View div yang gak bisa di-scroll UIView di iOS, ViewGroup di Android
Text p, span UITextView di iOS, TextView di Android
Image img UIImageView di iOS, ImageView di Android
TextInput input type="text" UITextField di iOS, EditText di Android
ScrollView div dengan overflow: scroll UIScrollView di iOS, ScrollView di Android
Pressable button View yang merespons sentuhan
FlatList ul + map, dengan virtualisasi ScrollView yang cuma merender baris di sekitar layar

Lima baris pertama mengikuti tabel di dokumentasi React Native. View adalah padanan div: kotak untuk layout, dan layout-nya memakai flexbox.

Teks wajib di dalam Text

// Salah: teksnya langsung di dalam View
<View>#13 Mbak Wulan</View>

// Benar
<View>
  <Text>#13 Mbak Wulan</Text>
</View>

Di web, teks boleh ada di mana saja. Di React Native cuma Text yang tahu cara mengatur dan menggambar huruf, karena dia yang jadi TextView atau UITextView. View gak punya kemampuan itu. Jadi di React Native 0.86, <View>#13 Mbak Wulan</View> gak menampilkan apa-apa, dan di mode development muncul error Text strings must be rendered within a <Text> component. Itu jawaban tebakannya. Aturan ini juga berlaku untuk angka: {order.kg} harus ada di dalam Text.

Untuk menebalkan sebagian teks, taruh Text di dalam Text:

<Text>Status: <Text style={{ fontWeight: 'bold' }}>Disetrika</Text></Text>

Image, Pressable, dan TextInput

<Image source={require('@/assets/images/icon.png')} style={{ width: 48, height: 48 }} />
<Image source={{ uri: 'https://example.com/nota-13.jpg' }} style={{ width: 120, height: 160 }} />

<Pressable onPress={() => console.log('buka order 13')}>
  <Text>#13 Mbak Wulan</Text>
</Pressable>

<TextInput value={cari} onChangeText={setCari} placeholder="Cari nama" />

Daftar order dengan FlatList

import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
import { HARGA_PER_KG, ORDERS, rupiah, type Order } from '@/data/orders';

function OrderRow({ order }: { order: Order }) {
  return (
    <Pressable style={styles.row} onPress={() => console.log('buka order', order.id)}>
      <View>
        <Text style={styles.nota}>#{order.id} {order.nama}</Text>
        <Text>{order.kg} kg · {rupiah(order.kg * HARGA_PER_KG)}</Text>
      </View>
      <Text style={styles.status}>{order.status}</Text>
    </Pressable>
  );
}

export default function Index() {
  return (
    <FlatList
      data={ORDERS}
      keyExtractor={(order) => order.id}
      renderItem={({ item }) => <OrderRow order={item} />}
    />
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', justifyContent: 'space-between', padding: 16, backgroundColor: '#fff' },
  nota: { fontSize: 16, fontWeight: '600' },
  status: { fontWeight: '600', color: '#1d4ed8' },
});

ORDERS ada di src/data/orders.ts: { id: '12', nama: 'Pak Darto', kg: 3, status: 'Dicuci' }, { id: '13', nama: 'Mbak Wulan', kg: 2, status: 'Disetrika' }, { id: '14', nama: 'Mas Yoga', kg: 5, status: 'Siap diambil' }, HARGA_PER_KG = 7000, dan rupiah() yang menulis Rp 14.000. Datanya contoh, tiga order aktif di papan Bu Rini. Nanti di pelajaran API, daftar ini diambil dari server.

Baris keyExtractor renderItem menampilkan
1 '12' #12 Pak Darto, 3 kg · Rp 21.000, Dicuci
2 '13' #13 Mbak Wulan, 2 kg · Rp 14.000, Disetrika
3 '14' #14 Mas Yoga, 5 kg · Rp 35.000, Siap diambil

ScrollView atau FlatList

Untuk 3 order, keduanya sama saja. Bedanya muncul saat datanya 1.000 order. ScrollView merender semua anaknya sekaligus: 1.000 baris dibuat walau cuma 8 yang terlihat. FlatList merender batch pertama 10 baris (initialNumToRender), lalu mengisi sampai windowSize 21: layar yang terlihat plus paling banyak 10 layar di atas dan 10 di bawah. Di posisi paling atas dengan 8 baris per layar, itu paling banyak 8 + 10 × 8 = 88 baris. Sisanya baru dibuat saat kamu menggulir, dan yang jauh di belakang dilepas lagi dari memori.

Jadi untuk daftar panjang, pakai FlatList. ScrollView cocok untuk konten pendek yang ukurannya jelas, misalnya halaman detail satu order.

⚠️ Jebakan yang sering ketemu

TL;DR: React Native gak punya tag HTML. View padanan div (kotak layout), Text untuk semua teks, Image untuk gambar (gambar dari internet butuh width dan height), Pressable dengan onPress untuk yang bisa diketuk, TextInput dengan onChangeText untuk isian. Teks dan angka wajib di dalam Text, kalau gak: gak tampil dan muncul Text strings must be rendered within a <Text> component. Untuk daftar order pakai FlatList dengan data, keyExtractor (string unik, misalnya order.id), dan renderItem ({ item } per baris). ScrollView merender semua 1.000 baris, FlatList paling banyak 88 di posisi atas (8 baris per layar, windowSize 21).

Yang akan kamu pelajari