Comprehensive Solution and Analysis for 'Unable to resolve module react-navigation' in React Native Projects

Problem Analysis and Root Causes

The error message <span style="font-family: monospace;">"Unable to resolve module 'react-navigation'"</span> in React Native development typically indicates specific issues in project configuration or build processes. This error directly points to module resolution failure, with root causes that can be analyzed from several technical perspectives:

Core Solution Approach

Based on best practices and community experience, resolving this issue requires following systematic steps:

Step 1: Install react-navigation Module

First, ensure the <span style="font-family: monospace;">react-navigation</span> module is properly installed. Use npm or yarn package manager:

npm install react-navigation

Or with yarn:

yarn add react-navigation

After installation, the dependencies section in <span style="font-family: monospace;">package.json</span> should include the corresponding entry:

{
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.3",
    "react-navigation": "^version"
  }
}

Step 2: Rebuild the Project

After module installation, the project must be rebuilt to apply changes. Execute platform-specific commands:

react-native run-android

or

react-native run-ios

The rebuild process recompiles native code and updates module dependencies.

Step 3: Restart the Packager

The React Native packager (Metro Bundler) may cache old module information. Stop the currently running packager and restart:

react-native start

In some cases, cache clearing may be necessary:

npm start -- --reset-cache

Code Implementation and Module Import

After proper module installation, correct import in code is essential. The original import approach:

import { StackNavigator } from 'react-navigation';

In newer versions of react-navigation, different import approaches may be required. Based on Answer 2's supplementary suggestions:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

Then create the navigator:

const Stack = createStackNavigator({
  Home: { screen: HomeScreen },
  Login: { screen: Login },
  Register: { screen: Register },
  Profile: { screen: Profile }
});

const AppContainer = createAppContainer(Stack);
export default AppContainer;

Dependency Management and Best Practices

According to Answer 3's supplementary information, react-navigation may require additional dependencies. Complete dependency installation might include:

npm install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

For Expo-based projects:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Troubleshooting and Verification

If the problem persists after following the above steps, try these verification methods:

1. Check if react-navigation folder exists in node_modules directory
2. Verify version compatibility in package.json
3. Ensure all dependencies are properly linked (for iOS, <span style="font-family: monospace;">pod install</span> may be needed)
4. Check if babel or metro configuration is correctly set in project root

Conclusion

Resolving the <span style="font-family: monospace;">"Unable to resolve module 'react-navigation'"</span> error requires a systematic approach. The core lies in ensuring proper module installation, complete project rebuilding, and correct packager cache clearing. By following the steps provided in this article, developers can effectively solve this issue and establish a more stable React Native development environment. Maintaining up-to-date and compatible dependency versions is key to preventing similar problems.