What does the Expo Router skill do for my project?

It provides Claude with specialized patterns for implementing navigation, including file-based routing, Stack configuration, and native tab bars.

How does it handle screen-specific header options?

It follows the best practice of using the component within individual route files rather than cluttering global layout files.

Can I use this for dynamic header buttons?

Yes, the skill provides patterns for using useNavigation and useLayoutEffect to programmatically update headers with buttons or interactions.

Does this skill support platform-native features?

Yes, it includes specific patterns for native tabs using SF Symbols on iOS and custom drawables on Android.

Expo Router Navigation

Name: Expo Router Navigation
Author: jchaselubitz

byjchaselubitz

0•

Mobile Development

Optimizes React Native app navigation using file-based routing patterns and standardized Expo Router configurations.

This skill empowers developers to build sophisticated mobile navigation systems using Expo Router. It provides standardized patterns for Stack navigator setup, route auto-discovery, and the implementation of platform-native tabs. By emphasizing screen-level configuration and minimal layout files, it ensures a clean, maintainable codebase for React Native projects, helping Claude understand how to structure your app's flow according to the latest mobile development best practices.

Key Features

01Standardized Stack navigator configuration

02Route group and layout optimization

03Dynamic header and UI management

04Native tab bar implementation with SF Symbols

05Automated file-based routing patterns

060 GitHub stars

Use Cases

01Building cross-platform mobile navigation systems

02Migrating to Expo Router's file-based system

03Implementing native header controls and tab layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jchaselubitz/drill-app expo-router

For use in Claude.ai and ChatGPT

Download Skill