인프런 커뮤니티 질문&답변

제로초님 안녕하세요!! 강의에 나온대로 top tabs 적용중인데, withLayoutContext에 제네릭 타입까지 강의와 같이 적용하려고 했으나

import type { TabNavigationState, ParamListBase } from '@react-navigation/native';

위 코드에서 '"@react-navigation/native"' 모듈에 내보낸 멤버 'ParamListBase'이(가) 없습니다.ts(2305)ParamListBase를 불러오지 못해서 우선 타입스크립트 적용하지 않고 아래 코드와 같이 테스트했습니다.

import { withLayoutContext } from 'expo-router';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const { Navigator } = createMaterialTopTabNavigator();
export const MaterialTopTabs = withLayoutContext(Navigator);

const GitCallbackLayout = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Text>Callback Layout</Text>
      <MaterialTopTabs>
        <MaterialTopTabs.Screen name="index" options={{ title: 'GitHub' }} />
        <MaterialTopTabs.Screen name="gitlab" options={{ title: 'GitLab' }} />
        <MaterialTopTabs.Screen name="bitbucket" options={{ title: 'Bitbucket' }} />
        <MaterialTopTabs.Screen name="devops" options={{ title: 'DevOps' }} />
      </MaterialTopTabs>
    </View>
  );
};

export default GitCallbackLayout;

폴더 구조는 아래와 같고 index, gitlab, devops, bitbucket 컴포넌트는 모두 default export 돼있는 상태입니다.

이 상태에서 페이지에 /settings/manage-git/verify 경로로 접근하면

 ERROR  [TypeError: Cannot read property 'find' of undefined] 

Code: _layout.tsx
  31 |     <View style={{ paddingTop: insets.top }}>
  32 |       <Text>Callback Layout</Text>
> 33 |       <MaterialTopTabs>
     |       ^
  34 |         <MaterialTopTabs.Screen name="index" options={{ title: 'GitHub' }} />
  35 |         <MaterialTopTabs.Screen name="gitlab" options={{ title: 'GitLab' }} />
  36 |         <MaterialTopTabs.Screen name="bitbucket" options={{ title: 'Bitbucket' }} />

이렇게 에러가 나는 상황인데,, 계속 해결이 안되네요ㅠ 어떤 문제인지 아시면 도움 부탁드려요