Tujuan Pembelajaran

Memahami berbagai teknik platform-specific code
Mampu menggunakan `.ios.tsx` dan `.android.tsx` extensions
Mengerti strategi abstraksi untuk perbedaan platform

Analogi

Diagram


      Platform-specific = Dua Bahasa:
- iOS = Bahasa Spanyol (cara Spanyol)
- Android = Bahasa Prancis (cara Prancis)
- Shared = English (netral, dipahami keduanya)

Kalau ada konsep yang cuma ada di satu budaya, pakai bahasa lokal. Kalau universal, pakai bahasa netral.

Platform-specific code seperti bahasa — gunakan dialect lokal untuk fitur yang hanya ada di satu platform. Gunakan bahasa netral untuk yang universal.

Penjelasan Konsep

React Native adalah cross-platform, tapi ada fitur yang berbeda antara iOS dan Android. Kamu perlu tiga strategi untuk handle perbedaan: file extensions, Platform module, dan abstraksi.

File extensions: (1) Button.ios.tsx — hanya iOS. (2) Button.android.tsx — hanya Android. (3) Button.tsx — cross-platform (fallback kalau tidak ada yang spesifik). (4) Import: import Button from './Button' — Metro auto-resolve ke file yang sesuai.

Platform module: (1) Platform.OS — ‘ios’ / ‘android’ / ‘web’. (2) Platform.Version — versi OS. (3) Platform.select({ ios: ..., android: ..., default: ... }) — pilih nilai berdasarkan platform. (4) Platform.select() BUKAN conditional render — inline object, tidak ada overhead.

Abstraction pattern: (1) Interface di shared: interface Storage { get(key: string): Promise<string>; set(key: string, value: string): Promise<void> }. (2) Implementasi: MMKVStorage.ts (mobile), LocalStorage.ts (web). (3) Platform-specific component: DatePicker.ios.tsx (native date picker), DatePicker.android.tsx (material picker).

Best practices: (1) Minimalkan file spesifik platform — semakin banyak, semakin sulit maintenance. (2) Kalau perbedaan hanya styling → gunakan Platform.select di StyleSheet. (3) Kalau perbedaan behavior/fitur → abstraksi interface. (4) Kalau perbedaan total UI → file extension.

Testing: test di kedua platform — jangan cuma iOS simulator. Android punya back button hardware, font size berbeda, gesture berbeda.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami berbagai teknik platform-specific code., mampu menggunakan .ios.tsx dan .android.tsx extensions., dan mengerti strategi abstraksi untuk perbedaan platform. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Platform-Specific Code Patterns, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Platform-specific code seperti bahasa — gunakan dialect lokal untuk fitur yang hanya ada di satu platform. Gunakan bahasa netral untuk yang universal. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Platform.OS untuk conditional. Platform.select untuk style object yang berbeda per platform. Ini lebih clean dari if-else di JSX.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { Platform, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  header: {
    paddingTop: Platform.OS === "ios" ? 60 : 40,
    ...Platform.select({ ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8 }, android: { elevation: 4 } }),
  },
});

Penjelasan Kode

Platform.OS untuk conditional. Platform.select untuk style object yang berbeda per platform. Ini lebih clean dari if-else di JSX.

Prompt AI

Buat komponen DatePicker yang abstraksi: (a) interface shared untuk props, (b) implementasi iOS pakai native date picker, (c) implementasi Android pakai material picker, (d) implementasi Web sebagai fallback. Gunakan file extension pattern.

Pertanyaan Reflektif

Berapa persen kode aplikasi-mu yang platform-specific? Apakah ada fitur yang bisa disederhanakan dengan abstraksi?