🧭 React Native App Router

A lightweight, file-based routing library for React Native, inspired by Next.js and powered by React Navigation. Define your navigation structure using folders and files — no more manual route configuration.

✨ Features

• 📁 File-based routing: Automatically map files and folders to screens and navigators
• 🔄 Layouts and nested navigation: Seamlessly compose stack, tab, and drawer navigators
• ⚙️ Zero-config setup: Just write your screens, and the router takes care of the rest
• 💡 Inspired by Next.js: Familiar folder-based routing model
• ✅ Built with TypeScript, fully typed for DX
• 🔧 CLI included: Easily scaffold routes and layouts

📦 Installation

npm install react-native-app-router
# or
yarn add react-native-app-router

You must also install peer dependencies required by React Navigation (see React Navigation's docs).

🚀 Getting Started

Create a file structure like this inside your app:

src/
└── app/
    ├── layout.tsx         # Shared layout for all screens
    ├── home/
    │   └── page.tsx       # A screen shown at /home
    └── profile/
        ├── layout.tsx     # Layout specific to profile routes
        └── settings/
            └── page.tsx   # A nested screen at /profile/settings

Example page.tsx (a screen)

// src/app/home/page.tsx
import { View, Text } from "react-native";

export default function HomePage() {
  return (
    <View>
      <Text>Welcome Home!</Text>
    </View>
  );
}

Example layout.tsx (a layout)

// src/app/layout.tsx
import { SafeAreaView } from "react-native";

export default function RootLayout({ children }) {
  return <SafeAreaView style={{ flex: 1 }}>{children}</SafeAreaView>;
}

Entry point (App.tsx)

import { AppRouterProvider } from "react-native-app-router";

export default function App() {
  return <AppRouterProvider />;
}

🛠️ CLI Usage

The built-in CLI helps generate screens and layouts:

npx react-native-app-router generate screen home/about
npx react-native-app-router generate layout profile

🧪 Testing

Run tests with:

npm test

To view test coverage:

npm run test:coverage

📚 Learn More

• React Navigation
• Next.js Routing
• Expo Router (similar concept)

🤝 Contributing

Contributions are welcome! Please:

1. Fork this repo
2. Create a new branch: git checkout -b feature/your-feature
3. Submit a PR with detailed description

Use the following scripts:

npm run lint       # Lint code
npm run format     # Format code with Prettier

📄 License

MIT © Adrian Urs