React Native에서 타입 안전한 파일 기반 라우팅 구현하기

export default function Page() {
    const params = useRoute().params;
 
    return <View>Hello {params.name}</View>;
}

import React from 'react';
import { View, Text } from 'react-native';
import { BedrockRoute } from 'react-native-bedrock';
import { z } from 'zod';

// 라우트 정의
export const Route = BedrockRoute('/page-a', {
  component: Page,
  validateParams: (params) => 
    z.object({ name: z.string() }).parse(params), // 파라미터 검증 및 타입 추론
});

// 화면 컴포넌트
function Page() {
  const params = Route.useParams(); // { name: string }으로 자동 추론됨
  return (
    <View>
      <Text>Hello, {params.name}!</Text>
    </View>
  );
}

import { useRoute } from "@react-navigation/native";

function useParams() {
  return useRoute().params;
}

export interface BedrockRouteOptions<T extends Readonly<object | undefined>> {
  validateParams?: (params: Readonly<object | undefined>) => T;
  component: React.FC<any>;
}

export const BedrockRoute = <T extends Readonly<object | undefined>>(
  path: keyof RegisterScreen,
  options: BedrockRouteOptions<T>
) => {
  const { component, ...restOptions } = options;

  return {
    useParams: () => useParams() as T, // validateParams를 통해 타입이 추론됨
  };
};

import { Route as _PageARoute } from '../pages/page-a';
import { Route as _PageBRoute } from '../pages/page-b';

// react-native-bedrock 라이브러리에 선언 병합
// 화면 경로가 키가 되고, 화면 파라미터 타입이 값이 돼요.
declare module 'react-native-bedrock' {
  interface RegisterScreen {
    '/page-a': ReturnType<typeof _PageARoute.useParams>;
    '/page-b': ReturnType<typeof _PageBRoute.useParams>;
  }
}

import { RouteGenPlugin } from "@react-native-bedrock/plugins";

export default defineConfig({
  plugins: [RouteGenPlugin()],
});

import React from 'react';
import { Text, View } from 'react-native';
import { BedrockRoute } from 'react-native-bedrock';

export const Route = BedrockRoute('/about', {
  validateParams: (params) => params, // 현재는 검증 없음
  component: About,
});

export function About() {
  return (
    <View>
      <Text>Hello About</Text>
    </View>
  );
}

import { Route as _AboutRoute } from '../pages/about';

declare module 'react-native-bedrock' {
  interface RegisterScreen {
    '/about': ReturnType<typeof _AboutRoute.useParams>;
  }
}

import { Route as _AboutRoute } from '../pages/about';
import { Route as _HomeRoute } from '../pages/home';

declare module 'react-native-bedrock' {
  interface RegisterScreen {
    '/about': ReturnType<typeof _AboutRoute.useParams>;
    '/home': ReturnType<typeof _HomeRoute.useParams>;
  }
}

// 1. 선언 후 export
const Route = BedrockRoute(...);
export { Route };

// 2. 선언과 동시에 export
export const Route = BedrockRoute(...);

import { parseFileSync } from '@swc/core';

/**
 * 파일에 Route가 export되어 있는지 확인합니다.
 */
export function checkExportRoute(path: string) {
  try {
    const ast = parseFileSync(path, {
      syntax: 'typescript',
      tsx: true,
    });

    // export { Route } 형태 체크
    const hasExportSpecifiers = ast.body.some((node) => {
      if (node.type !== 'ExportNamedDeclaration') {
        return false;
      }
      return node.specifiers?.some((specifier) => {
        if (specifier.type !== 'ExportSpecifier') {
          return false;
        }
        return specifier.orig?.value === 'Route';
      });
    });

    if (hasExportSpecifiers) {
      return true;
    }

    // export const Route = ... 형태 체크
    const hasExportNamedVariable = ast.body.some((node) => {
      if (node.type !== 'ExportDeclaration') {
        return false;
      }
      if (node.declaration.type !== 'VariableDeclaration') {
        return false;
      }

      return node.declaration.declarations.some(
        (declaration) => declaration.id.type === 'Identifier' && declaration.id.value === 'Route'
      );
    });

    return hasExportNamedVariable;
  } catch {
    return false;
  }
}

import { useNavigation, type NativeStackNavigationProp } from "@react-navigation/native";

interface Screen {
  'page-a': { name: string },
  'page-b': undefined,
}

function PageB() {
  const navigation = useNavigation<NativeStackNavigationProp<Screen>>();

  return (
    <Button
      onPress={() => navigation.navigate("page-a", { name: "Toss" })}
      title="page-a 이동"
    />
  );
}

import {
  useNavigation as useNavigationNative,
  type NativeStackNavigationProp,
  ParamListBase
} from "@react-navigation/native";

export type BedrockNavigationProps = NativeStackNavigationProp<
  keyof RegisterScreen extends never ? ParamListBase : RegisterScreen
>;

export function useNavigation() {
  return useNavigationNative<BedrockNavigationProps>();
}

import { BedrockRoute, useNavigation } from 'react-native-bedrock';
import { StyleSheet, View, Text, Pressable } from 'react-native';

// Page B 라우트 정의
export const Route = BedrockRoute('/page-b', {
  validateParams: (params) => params, // 현재 검증 로직 없음
  component: PageB,
});

// Page B 컴포넌트
function PageB() {
  const navigation = useNavigation();

  const handlePress = () => {
    navigation.navigate('/page-a', {
      name: "Toss", // '/page-a'에서 정의한 타입이 자동 적용됨
    });
  };

  return (
    <View style={[styles.container, { backgroundColor: '#3182f6' }]}>
      <Text style={styles.text}>Page B</Text>
      <Pressable onPress={handlePress}>
        <Text style={styles.buttonLabel}>A 페이지로 이동하기</Text>
      </Pressable>
    </View>
  );
}