React Native에서 useSilentSwitch() 훅, 안전하게 쓰는 법 정리

🔍 문제 상황

React Native에서 iOS 무음 모드(Silent Mode)를 감지하려고 react-native-volume-manager의 useSilentSwitch() 훅을 사용.

처음엔 아래처럼 쓰면 Android에서도 문제없을 줄 알았음:

if (Platform.OS === 'ios') {
  const silentState = useSilentSwitch();
}

그런데 Android에서 앱이 바로 크래시 남.

Error: The package 'react-native-volume-manager' doesn't seem to be linked.

🤔 원인 분석

1. useSilentSwitch()는 iOS 전용 훅이라 Android에서는 아예 사용할 수 없음.

2. React의 훅은 무조건 컴포넌트 최상단에서 호출되어야 함.

3. if 조건문 안에서 훅을 호출하면, Android에서도 훅이 호출된다고 간주되기 때문에 규칙 위반 + 네이티브 오류 발생.

💡 해결 방법

✅ 안전하게 사용하는 방법: 플랫폼별 컴포넌트 분리

function SilentSwitchIOS() {
  const silentState = useSilentSwitch();
  return <Text>{silentState.isMuted ? '무음 모드' : '소리 모드'}</Text>;
}

function SilentSwitchAndroid() {
  return <Text>무음 모드 감지 불가</Text>;
}

export default function SilentSwitch() {
  return Platform.OS === 'ios' ? <SilentSwitchIOS /> : <SilentSwitchAndroid />;
}

• 훅을 iOS 컴포넌트 내부에서만 호출 → Android에선 호출 X → 크래시 없음

• React 훅 규칙 위반하지 않음

• UI는 하나의 SilentSwitch 컴포넌트로 통합 사용 가능

📋 정리

✅ 마무리

훅이 특정 플랫폼 전용이면, 컴포넌트 수준에서 분리해서 처리하자.
조건문으로는 훅 호출을 안전하게 막을 수 없다.
무조건 호출 자체가 Android에서 생기지 않도록 설계해야 안전하다.