Bagaimana cara menulis kode spesifik platform di React Native?

Question

Accepted Answer

Meskipun React Native berbagi sebagian besar kode di iOS dan Android, kadang-kadang Anda perlu **kode atau styling spesifik platform** — untuk perilaku platform yang berbeda, desain, atau kemampuan. React Native menyediakan modul **Platform** dan ekstensi file spesifik platform untuk ini.

## Modul Platform

```jsx
import { Platform } from 'react-native';

// check the current platform
if (Platform.OS === 'ios') { /* iOS-specific */ }
else if (Platform.OS === 'android') { /* Android-specific */ }

// Platform.select — pick a value per platform
const styles = {
  padding: Platform.OS === 'ios' ? 20 : 16,
  ...Platform.select({
    ios: { fontFamily: 'Helvetica' },
    android: { fontFamily: 'Roboto' },
  }),
};
```

`Platform.OS` memeriksa platform; `Platform.select` memilih nilai per platform — untuk perilaku dan styling bersyarat.

## File spesifik platform

```text
→ Create separate files per platform using extensions:
  Button.ios.js   → used on iOS
  Button.android.js → used on Android
  import Button from './Button'   → RN automatically picks the right file per platform
→ Good for substantially different platform implementations (cleaner than lots of if-checks)
```

## Kapan dan cara menggunakannya

```text
✓ Use platform-specific code SPARINGLY — share code by default; diverge only when needed
✓ Common reasons: platform design conventions (iOS vs Material), platform-specific
  features/APIs, behavior differences, platform-appropriate UX
✓ Platform module for small differences; .ios/.android files for large differences
✓ Test on BOTH platforms (a feature working on one may differ/break on the other)
```

## Mengapa ini penting

Memahami cara menulis kode spesifik platform bernilai karena **bahkan aplikasi lintas platform kadang-kadang memerlukan perilaku atau styling spesifik platform**, jadi menanganinya dengan benar adalah pengetahuan praktis yang berguna untuk aplikasi React Native nyata.

Meskipun nilai React Native adalah berbagi sebagian besar kode di iOS dan Android, aplikasi nyata kadang-kadang perlu **berbeda per platform** — untuk konvensi desain platform (estetika iOS vs Android/Material), fitur atau API spesifik platform, perbedaan perilaku, atau UX yang sesuai platform — dan memahami cara menangani ini adalah penting.

Modul **Platform** (`Platform.OS` untuk memeriksa platform dan `Platform.select` untuk memilih nilai per platform) menangani perbedaan kecil secara inline — perilaku dan styling bersyarat. **File spesifik platform** (menggunakan ekstensi `.ios.js` dan `.android.js`, dengan React Native secara otomatis memilih file yang benar) menangani perbedaan besar dengan rapi (implementasi terpisah daripada banyak kondisional).

Memahami **kapan dan cara menggunakan ini** mencerminkan penilaian yang baik: menggunakan kode spesifik platform **jarang** (berbagi kode secara default dan berbeda hanya ketika benar-benar diperlukan — melestarikan keuntungan lintas platform React Native), memilih modul Platform untuk perbedaan kecil versus file spesifik platform untuk perbedaan besar, dan yang sangat penting **menguji di kedua platform** (karena fitur yang berfungsi di satu mungkin berbeda atau rusak di yang lain — masalah nyata yang umum).

Pendekatan seimbang ini (berbagi secara default, berbeda dengan cermat ketika diperlukan, uji keduanya) mencerminkan pengembangan lintas platform yang matang.

Karena aplikasi lintas platform kadang-kadang secara sah memerlukan kode spesifik platform (untuk konvensi, fitur, atau UX) dan menanganinya dengan baik (alat yang tepat digunakan jarang, dengan pengujian kedua platform) penting untuk aplikasi berkualitas, dan karena memahami modul Platform dan file spesifik platform memungkinkan ini, memahami cara menulis kode spesifik platform di React Native adalah pengetahuan yang berharga dan relevan secara praktis — berguna untuk menangani perbedaan platform yang muncul dalam aplikasi nyata sambil melestarikan berbagi kode lintas platform yang membuat React Native berharga, mencerminkan pengembangan lintas platform yang cermat.