The Upgrade React Navigation skill helps developers upgrade React Navigation to the next major version while managing breaking changes. It is designed for developers transitioning between major versions like 6.x to 7.x or 7.x to 8.x.
$ npx skills add https://github.com/react-navigation/skills --skill upgrade-react-navigationThe Upgrade React Navigation skill automates the process of migrating between major versions of React Navigation, including 6.x to 7.x and 7.x to 8.x upgrades. It provides version-specific migration guides that help developers navigate breaking changes and configuration updates required for each major release. This skill is designed for React Native and web developers who need to keep their navigation layer current while minimizing manual refactoring work. By automating upgrade detection and providing structured guidance, it reduces the complexity and time required to adopt new React Navigation versions in production applications.
Use the installation command to add this skill to your project.
Upgrading from React Navigation 6 to 7
Upgrading from React Navigation 7 to 8
Managing breaking changes during upgrades
Preserving existing navigation behavior during upgrades
$ npx skills add https://github.com/react-navigation/skills --skill upgrade-react-navigationgit clone https://github.com/react-navigation/skillsCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
I need to upgrade React Navigation from version [CURRENT_VERSION] to [TARGET_VERSION] in a [COMPANY] project in the [INDUSTRY] sector. Here’s the current setup: [PASTE_CURRENT_NAVIGATION_CODE]. Identify all breaking changes between these versions, provide a step-by-step migration guide, and update the code to be compatible with the new version. Include any necessary dependency updates and testing steps. Assume the project uses TypeScript and includes common navigation patterns like stacks, tabs, and modals.
# React Navigation Upgrade Guide (v6.x → v7.x)
## Breaking Changes Identified
- **Stack Navigator**: `createStackNavigator` is now `createNativeStackNavigator` for native stacks.
- **TypeScript**: Type imports now require `NavigatorScreenParams` for nested navigators.
- **Navigation Prop**: `navigation` prop is no longer passed by default; use `useNavigation` hook.
## Updated Code
### Before (v6.x)
```typescript
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function AppStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
);
}
```
### After (v7.x)
```typescript
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigatorScreenParams } from '@react-navigation/native';
const Stack = createNativeStackNavigator();
type RootStackParamList = {
Home: undefined;
};
function AppStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
);
}
```
## Dependency Updates
- `@react-navigation/native`: `^6.0.0` → `^7.0.0`
- `@react-navigation/native-stack`: `^6.0.0` → `^7.0.0`
- `react-native-screens`: `^3.0.0` → `^4.0.0`
## Testing Steps
1. Verify all screens render correctly.
2. Test navigation flows (e.g., stack pushes/pops, tab switches).
3. Check TypeScript compilation for type errors.
4. Run unit tests for navigation logic.
✅ Migration complete. No errors detected in test suite.Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan