Como você escreve código específico de plataforma em React Native?

Question

Accepted Answer

Embora React Native compartilhe a maioria do código entre iOS e Android, às vezes você precisa de **código ou estilo específico da plataforma** — para diferentes comportamentos, designs ou capacidades de plataforma. React Native fornece o módulo **Platform** e extensões de arquivo específicas da plataforma para isso.

## O módulo 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` verifica a plataforma; `Platform.select` escolhe valores por plataforma — para comportamento condicional e estilo.

## Arquivos específicos da plataforma

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

## Quando e como usá-lo

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

## Por que isso importa

Compreender como escrever código específico da plataforma é valioso porque **mesmo aplicativos multiplataforma às vezes precisam de comportamento ou estilo específico da plataforma**, portanto tratá-lo corretamente é conhecimento prático útil para aplicativos React Native reais.

Enquanto o valor do React Native é compartilhar a maioria do código entre iOS e Android, aplicativos reais às vezes precisam **divergir por plataforma** — para convenções de design de plataforma (iOS vs estéticas Android/Material), recursos ou APIs específicas da plataforma, diferenças de comportamento ou UX apropriada para a plataforma — e compreender como lidar com isso é importante.

O **módulo Platform** (`Platform.OS` para verificar a plataforma e `Platform.select` para escolher valores por plataforma) trata pequenas diferenças inline — comportamento condicional e estilo. **Arquivos específicos da plataforma** (usando extensões `.ios.js` e `.android.js`, com React Native selecionando automaticamente o arquivo correto) tratam diferenças maiores de forma limpa (implementações separadas em vez de muitos condicionais).

Compreender **quando e como usar estes** reflete bom julgamento: usar código específico da plataforma **com moderação** (compartilhar código por padrão e divergir apenas quando genuinamente necessário — preservando o benefício multiplataforma do React Native), escolher o módulo Platform para pequenas diferenças versus arquivos específicos da plataforma para grandes diferenças, e crucialmente **testar em ambas as plataformas** (já que um recurso funcionando em uma pode diferir ou falhar na outra — um problema real comum).

Essa abordagem equilibrada (compartilhar por padrão, divergir cuidadosamente quando necessário, testar ambos) reflete desenvolvimento multiplataforma maduro.

Já que aplicativos multiplataforma às vezes legitimamente precisam de código específico da plataforma (para convenções, recursos ou UX) e tratá-lo bem (as ferramentas corretas usadas com moderação, com testes em ambas as plataformas) é importante para aplicativos de qualidade, e já que compreender o módulo Platform e arquivos específicos da plataforma permite isso, compreender como escrever código específico da plataforma em React Native é conhecimento valioso e praticamente relevante — útil para lidar com as diferenças de plataforma que surgem em aplicativos reais enquanto preserva o compartilhamento de código multiplataforma que torna React Native valioso, refletindo desenvolvimento multiplataforma cuidadoso.