Kode Spesifik per Platform

Meskipun React Native cross-platform, kadang kamu perlu perilaku berbeda di iOS dan Android. Ada beberapa cara menangani perbedaan ini.

Platform Module

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

// Cek platform
console.log(Platform.OS); // 'ios' | 'android' | 'web'

// Conditional value
const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 44 : 0,
    // Atau pakai Platform.select:
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

File-based Platform Extensions

// React Native otomatis memilih file berdasarkan platform:
// components/
// ├── DatePicker.ios.tsx     → dipakai di iOS
// ├── DatePicker.android.tsx → dipakai di Android
// └── DatePicker.tsx         → fallback (web atau default)

// Import tetap sama, RN yang memilih:
import DatePicker from './components/DatePicker';

Contoh Perbedaan iOS vs Android

import { Platform, StatusBar, SafeAreaView } from 'react-native';

function AppLayout({ children }) {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Android butuh StatusBar padding manual */}
      {Platform.OS === 'android' && (
        <StatusBar translucent backgroundColor="transparent" />
      )}
      {children}
    </SafeAreaView>
  );
}

// Perbedaan umum:
// iOS: Safe Area (notch, Dynamic Island)
// Android: StatusBar overlap, navigation bar
// iOS: bounce scroll natural
// Android: overscroll glow effect
// iOS: swipe-back gesture built-in
// Android: hardware back button

Platform Version Check

if (Platform.OS === 'android' && Platform.Version >= 33) {
  // Android 13+ membutuhkan permission POST_NOTIFICATIONS
  requestNotificationPermission();
}

if (Platform.OS === 'ios') {
  // parseInt karena iOS version bisa '16.4'
  const majorVersion = parseInt(Platform.Version, 10);
  if (majorVersion >= 16) {
    // Gunakan fitur iOS 16+
  }
}

Kapan Pakai Platform-Specific Code?

• Shadow/Elevation — iOS pakai shadow*, Android pakai elevation
• Safe Area — iOS notch/Dynamic Island handling
• Permissions — Flow berbeda di tiap OS
• UI conventions — Android pakai Material Design, iOS pakai Human Interface Guidelines
• Haptics/Feedback — API berbeda per platform