Core Components React Native

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

View — Pengganti div

import { View } from 'react-native';

// View adalah building block utama layout
<View style={{ flex: 1, padding: 16 }}>
  <View style={{ backgroundColor: '#e0e0e0', padding: 8, borderRadius: 8 }}>
    {/* konten */}
  </View>
</View>

Text — Wajib untuk Semua Teks

import { Text } from 'react-native';

// SALAH: <View>Hello</View> — error!
// BENAR:
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>Hello World</Text>

// Nested Text untuk inline styling
<Text>
  Ini teks biasa dan <Text style={{ fontWeight: 'bold' }}>ini bold</Text>
</Text>

ScrollView vs FlatList

import { ScrollView, FlatList } from 'react-native';

// ScrollView — untuk konten pendek (render semua sekaligus)
<ScrollView>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  {/* ... */}
</ScrollView>

// FlatList — untuk list panjang (virtualized, render yang terlihat saja)
const data = [
  { id: '1', name: 'React Native' },
  { id: '2', name: 'Flutter' },
  { id: '3', name: 'Swift' },
];

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <Text style={{ padding: 16 }}>{item.name}</Text>
  )}
/>

Image

import { Image } from 'react-native';

// Local image
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Remote image (wajib kasih width + height)
<Image
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ width: 200, height: 200, borderRadius: 12 }}
/>

TextInput, Pressable, Switch

import { TextInput, Pressable, Switch, Text } from 'react-native';

<TextInput
  placeholder="Ketik sesuatu..."
  onChangeText={(text) => console.log(text)}
  style={{ borderWidth: 1, padding: 12, borderRadius: 8 }}
/>

<Pressable onPress={() => alert('Pressed!')}>
  <Text style={{ padding: 12, backgroundColor: '#007AFF', color: '#fff' }}>
    Tap Me
  </Text>
</Pressable>

<Switch value={isEnabled} onValueChange={setIsEnabled} />

Perbedaan dari Web

• Tidak ada div — pakai View
• Teks harus di Text — tidak bisa langsung di View
• Tidak ada CSS class — pakai StyleSheet atau inline style object
• Tidak ada hover — mobile tidak punya mouse cursor