인프런 커뮤니티 질문&답변
작성한 질문수
13강 AnimatedTabBarButton type 질문
작성
·
115
3
13강 강의 예제로 진행중 AnimatedTabBarButton에서 type을 BottomTabBarButtonProps로 사용했을때, <Pressable {...restProps} /> 부분에서 PressableProps type과 불일치 에러가 발생해요.
type assertion으로 {...restProps as PressableProps} 처리를 하면 에러 표기는 안나긴하지만 찝찝해서요.
강사님의 IDE와는 다르게 에러가 발생하는데 의존성 version 달라서 발생할 수도 있을까요?
답변 4
0
const { ref, ...propsWithoutRef } = restProps;
<Pressable
{...propsWithoutRef}
onPress={onPress}
onPressOut={handlePressOut}
style={[
{ flex: 1, justifyContent: "center", alignItems: "center" },
style,
]}
// Disable Android ripple effect
android_ripple={{ borderless: false, radius: 0 }}
>
저는 이렇게 해결하였습니다
0
0
네, 버전 차이로 보이는데 혹시 React 18 버전이신가요?
npm ls react 해서 어떤 버전이 나오는지 확인해보세요. npm ls react-native, npm ls expo도요
react는 강사님 버전과 동일한 19이고 react-native, expo 버전이 강사님 버전에비해 높은 패치 버전이에요.
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"expo": "~53.0.9",
"expo-blur": "~14.1.4",
"expo-constants": "~17.1.6",
"expo-font": "~13.3.1",
"expo-haptics": "~14.1.4",
"expo-image": "~2.1.7",
"expo-linking": "~7.1.5",
"expo-router": "~5.0.6",
"expo-splash-screen": "~0.30.8",
"expo-status-bar": "~2.2.3",
"expo-symbols": "~0.4.4",
"expo-system-ui": "~5.0.7",
"expo-web-browser": "~14.1.6",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.2",
"react-native-gesture-handler": "~2.24.0",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.10.0",
"react-native-web": "~0.20.0",
"react-native-webview": "13.13.5",
"expo-dev-client": "~5.1.8"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/react": "~19.0.10",
"typescript": "~5.8.3",
"eslint": "^9.25.0",
"eslint-config-expo": "~9.2.0"
},0
안녕하세요, 인프런 AI 인턴입니다. 도도한 얼룩말님.
React Native 프로젝트에서 Pressable 컴포넌트 사용 시 타입 불일치 오류가 발생하는 것은 종종 라이브러리 버전 간의 불일치나 관련 종속성의 차이 때문일 수 있습니다. 특히 최신 버전의 React Navigation, React Native 등 여러 라이브러리가 사용될 때 이러한 문제가 발생할 수 있습니다.
먼저, BottomTabBarButtonProps와 PressableProps 간의 불일치가 발생하는 이유는 두 인터페이스 간에 기대되는 props가 다를 수 있기 때문입니다. type assertion을 통해 이 문제를 우회할 수 있지만, 이는 타입 체킹이 무시되므로 사용 시 주의가 필요합니다.
잠재적 해결방안
의존성 버전 확인:
package.json에서 사용 중인 라이브러리 버전이 강의와 동일한지 확인하고 필요한 경우 업데이트하거나 강의에 맞는 버전으로 다운그레이드해보세요.타입 확장(타입 스크립트 사용 시): 간혹 직접적으로 타입을 확장하거나 커스텀 타입을 정의하여 사용할 수 있습니다.
문제 해결을 위한 디버깅:
Pressable의 props가 모두 포함되었는지 확인합니다.
restProps를 디버깅하여 어떤 props가 전달되고 있는지 로그를 찍어 확인합니다.
참고 URL
React Navigation Documentation: Handling Tab Press in custom tabBarButton 이 페이지에서 Tab과 관련한 custom component 사용 시 고려해야 할 사항들을 보실 수 있습니다.
수정 후에도 문제가 계속 발생한다면 해당 문제에 대한 보다 구체적인 컨텍스트를 제공해 주시면 추가적인 조언을 드릴 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
일단 {...restProps as PressableProps}로 수정하셔서 하셔도 큰 문제는 없습니다!