Hoe schrijf je platformspecifieke code in React Native?

Question

Accepted Answer

Hoewel React Native het meeste code deelt tussen iOS en Android, heb je soms **platformspecifieke** code of styling nodig — voor verschillende platformgedrag, designs of mogelijkheden. React Native biedt de **Platform** module en platformspecifieke bestandsextensies hiervoor.

## De Platform module

```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` controleert het platform; `Platform.select` kiest waarden per platform — voor voorwaardelijk gedrag en styling.

## Platformspecifieke bestanden

```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)
```

## Wanneer en hoe het te gebruiken

```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)
```

## Waarom het belangrijk is

Het begrijpen hoe je platformspecifieke code schrijft is waardevol omdat **zelfs cross-platform apps soms platformspecifiek gedrag of styling nodig hebben**, dus het correct afhandelen ervan is bruikbare praktische kennis voor echte React Native apps.

Hoewel React Natives waarde in het delen van het meeste code tussen iOS en Android ligt, hebben echte apps soms **nodig om per platform af te wijken** — voor platformdesignconventies (iOS versus Android/Material-esthetica), platformspecifieke functies of API's, gedragsverschillen, of platformgeschikte UX — en het begrijpen hoe je dit afhandelt is belangrijk.

De **Platform module** (`Platform.OS` om het platform te controleren en `Platform.select` om waarden per platform te kiezen) handelt kleine verschillen inline af — voorwaardelijk gedrag en styling. **Platformspecifieke bestanden** (met `.ios.js` en `.android.js` extensies, waarbij React Native automatisch het juiste bestand selecteert) handelen grotere verschillen schoon af (aparte implementaties in plaats van veel voorwaarden).

Het begrijpen **wanneer en hoe deze te gebruiken** weerspiegelt goed oordeel: platformspecifieke code **spaarzaam** gebruiken (code standaard delen en alleen afwijken wanneer echt nodig — React Natives cross-platform voordeel behouden), de Platform module kiezen voor kleine verschillen versus platformspecifieke bestanden voor grote verschillen, en cruciaal **op beide platforms testen** (aangezien een functie die op het ene platform werkt op het ander kan verschillen of kapotgaan — een veel voorkomend probleem in praktijk).

Deze evenwichtige benadering (standaard delen, doordacht afwijken wanneer nodig, beide testen) weerspiegelt volwassen cross-platform development.

Omdat cross-platform apps soms terecht platformspecifieke code nodig hebben (voor conventies, functies of UX) en het goed afhandelen ervan (de juiste tools spaarzaam gebruikt, met testing op beide platforms) belangrijk is voor kwaliteitsapps, en omdat het begrijpen van de Platform module en platformspecifieke bestanden dit mogelijk maakt, is het begrijpen hoe je platformspecifieke code in React Native schrijft waardevol, praktisch-relevante kennis — nuttig voor het afhandelen van platformverschillen die in echte apps voorkomen terwijl je de cross-platform code-sharing behoudt die React Native waardevol maakt, wat doordacht cross-platform development weerspiegelt.