React Native 의 Platform API

Platform API 는 React Native 가 지금 내가 돌고 있는 곳이 아이폰인지, 아니면 갤럭시인지 구별하게 해주는 아주 핵심적인 모듈이다.

RN은 크로스 플랫폼
하나의 코드로 두 플랫폼을 다 잡는 게 목표지만, 디자인 가이드라인이나 네이티브 기능이 달라서 코드를 분기(Branching)해야 할 때가 반드시 온다. 그때 이 기능을 쓴다.

Platform.OS

가장 직관적인 방법이다. 현재 OS 이름을 문자열('ios' 또는 'android')로 반환한다.

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

const Component = () => {
  // if문으로 분기 처리
  if (Platform.OS === 'ios') {
    return <Text>아이폰입니다.</Text>;
  } else {
    return <Text>안드로이드입니다.</Text>;
  }
};

이해하기 매우 쉬운 구조이지만, 코드 안에서 삼항연산자를 너무 많이 쓰면 더티코드가 되기 쉽다.

Platform.select()

if-else 도배를 막아주는 아주 우아한 메서드다. 객체 안에 플랫폼별 값을 넣어두면, 알아서 맞는 값을 골라준다. 특히 스타일(StyleSheet) 짤 때나 컴포넌트 호출할 때 좋다. ios, android, native (모바일 둘 다), default (나머지) 키를 사용할 수 있다.

const styles = StyleSheet.create({
  container: {
    // Platform.select가 알아서 OS에 맞는 객체를 펼쳐준다.
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
      default: {
        // 웹(Web)이나 다른 플랫폼일 때
        backgroundColor: 'white',
      },
    }),
  },
});

// 컴포넌트 호출할 때
const MyComponent = () => {
  return (
    <View>
      {Platform.select({
        ios: <IOSSpecificUI />,      // ← iOS 코드
        android: <AndroidSpecificUI /> // ← Android 코드
      })}
    </View>
  );
};

Platform.Version

OS의 버전 정보가 필요할 때 쓴다. 근데 여기서 함정이 있으니 조심해야 한다.

• Android : 숫자(Integer)가 나온다. (안드로이드 API Level)
  예: 25 (Nougat), 30 (R), 33 (Tiramisu)

• iOS : 문자열(String)이 나온다.
  예: '14.0', '16.2'

import { Platform } from 'react-native';

const checkVersion = () => {
  if (Platform.OS === 'android') {
    // 안드로이드 API 30(안드로이드 11) 이상인지 숫자 비교
    if (Platform.Version >= 30) {
      console.log('최신 안드로이드 기능 사용 가능');
    }
  } else if (Platform.OS === 'ios') {
    // iOS는 문자열이라 parseInt로 숫자로 바꿔서 비교해야 함!
    const majorVersion = parseInt(Platform.Version, 10);
    if (majorVersion >= 14) {
      console.log('iOS 14 이상 기능 사용 가능');
    }
  }
};

플랫폼별 파일 확장자 분기

React Native의 Metro Bundler는 import 시 파일 확장자 우선순위를 다음과 같이 적용한다.

1. [파일명].[플랫폼].tsx (예: Button.ios.tsx, Button.android.tsx)
2. [파일명].native.tsx (모바일 공통)
3. [파일명].tsx (모든 플랫폼 공통)

components/
  Button.ios.tsx      ← iOS에서 실행 시 이걸 선택
  Button.android.tsx  ← Android에서 실행 시 이걸 선택
  Button.tsx          ← 플랫폼 파일이 없으면 fallback

추가로 알면 좋은 것들

1. Platform.isPad

지금 실행 중인 기기가 아이패드(iPad)인지 확인할 때 쓴다. Platform.OS는 아이폰이든 아이패드든 똑같이 'ios'라고 나온다. 그래서 태블릿 전용 UI(화면이 넓으니까)를 보여주고 싶을 때 이걸 사용한다. (실제 사용하는 경우는 드물다. 알고만 있자.)

2. constants 속성

디바이스의 더 세밀한 정보가 필요할 때 사용한다.

import { Platform } from 'react-native';

console.log(Platform.constants);

// iOS 출력 예시:
// {
//   forceTouchAvailable: false,
//   interfaceIdiom: 'phone', // 'phone' | 'pad' | 'tv'
//   isTesting: false,
//   osVersion: '16.0',
//   systemName: 'iOS'
// }

// Android 출출 예시:
// {
//   Brand: 'samsung',
//   Manufacturer: 'samsung',
//   Model: 'SM-G998B',
//   Version: 33,
//   isTesting: false,
//   ...
// }