React Navigation useNavigation 타입하기

내가 만난 경우는 같은 부모 라우터 아래 있는 자식 라우터 라우터들 사이에 이동을 해야 했다. navigation.reset을 사용하고 싶었는데 state의 name props에 타입 에러가 지속적으로 발생했다. expo에서 작동은 하지만 '잘 사용하고 있는걸까?'하는 의문이 있었고 navigate메소드로 특정 스크린에 데이터를 넘겨주어야 할 때의 타입 체크도 신경이 쓰였다.

찾아보니 CompositeScreenProps라는 것이 있었다. CompositeNavigationProp도 있지만 전자는 6버전에 새로 생긴거라 한 번 사용해 보았다.

아래는 예시로 들 routes structure이다.

• RootRoute
  • MainRoute
    • Home
  • ChatRoute
  • Auth
    • Email
    • Phone

예시 코드는 'Phone'에서 'Home'으로 간다고 가정한다.

/* RootRoute.tsx */
export type RootRoute = {
  MainRoute: undefined;
  ChatRoute: undefined;
  AuthRoute: undefined;

};

const Stack = createStackNavigator<RootRoute>();

const Root = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'MainRoute'} component={MainRoute} />
      <Stack.Screen name={'ChatRoute'} component={ChatRoute} />
      <Stack.Screen name={'AuthRoute'} component={AuthRoute} />
    </Stack.Navigator>
  );

/* MainRoute.tsx */
export type MainRoute = {
  Home: undefined;
  ...
};

const Stack = createStackNavigator<MainRoute>();

const Main = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'Home'} component={...} />
      <Stack.Screen name={...} component={...} />
    </Stack.Navigator>
  );

/* AuthRoute.tsx */
export type AuthRoute = {
  Email: undefined;
  Phone: undefined;
};

const Stack = createStackNavigator<AuthRoute>();

const Auth = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'Email'} component={EmailAuthScreen} />
      <Stack.Screen name={'Phone'} component={PhoneAuthScreen} />
    </Stack.Navigator>
  );

/* PhoneAuthScreen.tsx */
interface PhoneAuthProps
  extends StackScreenProps<AuthRoute, 'Phone'> {}

const PhoneAuthScreen = ({ route }: PhoneAuthProps) => {
  const { navigation, route } =
    useNavigation<
      CompositeScreenProps<
        StackScreenProps<RootRoute, 'MainRoute'>,
        StackScreenProps<AuthRoute, 'Phone'>
      >
    >();
  ...
}

그냥 CompositeScreenProps이 부분을 PhoneAuthProps로 사용하면 되지 않을까 했지만 일반적인 navigate메소드에서는 문제가 없는데 reset메소드를 사용하려니 문제가 생겼다. 즉, navigate메소드만 사용한다면 그냥 아래 코드로 PhoneAuthProps에 상속하고 useNavigation을 사용하지 않아도 된다.

CompositeScreenProps<
  StackScreenProps<AuthRoute, 'Phone'>,
  StackScreenProps<RootRoute, 'MainRoute'>
>