[RN Log] BottomTabBarButtonProps 사용 시 Pressable 타입 오류 해결 방법

🔧 BottomTabBarButtonProps 사용 시 Pressable 타입 오류 해결 방법

BottomTabBarButtonProps를 커스텀 탭 버튼에서 사용할 때, Pressable에 ...restProps로 전달하면 타입 오류가 발생합니다.
이는 Pressable이 허용하지 않는 prop까지 같이 전달되기 때문입니다.

---

❌ 수정 전 코드 (타입 오류 발생)

import { Pressable } from "react-native";
import type { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";

const AnimatedTabBarButton = ({
  children,
  onPress,
  style,
  ...restProps
}: BottomTabBarButtonProps) => {
  return (
    <Pressable
      onPress={onPress}
      style={style}
      {...restProps} // ❌ 문제 지점: Pressable이 모르는 prop도 포함됨
    >
      {children}
    </Pressable>
  );
};

❗ restProps에는 labelPosition, allowFontScaling 등 Pressable이 지원하지 않는 속성도 포함되어 있어 타입 에러 발생.

---

✅ 수정 후 코드 (타입 오류 해결)

import { Pressable } from "react-native";
import type { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";

const AnimatedTabBarButton = ({
  children,
  onPress,
  style,
  accessibilityLabel,
  accessibilityState,
  testID,
  android_ripple, // 필요할 경우만 포함
}: BottomTabBarButtonProps) => {
  return (
    <Pressable
      onPress={onPress}
      style={style}
      accessibilityLabel={accessibilityLabel}
      accessibilityState={accessibilityState}
      testID={testID}
      android_ripple={android_ripple}
    >
      {children}
    </Pressable>
  );
};

---

📌 Pressable에 명시적으로 꺼내서 전달해야 하는 prop 목록

prop 이름	설명	필요한 이유
onPress	버튼 클릭 핸들러	Pressable의 주요 동작 처리
style	스타일 적용	버튼의 시각적 스타일 지정
accessibilityLabel	접근성 텍스트	스크린리더에서 읽히는 이름
accessibilityState	접근성 상태값	선택됨, 비활성화됨 등 상태 전달
testID	테스트 ID	e2e, 유닛 테스트용 식별자
android_ripple	터치 효과	안드로이드 전용 ripple 효과 옵션 (필요 시)

✅ 위 prop들은 모두 Pressable이 지원하는 속성이기 때문에 명시적으로 꺼내서 전달하면 타입 오류 없이 안전하게 동작합니다.

---

🔍 정리 요약

구분	설명
🔥 수정 전	...restProps를 그대로 넘겨 Pressable이 허용하지 않는 prop까지 전달됨 → 타입 오류 발생
✅ 수정 후	Pressable이 이해하는 prop만 명시적으로 전달 → 타입 안정성 확보 및 오류 해결

---

타입 단언보다 안전한 방식은 Pressable이 지원하는 prop만 명시적으로 꺼내 전달하는 것
위 방식으로 수정하면 BottomTabBarButtonProps 타입을 유지하면서도 Pressable과 타입 충돌 없이 안전하게 사용할 수 있습니다.