react-native-next-navigation

Next.js-style file routing for React Native.

Installation

npm install react-native-next-navigation
npm install @react-navigation/native @react-navigation/native-stack

Usage

1) Create your route files

Create screens under src/app.

src/app
├─ index.tsx
├─ profile.tsx
└─ user
   └─ [id].tsx

• index.tsx -> /
• profile.tsx -> /profile
• [id].tsx -> /:id

2) Generate routes

Create a script file (for example scripts/generate-routes.js):

const { generateRoutes } = require('react-native-next-navigation');

generateRoutes({
  appDir: 'src/app',
  output: 'src/generated/routes.ts',
});

Run:

node scripts/generate-routes.js

3) Mount NextNavigation

import React from 'react';
import { NextNavigation } from 'react-native-next-navigation';
import { routes } from './src/generated/routes';

export default function App() {
  return <NextNavigation routes={routes} />;
}

4) Navigate between screens

This library generates React Navigation screen names from file paths. Use those generated name values in navigation.navigate(...).

Example mapping:

• src/app/index.tsx -> name: 'Home', path: '/'
• src/app/profile.tsx -> name: 'profile', path: '/profile'
• src/app/user/[id].tsx -> name: 'user_id', path: '/user/:id'

import React from 'react';
import { Button, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  profile: undefined;
  user_id: { id: string };
};

type AppNavigation = NativeStackNavigationProp<RootStackParamList>;

export function HomeActions() {
  const navigation = useNavigation<AppNavigation>();

  return (
    <View>
      <Button title="Go Profile" onPress={() => navigation.navigate('profile')} />
      <Button
        title="Go User 42"
        onPress={() => navigation.navigate('user_id', { id: '42' })}
      />
    </View>
  );
}

In a dynamic screen (for example src/app/user/[id].tsx), read params:

import React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';
import type { RouteProp } from '@react-navigation/native';

type RootStackParamList = {
  user_id: { id: string };
};

type UserRoute = RouteProp<RootStackParamList, 'user_id'>;

export default function UserScreen() {
  const route = useRoute<UserRoute>();
  return <Text>User ID: {route.params.id}</Text>;
}

5) Automate in package scripts (recommended)

{
  "scripts": {
    "routes:gen": "node scripts/generate-routes.js",
    "start": "npm run routes:gen && react-native start",
    "android": "npm run routes:gen && react-native run-android",
    "ios": "npm run routes:gen && react-native run-ios"
  }
}

Notes

• Re-run route generation whenever files inside src/app change.
• generateRoutes currently scans .tsx and .jsx route files.
• @react-navigation/native and @react-navigation/native-stack are required peer dependencies.

API

generateRoutes(options?)

generateRoutes({
  appDir?: string; // default: 'src/app'
  output?: string; // default: 'src/generated/routes.ts'
});

scanRoutes(appDir, outputFile)

Scans route files and returns route metadata used by generateRoutes.

NextNavigation

<NextNavigation routes={routes} />

Legacy Example

import { multiply } from 'react-native-next-navigation';

const result = multiply(3, 7);

한국어

React Native에서 Next.js 스타일 파일 기반 라우팅을 사용할 수 있는 라이브러리입니다.

설치

npm install react-native-next-navigation
npm install @react-navigation/native @react-navigation/native-stack

1) 라우트 파일 만들기

src/app 아래에 화면 파일을 배치합니다.

src/app
├─ index.tsx
├─ profile.tsx
└─ user
   └─ [id].tsx

• index.tsx -> /
• profile.tsx -> /profile
• [id].tsx -> /:id

2) 라우트 코드 생성

예: scripts/generate-routes.js

const { generateRoutes } = require('react-native-next-navigation');

generateRoutes({
  appDir: 'src/app',
  output: 'src/generated/routes.ts',
});

실행:

node scripts/generate-routes.js

3) 앱에 연결

import React from 'react';
import { NextNavigation } from 'react-native-next-navigation';
import { routes } from './src/generated/routes';

export default function App() {
  return <NextNavigation routes={routes} />;
}

4) 화면 이동 코드는 이렇게 작성합니다

이 라이브러리는 파일 경로를 바탕으로 React Navigation의 screen name을 생성합니다.
실제 이동 시에는 navigation.navigate(생성된_name)을 사용합니다.

예시 매핑:

• src/app/index.tsx -> name: 'Home', path: '/'
• src/app/profile.tsx -> name: 'profile', path: '/profile'
• src/app/user/[id].tsx -> name: 'user_id', path: '/user/:id'

import React from 'react';
import { Button, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  profile: undefined;
  user_id: { id: string };
};

type AppNavigation = NativeStackNavigationProp<RootStackParamList>;

export function HomeActions() {
  const navigation = useNavigation<AppNavigation>();

  return (
    <View>
      <Button title="프로필로 이동" onPress={() => navigation.navigate('profile')} />
      <Button
        title="유저 42로 이동"
        onPress={() => navigation.navigate('user_id', { id: '42' })}
      />
    </View>
  );
}

동적 라우트 화면(예: src/app/user/[id].tsx)에서는 params를 이렇게 읽습니다.

import React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';
import type { RouteProp } from '@react-navigation/native';

type RootStackParamList = {
  user_id: { id: string };
};

type UserRoute = RouteProp<RootStackParamList, 'user_id'>;

export default function UserScreen() {
  const route = useRoute<UserRoute>();
  return <Text>User ID: {route.params.id}</Text>;
}

5) npm 스크립트 자동화 (권장)

{
  "scripts": {
    "routes:gen": "node scripts/generate-routes.js",
    "start": "npm run routes:gen && react-native start",
    "android": "npm run routes:gen && react-native run-android",
    "ios": "npm run routes:gen && react-native run-ios"
  }
}

참고 사항

• src/app 내부 파일이 바뀌면 라우트를 다시 생성하세요.
• 현재 generateRoutes는 .tsx, .jsx 파일을 스캔합니다.
• @react-navigation/native, @react-navigation/native-stack는 필수 peer dependency입니다.

API 요약

generateRoutes({
  appDir?: string; // 기본값: 'src/app'
  output?: string; // 기본값: 'src/generated/routes.ts'
});

• scanRoutes(appDir, outputFile): 라우트 메타데이터를 스캔합니다.
• NextNavigation: <NextNavigation routes={routes} /> 형태로 사용합니다.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library