0Pricing
React Native Academy · Pelajaran

Komponen View sebagai Wadah

Gunakan View sebagai wadah tata letak utama, susun beberapa View secara bertingkat untuk membangun layar terstruktur, dan pahami pemetaannya ke kotak UI bawaan.

Komponen View sebagai Wadah adalah pelajaran React Native Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Native Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Native Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

What Is the View Component?

Meet View — the basic box you build every screen with. It is a rectangle that holds other components, mapping to a real native box on iOS and Android.

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

export default function App() {
  return (
    <View>
      <Text>I am inside a View!</Text>
    </View>
  );
}

View Maps to Native UI Boxes

Every View you write becomes a real native box on the device — not HTML in a browser. That is why your app feels as smooth as one built in Swift or Kotlin.

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

// A simple colored box rendered natively
export default function Box() {
  return (
    <View style={styles.box} />
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#4f86f7',
    borderRadius: 12,
  },
});

Nesting Views for Structure

The real power is nesting: put Views inside Views to build rows, columns, and sections. Every View is a Flexbox container, so children just line up.

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

export default function Layout() {
  return (
    <View style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Header</Text>
      </View>
      <View style={styles.body}>
        <Text>Body content here</Text>
      </View>
      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1 },
  header: { height: 60, backgroundColor: '#333', justifyContent: 'center', alignItems: 'center' },
  body: { flex: 1, padding: 16 },
  footer: { height: 50, backgroundColor: '#eee', justifyContent: 'center', alignItems: 'center' },
  headerText: { color: '#fff', fontWeight: 'bold' },
});

View Styling: backgroundColor and Borders

Style a View with the style prop. Reach for backgroundColor, borderRadius, padding, and margin — written in camelCase, with plain numbers, not "16px".

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

export default function Card() {
  return (
    <View style={styles.card}>
      {/* Children go here */}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    padding: 20,
    marginHorizontal: 16,
    marginVertical: 8,
    // Shadow (iOS)
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    // Shadow (Android)
    elevation: 3,
  },
});

flex: 1 to Fill Available Space

Add flex: 1 and a View stretches to fill its parent. Your outer screen View usually wants this so it spreads across the whole display.

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

export default function SplitScreen() {
  return (
    <View style={{ flex: 1 }}>
      {/* Top half */}
      <View style={{ flex: 1, backgroundColor: '#4f86f7' }} />
      {/* Bottom half */}
      <View style={{ flex: 1, backgroundColor: '#f74f4f' }} />
    </View>
  );
}

Absolute Positioning in View

Need an overlay or floating badge? Set position: absolute, then place it with top, bottom, left, and right. It pops out of the normal Flexbox flow.

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

export default function BadgeExample() {
  return (
    <View style={styles.container}>
      <View style={styles.icon} />
      {/* Badge overlaid in top-right corner */}
      <View style={styles.badge}>
        <Text style={styles.badgeText}>3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: 48, height: 48 },
  icon: { width: 48, height: 48, backgroundColor: '#555', borderRadius: 8 },
  badge: {
    position: 'absolute',
    top: -4, right: -4,
    width: 20, height: 20,
    borderRadius: 10,
    backgroundColor: 'red',
    alignItems: 'center', justifyContent: 'center',
  },
  badgeText: { color: '#fff', fontSize: 11, fontWeight: 'bold' },
});

overflow: 'hidden' for Clipping

By default a View lets children spill past its edges. Add overflow: hidden to clip them — perfect for round avatars or neat rounded cards.

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

export default function CircleAvatar() {
  return (
    <View style={styles.circle}>
      <Image
        source={{ uri: 'https://picsum.photos/80' }}
        style={{ width: 80, height: 80 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  circle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    overflow: 'hidden', // clips the image to the circle
  },
});

The pointerEvents Prop

The pointerEvents prop decides if a View catches touches. Set it to "none" so taps pass right through — handy for overlays that should not block scrolling.

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

function LoadingOverlay({ visible }) {
  if (!visible) return null;
  return (
    // 'box-none' — overlay blocks no touches (children can)
    // Use 'auto' to block all interaction behind it
    <View style={styles.overlay} pointerEvents='auto'>
      <Text style={styles.text}>Loading...</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { color: '#fff', fontSize: 18 },
});

StyleSheet.absoluteFillObject

StyleSheet.absoluteFillObject is a shortcut that makes a View fill its parent edge to edge. Spread it in for instant full-screen overlays and loaders.

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

// Full-screen background overlay
const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    zIndex: 999,
  },
});

// Equivalent to:
// { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
//   backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 999 }

SafeAreaView for Notch and Home Bar

Phones have notches and home bars. Wrap your screen in SafeAreaView and your content stays clear of them, never hidden behind the hardware.

import { SafeAreaView, StyleSheet, Text } from 'react-native';
// Or use from react-native-safe-area-context for more control
// import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>This content avoids the notch!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Platform-Specific View Styling

Sometimes iOS and Android need different styles. The Platform module helps: Platform.OS tells you which one, and Platform.select() picks the right value.

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

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    // Platform-specific shadows:
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

Quick Check

Quick check! See how well the View basics stuck. 💪

Lesson Recap

Nice work! View is your native container, flex: 1 makes it fill its parent, and SafeAreaView keeps content off notches. Next up: showing text.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen View sebagai Wadah” gratis?

Ya — teks lengkap “Komponen View sebagai Wadah” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Native Academy, upgrade ke CoddyKit PRO. Kursus React Native Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen View sebagai Wadah”?

Gunakan View sebagai wadah tata letak utama, susun beberapa View secara bertingkat untuk membangun layar terstruktur, dan pahami pemetaannya ke kotak UI bawaan. Kamu berlatih React Native Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Native Academy?

Tidak diperlukan pengalaman sebelumnya. React Native Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Komponen View sebagai Wadah” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Komponen View sebagai Wadah
  2. Menampilkan Teks dan Menata Font
  3. Menampilkan Gambar dari Sumber Lokal dan Jarak Jauh
  4. Menyusun Kartu Profil Sederhana
← Kembali ke React Native Academy